Merge pull request #5 from openstreetmap-polska/new_ui

Sidebar + zmiany UI

.gitignore

@@ -127,3 +127,5 @@ dmypy.json
 
 # Pyre type checker
 .pyre/
+/requirements.txt
+/.jshintrc

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5513
+}

src/download_data.py

@@ -40,6 +40,7 @@ tags_to_keep = {
     'phone',
     'note',
     'note:pl',
+    'opening_hours',
 }
 
 response = requests.post(url=overpass_api_url, data={'data': overpass_query})
@@ -62,5 +63,5 @@ for element in elements:
         geojson_point_feature(lat=latitude, lon=longitude, properties=tags)
     )
 
-with open(file='aed_poland.geojson', mode='w', encoding='utf-8') as f:
+with open(file='src/aed_poland.geojson', mode='w', encoding='utf-8') as f:
     json.dump(geojson, f, allow_nan=False)

src/favicon/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/favicon/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

src/favicon/safari-pinned-tab.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="356.000000pt" height="356.000000pt" viewBox="0 0 356.000000 356.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,356.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M0 1780 l0 -1780 1780 0 1780 0 0 1780 0 1780 -1780 0 -1780 0 0
+-1780z m2980 1345 l0 -145 150 0 150 0 0 -150 0 -150 -150 0 -150 0 0 -145 0
+-145 -145 0 -145 0 0 145 0 145 -150 0 -151 0 3 148 3 147 148 3 147 3 0 144
+0 145 145 0 145 0 0 -145z m-1669 -412 c6 -6 2 -9 -13 -9 -19 1 -24 -5 -26
+-33 -7 -72 50 -161 103 -161 12 0 59 11 106 26 90 27 94 27 241 -5 54 -12 160
+-30 237 -40 137 -19 141 -19 236 0 113 22 139 16 194 -46 45 -52 58 -86 71
+-188 6 -47 31 -161 55 -253 25 -93 45 -175 45 -183 0 -8 -34 -49 -75 -92 -85
+-87 -93 -112 -47 -151 55 -48 57 -53 63 -207 6 -158 9 -168 77 -266 29 -43 33
+-56 29 -94 -4 -34 0 -51 15 -71 27 -38 13 -65 -72 -141 -39 -35 -79 -77 -87
+-93 -8 -16 -43 -59 -78 -96 -86 -92 -99 -118 -91 -193 3 -34 13 -83 22 -110 9
+-27 12 -53 8 -57 -12 -12 -146 44 -278 114 -57 31 -113 56 -124 56 -11 0 -44
+-11 -74 -25 -67 -31 -79 -31 -117 1 -41 34 -70 27 -100 -26 -28 -50 -41 -56
+-79 -36 -32 17 -37 25 -47 96 -14 90 -44 104 -99 45 -25 -26 -42 -35 -65 -35
+-33 0 -43 13 -55 70 -9 44 -83 148 -125 176 -40 26 -78 29 -123 10 -37 -16
+-73 87 -48 134 12 22 16 20 -102 43 l-68 13 6 -22 c8 -30 -21 -82 -50 -90 -33
+-8 -57 -2 -66 16 -4 8 -19 39 -34 68 -31 59 -29 96 4 107 26 8 25 18 -2 50
+-19 21 -37 28 -98 36 -98 14 -125 25 -140 57 -7 15 -16 34 -20 42 -4 8 -24 16
+-45 18 -33 3 -36 6 -30 25 3 12 9 55 12 95 5 69 4 75 -26 123 -35 57 -39 99
+-16 175 19 61 19 127 1 162 -8 16 -10 35 -6 47 11 30 -4 67 -49 128 -52 69
+-52 93 0 153 l41 48 -6 65 c-4 37 -9 86 -12 110 l-6 43 31 -23 c38 -28 64 -18
+69 26 5 36 -8 47 -60 54 -35 5 -44 10 -46 28 -3 21 -1 22 41 17 30 -4 70 1
+128 16 46 12 107 27 134 33 107 21 122 28 199 91 83 67 126 86 197 86 24 0 85
+14 134 30 91 31 182 37 206 13z m50 -45 c8 -15 8 -18 0 -14 -6 4 -16 16 -22
+28 -8 15 -8 18 0 14 6 -4 16 -16 22 -28z"/>
+<path d="M1367 1853 l-345 -388 184 -3 c101 -1 184 -5 184 -8 0 -3 -43 -107
+-96 -232 -166 -389 -159 -371 -131 -342 45 46 637 739 637 745 0 3 -84 5 -186
+5 l-185 0 7 23 c4 12 36 81 72 152 85 171 211 435 208 435 -2 0 -159 -174
+-349 -387z"/>
+</g>
+</svg>

src/favicon/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "AED Polska",
+    "short_name": "AED Polska",
+    "icons": [
+        {
+            "src": "favicon/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "favicon/android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#dbdbdb",
+    "background_color": "#dbdbdb",
+    "display": "standalone"
+}

src/index.html

@@ -5,16 +5,79 @@
 
         <meta charset="utf-8" />
         <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
-
+        <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
+        <link rel="manifest" href="favicon/site.webmanifest">
+        <link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#5bbad5">
+        <link rel="shortcut icon" href="favicon/favicon.ico">
+        <meta name="msapplication-TileColor" content="#da532c">
+        <meta name="msapplication-config" content="favicon/browserconfig.xml">
+        <meta name="theme-color" content="#dbdbdb">
+        <link rel="preload" as="fetch" href="./aed_poland.geojson">
         <script src="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js"></script>
         <link href="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css" rel="stylesheet" />
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
         <style>
             body { margin: 0; padding: 0; }
             #map { position: absolute; top: 0; bottom: 0; width: 100%; }
+            .sidebar {
+                z-index: 1;
+                margin: 0.5rem !important;
+                width: 435px;
+                border-radius: 10px;
+                box-shadow: 0 .5em 1em -0.125em rgba(10,10,10,0.1),0 0 0 1px rgba(10,10,10,0.02);
+                max-height: 90vh;
+             }
+             .card
+             {
+               z-index: 1;
+             }
+             #sidebar-card-image {
+                padding-left: 15px;
+                padding-top: 10px;
+                padding-bottom: 10px;
+                max-height: 92px;
+             }
+             .has-background-green
+             {
+                background-color: #008954;
+             }
+             .card-content
+             {
+               border-left: 5px solid white;
+               border-right: 5px solid white;
+             }
         </style>
         </head>
         <body>
-            <div id="map"></div>
+          <div class="sidebar is-invisible">
+            <div id="poi-sidebar" class="card">
+              <div id="sidebar-header" style="border: 4px solid white;">
+                <button class="delete is-medium is-pulled-right close-button m-3" onclick="hideSidebar()" aria-label="Close button"></button>
+                <div class="columns is-vcentered is-flex p-1">
+                  <div class="column is-one-third is-one-quarter-touch"><img class="image" src="card-image.png" alt="Placeholder image" id="sidebar-card-image" ></div>
+                  <div class="column"><p class="title has-text-white has-text-weight-light py-2" id="sidebar-caption"></p></div>
+              </div>
+            </div>
+              <div class="card-content px-4 has-background-danger-dark has-text-white-ter">      
+                <div class="columns is-vcentered has-text-centered">
+                  <div class="column is-half p-0"></div>
+                  <div class="column is-half p-0"></div>
+              </div>      
+              </div>
+              <div class="card-content">            
+                <div class="content">
+                </div>
+              </div>
+              <footer class="card-footer">
+                <a href="" class="card-footer-item">Dodaj brakujące informacje</a>
+              </footer>
+          </div>
+        </div>
+        
+        <div id="map"></div>
+
             <script src="./map.js"></script>
         </body>
 </html>

src/map.js

@@ -23,15 +23,138 @@ var map = new maplibregl.Map({
             'type': 'raster',
             'source': 'raster-tiles',
             'minzoom': 0,
-            'maxzoom': 22,
+            'maxzoom': 19,
         }, ]
     },
 });
 
+let control = new maplibregl.NavigationControl();
+map.addControl(control, 'bottom-right');
+
+function defineColor(access) {
+    accessValues = {
+        'yes': 'has-background-green',
+        'no': 'has-background-grey',
+        'private': 'has-background-grey',
+        'permissive': 'has-background-link-dark',
+        'default': 'has-background-grey'
+    };
+
+    accessClass = accessValues[access] || accessValues['default'];
+    return accessClass;
+}
+
+function defineAccessDescription(access) {
+    accessValues = {
+        'yes': 'ogólnodostępny',
+        'no': 'prywatny',
+        'private': 'prywatny',
+        'permissive': 'o ograniczonym dostępie',
+        'default': ''
+    };
+
+    accessClass = accessValues[access] || accessValues['default'];
+    return accessClass;
+}
+
+function defineOpeningHours(openingHours) {
+    let openingHoursIcon = `
+    <span class="icon">
+        <svg class="mr-1" style="width:24px;height:24px" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z" />
+        </svg>
+    </span>`;
+
+    if (openingHours) {
+        if (openingHours.includes('24/7')) {
+            return '<span class="icon-text">' + openingHoursIcon + '<span class="has-text-weight-medium">Dostępny całodobowo</span></span>';
+        } else {
+            return '<span class="icon-text">' + openingHoursIcon + ' ' + openingHours + '</span></span>';
+        }
+    } else {
+        return '<span class="icon-text">' + openingHoursIcon + '<sup>dostępność: uzupełnij</sup></span></span>';
+    }
+}
+
+function defineIndoor(indoor) {
+    let indoorIcon = `
+    <span class="icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M5,3V21H11V17.5H13V21H19V3H5M7,5H9V7H7V5M11,5H13V7H11V5M15,5H17V7H15V5M7,9H9V11H7V9M11,9H13V11H11V9M15,9H17V11H15V9M7,13H9V15H7V13M11,13H13V15H11V13M15,13H17V15H15V13M7,17H9V19H7V17M15,17H17V19H15V17Z" />
+    </svg></span>`;
+
+    if (indoor == 'yes') {
+        return '<span class="icon-text">' + indoorIcon + ' Wewnątrz budynku<span>';
+    } else if (indoor == 'no') {
+        return '<span class="icon-text">' + indoorIcon + ' Na zewnątrz</span>';
+    } else {
+        return '<span class="icon-text">' + indoorIcon + ` <sup>W budynku/zew.? - uzupełnij</sup></span>`;
+    }
+}
+
+function showSidebar(properties) {
+    // SIDEBAR - UI
+    let sidebar = document.getElementsByClassName('sidebar')[0];
+    if (sidebar) {
+        sidebar.classList.remove('is-invisible');
+        createSidebar(properties);
+    } else {
+        console.log('sidebar not found');
+    }
+
+}
+
+function hideSidebar() {
+    let sidebar = document.getElementsByClassName('sidebar')[0];
+    if (sidebar) {
+        sidebar.classList.add('is-invisible');
+    } else {
+        console.log('sidebar not found');
+    }
+}
+
+function getOsmEditLink(id) {
+    return `https://www.openstreetmap.org/edit?editor=id&node=${id}`;
+}
+
+function createSidebar(properties) {
+    let sidebarCaption = document.getElementById('sidebar-caption');
+    let sidebarTitle = document.getElementById('poi-title');
+    let sidebarContent = document.getElementsByClassName('content')[0];
+    sidebarContent.innerHTML = '';
+
+    let sidebarHeader = document.getElementById('sidebar-header');
+    let sidebarSubheader = document.getElementsByClassName('column is-half')[0];
+    let sidebarSubheaderIndoor = document.getElementsByClassName('column is-half')[1];
+    sidebarSubheaderIndoor.innerHTML = '';
+
+    sidebarHeader.classList = [];
+    let sidebarLink = document.getElementsByClassName('card-footer-item')[0];
+
+    // PRESENTATION
+    sidebarHeader.classList.add(defineColor(properties.access));
+    sidebarSubheader.innerHTML = defineOpeningHours(properties.opening_hours);
+    sidebarSubheaderIndoor.innerHTML = defineIndoor(properties.indoor);
+    sidebarCaption.innerHTML = `defibrylator AED ${defineAccessDescription(properties.access)}`;
+    sidebarContent.innerHTML = ` 
+        <p class="has-text-weight-light">Dokładna lokalizacja: <span class="add-new has-text-weight-medium">${properties['defibrillator:location:pl'] || properties['defibrillator:location'] || `<sup>brak informacji - <a href="${getOsmEditLink(properties.osm_id)}">uzupełnij</a></sup>`}</span></p>
+        <p class="has-text-weight-light">Opis: <span class="add-new has-text-weight-medium">${properties['description:pl'] || properties.description || `<sup>brak informacji - <a href="${getOsmEditLink(properties.osm_id)}">uzupełnij</a></sup>`}</span></p>
+        <p class="has-text-weight-light">Numer kontaktowy: <span class="add-new has-text-weight-medium">${properties.phone || `<sup>brak informacji - <a href="${getOsmEditLink(properties.osm_id)}">uzupełnij</a></sup>`}</span></p>
+    `;
+    
+    if (properties.note || properties['note:pl'])
+    {
+        sidebarContent.innerHTML += `<p class="has-text-weight-light">Uwagi: <span class="add-new has-text-weight-medium">${properties['note:pl'] || properties.note || 'brak uwag'}</span></p>`;
+    }
+
+    sidebarLink.setAttribute("href", getOsmEditLink(properties.osm_id));
+}
+
 map.on('load', () => {
     map.loadImage('./aed_240px.png', (error, image) => {
         if (error) throw error;
-        map.addImage('aed-icon', image, { 'sdf': false });
+        map.addImage('aed-icon', image, {
+            'sdf': false
+        });
         map.addSource('aed-locations', {
             'type': 'geojson',
             'data': './aed_poland.geojson',
@@ -74,5 +197,10 @@ map.on('load', () => {
             },
             'filter': ['has', 'point_count'],
         });
+        map.on('click', 'unclustered', function (e) {
+            if (e.features[0].properties !== undefined) {
+                showSidebar(e.features[0].properties);
+            }
+        });
     });
 });