Skip to content

Commit 9019922

Browse files
meomancermeomancer
authored
Adding multiindicator layer with PIN mode (#21)
* Add models * Update frontend/backend to save the multiindicator config * Fix flake * Update legend * Show pin as marker * Fix error when save dashboard
1 parent d82e3b8 commit 9019922

File tree

24 files changed

+772
-417
lines changed

24 files changed

+772
-417
lines changed

‎django_project/frontend/src/app/app.scss

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -469,6 +469,28 @@ header {
469469
}
470470
}
471471

472+
.mapboxgl-popup-content {
473+
.pins {
474+
display: flex;
475+
background-color: white;
476+
box-shadow: $box-shadow;
477+
padding: 3px;
478+
opacity: 0.8;
479+
align-items: center;
480+
481+
.pin {
482+
border-radius: 50%;
483+
margin-right: 3px;
484+
485+
&.empty {
486+
width: 4px;
487+
height: 4px;
488+
background: black;
489+
}
490+
}
491+
}
492+
}
493+
472494
// ------------------------------------
473495
// REACT SELECT
474496
// ------------------------------------

‎django_project/frontend/src/components/HelpPage/style.scss

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,10 @@
2222
.Admin {
2323
.HelpPageSection {
2424
top: 0;
25-
padding-top: 0;
25+
padding-bottom: 0;
26+
margin-top: 0;
2627
box-sizing: border-box;
28+
z-index: 999999;
2729
}
2830
}
2931

@@ -33,10 +35,11 @@
3335
width: 100%;
3436
pointer-events: none;
3537
background-color: unset;
36-
z-index: 99999999;
38+
z-index: 1;
3739
transition: background-color linear 0.2s;
3840
top: 0;
39-
padding-top: $nav-header-height;
41+
margin-top: $nav-header-height;
42+
padding-bottom: $nav-header-height;
4043
box-sizing: border-box;
4144

4245
&.Open {

‎django_project/frontend/src/components/Input/style.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
align-items: center;
6363
padding: 1px;
6464
box-sizing: border-box;
65+
max-width: 300px;
6566

6667
.IconStart {
6768
margin-left: 1rem;

‎django_project/frontend/src/components/Navbar/index.jsx

Lines changed: 45 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,17 @@
1717
NAVBAR
1818
========================================================================== */
1919

20-
import React, { useRef } from 'react';
20+
import React, { Fragment, useRef } from 'react';
2121
import $ from 'jquery';
2222
import i18n from "i18next";
2323

2424
import User from './User'
2525
import { EmbedConfig } from "../../utils/embed";
2626
import { CogIcon, HelpIcon } from "../Icons";
2727
import { ThemeButton } from "../Elements/Button";
28+
import { HelpPage } from "../HelpPage";
2829

2930
import './style.scss';
30-
import { HelpPage } from "../HelpPage";
3131

3232
/**
3333
* Navbar.
@@ -42,54 +42,56 @@ export default function NavBar({ minified }) {
4242
$('.page__header-logo').width($('.page__header-link').width());
4343
const canAccessAdmin = is_contributor && !EmbedConfig().id
4444
return (
45-
<header>
46-
<div className='NavHeader'>
47-
<div className='NavHeaderLogo'>
45+
<Fragment>
46+
<header>
47+
<div className='NavHeader'>
48+
<div className='NavHeaderLogo'>
49+
<a
50+
href='/'
51+
title={i18n.t('Homepage')}
52+
className='nav-header-link'
53+
>
54+
<img src={(minified ? favicon : icon)} alt="Logo"/>
55+
</a>
56+
</div>
4857
<a
4958
href='/'
5059
title={i18n.t('Homepage')}
51-
className='nav-header-link'
60+
className='NavHeaderLink'
5261
>
53-
<img src={(minified ? favicon : icon)} alt="Logo"/>
54-
</a>
55-
</div>
56-
<a
57-
href='/'
58-
title={i18n.t('Homepage')}
59-
className='NavHeaderLink'
60-
>
61-
{site_title}
62-
</a>
63-
<div className='Separator'></div>
64-
{
65-
headerTitle ?
66-
<div className='MiddleSection'>{headerTitle}</div> : null
67-
}
68-
<div className='Separator'></div>
69-
{
70-
canAccessAdmin ? (
71-
<div className='LinkButton' style={{ marginRight: "1rem" }}>
72-
<a href={urls.admin.dashboardList}>
73-
<ThemeButton
74-
variant="white"
75-
>
76-
<CogIcon/> Admin panel
77-
</ThemeButton>
78-
</a>
79-
</div>
80-
) : null
81-
}
82-
<div className='HelpButton .SvgButton'>
83-
<a href='#' onClick={_ => {
84-
helpPageRef?.current.open()
85-
}}>
86-
<HelpIcon/>
62+
{site_title}
8763
</a>
64+
<div className='Separator'></div>
65+
{
66+
headerTitle ?
67+
<div className='MiddleSection'>{headerTitle}</div> : null
68+
}
69+
<div className='Separator'></div>
70+
{
71+
canAccessAdmin ? (
72+
<div className='LinkButton' style={{ marginRight: "1rem" }}>
73+
<a href={urls.admin.dashboardList}>
74+
<ThemeButton
75+
variant="white"
76+
>
77+
<CogIcon/> Admin panel
78+
</ThemeButton>
79+
</a>
80+
</div>
81+
) : null
82+
}
83+
<div className='HelpButton .SvgButton'>
84+
<a href='#' onClick={_ => {
85+
helpPageRef?.current.open()
86+
}}>
87+
<HelpIcon/>
88+
</a>
89+
</div>
90+
<User/>
8891
</div>
89-
<User/>
90-
</div>
92+
</header>
9193
<HelpPage ref={helpPageRef}/>
92-
</header>
94+
</Fragment>
9395
)
9496
}
9597

‎django_project/frontend/src/components/SidePanelTree/style.scss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,9 +77,10 @@
7777
.MuiCircularProgress-root {
7878
display: none;
7979
position: absolute;
80-
top: 2px;
81-
height: 18px !important;
82-
width: 18px !important;
80+
top: 4px;
81+
left: 1px;
82+
height: 14px !important;
83+
width: 14px !important;
8384
}
8485

8586
&.Loading {

‎django_project/frontend/src/pages/Admin/Components/AdminForm/style.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@
3333
padding: 1rem 1rem 0 1rem !important;
3434
min-height: 0;
3535
overflow: auto;
36+
37+
&.Style {
38+
min-height: 300px;
39+
}
3640
}
3741

3842
.AdminFormLoading {

‎django_project/frontend/src/pages/Admin/Components/Input/MultiSelector/Row.jsx

Lines changed: 42 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
/**
2-
* GeoSight is UNICEF's geospatial web-based business intelligence platform.
3-
*
4-
* Contact : [email protected]
5-
*
6-
* .. note:: This program is free software; you can redistribute it and/or modify
7-
* it under the terms of the GNU Affero General Public License as published by
8-
* the Free Software Foundation; either version 3 of the License, or
9-
* (at your option) any later version.
10-
*
11-
* __author__ = '[email protected]'
12-
* __date__ = '13/06/2023'
13-
* __copyright__ = ('Copyright 2023, Unicef')
14-
*/
2+
* GeoSight is UNICEF's geospatial web-based business intelligence platform.
3+
*
4+
* Contact : [email protected]
5+
*
6+
* .. note:: This program is free software; you can redistribute it and/or modify
7+
* it under the terms of the GNU Affero General Public License as published by
8+
* the Free Software Foundation; either version 3 of the License, or
9+
* (at your option) any later version.
10+
*
11+
* __author__ = '[email protected]'
12+
* __date__ = '13/06/2023'
13+
* __copyright__ = ('Copyright 2023, Unicef')
14+
*/
1515

1616
import React, { Fragment, useEffect, useState } from 'react';
1717
import RemoveCircleIcon from "@mui/icons-material/RemoveCircle";
@@ -140,7 +140,7 @@ export default function MultiSelectorConfigRows(
140140
id={id} items={items}
141141
strategy={rectSortingStrategy}>
142142
{
143-
items.map(item => {
143+
items.map((item, idx) => {
144144
let selectedItem = selectedItems.find(option => option.id === item)
145145
if (!selectedItem) {
146146
return null
@@ -155,7 +155,7 @@ export default function MultiSelectorConfigRows(
155155
}}
156156
/>
157157
</td>
158-
<td>{selectedItem.name}</td>
158+
<td>{selectedItem.indicator ? selectedItem.indicator : selectedItem.name}</td>
159159
{
160160
additionalFields.map(field => {
161161
return <td>
@@ -171,16 +171,33 @@ export default function MultiSelectorConfigRows(
171171
</td>
172172
})
173173
}
174-
<td>
175-
<ColorSelector
176-
color={selectedItem.color}
177-
onChange={evt => {
178-
selectedItem.color = evt.target.value
179-
setSelectedItems([...selectedItems])
180-
}}
181-
disabled={!configEnabled}
182-
/>
183-
</td>
174+
{
175+
props.noColor ? null :
176+
<td>
177+
<ColorSelector
178+
color={selectedItem.color}
179+
onChange={evt => {
180+
selectedItem.color = evt.target.value
181+
setSelectedItems([...selectedItems])
182+
}}
183+
disabled={!configEnabled}
184+
/>
185+
</td>
186+
}
187+
{
188+
!props.action ? null :
189+
<td>
190+
{
191+
React.cloneElement(props.action, {
192+
indicator: selectedItem,
193+
update: item => {
194+
selectedItems[idx] = item
195+
setSelectedItems([...selectedItems])
196+
}
197+
})
198+
}
199+
</td>
200+
}
184201
</SortableItem>
185202
)
186203
})

0 commit comments

Comments
 (0)