Finished groups

Server/app/svelte/public/css/auth.css

@@ -169,3 +169,12 @@ label {
     margin-top: -0.2rem;
     color: #5f5f5f;
 }
+
+#content {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    height: 100%;
+    min-height: 100vh;
+}

Server/app/svelte/public/css/navbar.css

@@ -0,0 +1,268 @@
+ /* Header */
+ #navbar{    
+    position: relative;
+    top: 0;
+    width: min(100%,116rem);
+    z-index: 1000000000;
+    height: 5.26rem;
+    padding-left: 0rem;
+    padding-right: 0rem;
+}
+
+#navbar * {
+    font-family: var(--sans-serif, sans-serif);
+}
+
+/* Logo */
+#logo-container {
+    display: flex;
+    position: absolute;
+    margin-left: 1rem;
+    height: 100%;
+    max-height: 5.26rem;
+    color: black;
+    z-index: 1;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+}
+
+#navbar-logo {
+    height: 3.5rem;
+    width: 3.5rem;
+    object-fit: contain;
+    border-radius: 10rem;
+}
+
+#navbar-logo-text {
+    position: relative;
+    word-wrap: normal;
+    height: 100%;
+    line-height: 400%;
+    font-size: 1.4rem;
+    color: #292222;
+    font-family: var(--sans-serif, sans-serif);
+    font-weight: 400;
+    padding-left: 1.2rem;
+}
+
+/* Nav menu */
+#nav {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    overflow: hidden;
+    z-index: 0;
+}
+#menu > li > a, .options-button {
+    display: block;
+    padding: 1.2rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    color: black;
+    font-size: 1.4rem;
+}
+
+#menu > li > a:active{
+    
+}
+
+#menu li {
+    list-style-type: none;
+}
+
+#nav{
+    max-height: 0;
+    /*transition: max-height .5s ease-out;*/
+}
+
+/* Menu Icon */
+#hamb{
+    position: absolute;
+    cursor: pointer;
+    right: 0rem;
+    padding: 2.8rem 2rem;
+    z-index: 9999;
+}/* Style label tag */
+
+#hamb-line {
+    background: black;
+    display: block;
+    height: 2px;
+    position: relative;
+    width: 24px;
+
+} /* Style span tag */
+
+#hamb-line::before,
+#hamb-line::after{
+    background: black;
+    content: '';
+    display: block;
+    height: 100%;
+    position: absolute;
+    transition: all .2s ease-out;
+    width: 100%;
+}
+#hamb-line::before{
+    top: 5px;
+}
+#hamb-line::after{
+    top: -5px;
+}
+
+#side-menu {
+    display: none;
+} /* Hide checkbox */
+
+/* Toggle menu icon */
+#side-menu:checked ~ nav {
+    display: block;
+    max-height: 100%;
+    padding-top: 5.625rem;
+}
+
+#side-menu:checked ~ #logo-container {
+    position: fixed;
+}
+
+#side-menu:checked ~ #hamb {
+    position: fixed;
+}
+
+#side-menu:checked ~ #logo-container {
+    position: fixed;
+}
+
+#side-menu:checked ~ #hamb #hamb-line {
+    background: transparent;
+}
+
+#side-menu:checked ~ #hamb #hamb-line::before {
+    transform: rotate(-45deg);
+    top: 0;
+}
+
+#side-menu:checked ~ #hamb #hamb-line::after {
+    transform: rotate(45deg);
+    top: 0;
+}
+
+/* Options */
+
+.options-dropdown {
+    position: absolute;
+    display: none;
+    top: 5.6rem;
+    right: 1.8rem;
+    border: #404040 solid 0.1rem;
+    background-color: white;
+    z-index: 10;
+}
+
+.options-dropdown button, .options-dropdown a {
+    display: block;
+    font-family: var(--sans-serif,sans-serif);
+    font-size: 1.2rem;
+    width: 100%;
+    padding: 1rem;
+    text-align: left;
+}
+
+.options-dropdown button:hover, .options-dropdown a:hover {
+    background-color: var(--red);
+    color: white;
+}
+
+.options-button {
+    width: 100%;
+    text-align: left;
+}
+
+/* Localization */
+
+#locales {
+    position: relative;
+}
+
+#locales button {
+    width: 100%;
+    text-align: left;
+    height: 4rem;
+}
+
+#locales button:hover {
+    opacity: 0.5;
+}
+
+#locales-img {
+    position: relative;
+    top: 0rem;
+    height: 2rem;
+    margin-left: 1.2rem;
+}
+
+/*
+#options-dropdown>:first-child {
+    padding-bottom: 0.5rem;
+}
+
+#options-dropdown>:nth-child(2) {
+    padding-top: 0.5rem;
+}
+*/
+
+/* Responsiveness */
+@media only screen and (min-width: 1200px) {
+
+    #navbar {
+        position: relative;
+        width: min(100%,116rem);
+        left: 50%;
+        transform: translateX(-50%);
+        padding-right: 4rem;
+        padding-left: 4rem;
+    }
+
+    #nav {
+        max-height: none;
+        top: 0;
+        position: relative;
+        float: right;
+        width: fit-content;
+        background-color: transparent;
+        overflow: visible;
+    }
+
+    #side-menu:checked ~ nav {
+        padding-top: 0;
+    }
+
+    #menu li {
+        float: left;
+    }
+
+    #menu > li > a:hover, .options-button:hover, #navbar-logo-text:hover {
+        color: rgb(127, 127, 127);
+    }
+
+    #menu > li > a, .options-button {
+        padding: 0.9rem;
+        padding-top: 1.9rem;
+        padding-bottom: 1.9rem;
+    }
+
+    #hamb {
+        display: none;
+    }
+
+    #locales {
+        position: relative;
+        margin-right: 1.8rem;
+    }
+
+    #locales-img {
+        top: 0.9rem;
+    }
+}

Server/app/svelte/public/js/libraries/authTools.js

@@ -1,12 +1,15 @@
 
 import {getData, sendData} from "/js/libraries/serverTools.js"
 
-export function getUser(user,callbackOuter) {
+export function getUser(user,loaded,callbackOuter) {
     let callback = function(response) {
         Object.assign(user,JSON.parse(response))
         if(callbackOuter!=undefined) {
             callbackOuter()
         }
+        loaded.update((val) => {
+            return val + 1
+        })
     }
     getData("/xx/get-user",callback)
 }

Server/app/svelte/public/js/libraries/mapTools.js

@@ -10,7 +10,7 @@ export function translate(content, x) {
     }
 }
 
-function addMarkersToLayer(g,layer,content,locale,addPinContent,markerColor) {
+function addMarkersToLayer(g,layer,content,locale,addPinContent,markerColor,options) {
     let {text,coordinates} = addPinContent(g,content,locale)
     var markerIcon = new L.Icon({
         iconUrl: 'https://www.libsoc.org/img/common/markers/marker-' + markerColor + '.png',
@@ -21,57 +21,69 @@ function addMarkersToLayer(g,layer,content,locale,addPinContent,markerColor) {
         shadowSize: [41, 41]
     })
     let marker = L.marker(coordinates, {icon: markerIcon})
+    marker.id = g.id
+    marker.members = g.members
+    marker.contact = g.contact
     marker.addTo(layer).bindPopup(text)
+    
+    if (options.pinCallback!=undefined) {
+        marker.on('click', (event) => options.pinCallback(marker,event))
+    }
 }
 
-export function addMarkersEntries(entries,entriesByCountry,map,content,locale,addPinContent,markerColor) {
+export function addMarkersEntries(entries,entriesByCountry,map,content,locale,addPinContent,markerColor,options) {
     let entriesMarkersLayer = L.layerGroup()
     let entriesMarkersLayerOut = L.layerGroup()
     let entriesMarkersLayerIn = L.layerGroup()
     for (let g of entries) {
         if (g.country!="Online" && g.country!="Worldwide") {
-            addMarkersToLayer(g,entriesMarkersLayerIn,content,locale,addPinContent,markerColor)
+            addMarkersToLayer(g,entriesMarkersLayerIn,content,locale,addPinContent,markerColor,options)
         }
     }
-    for (let gs of Object.values(entriesByCountry)) {
-        if (gs.length==1) {
-            let g = {...gs[0]}
-            g.country = [g.country]
-            if (g.country!="Online" && g.country!="Worldwide") {
-                addMarkersToLayer(g,entriesMarkersLayerOut,content,locale,addPinContent,markerColor)
+    if (options.enableCountryGrouping) {
+        for (let gs of Object.values(entriesByCountry)) {
+            if (gs.length==1) {
+                let g = {...gs[0]}
+                g.country = [g.country]
+                if (g.country!="Online" && g.country!="Worldwide") {
+                    addMarkersToLayer(g,entriesMarkersLayerOut,content,locale,addPinContent,markerColor,options)
+                }
             }
-        }
-        else {
-            if (gs[0].country!="Online" && gs[0].country!="Worldwide") {
-                let locationName = gs[0].country
-                let locationCoordinates = [0,0]
-                let members = 0
-                let contact = gs[0].contact
-                for (let g of gs) {
-                    locationCoordinates[0] += g.latitude
-                    locationCoordinates[1] += g.longitude
-                    members += g.members
-                    if (g.contact[0]!=gs[0].contact[0]) {
-                        contact = contactGeneral
+            else {
+                if (gs[0].country!="Online" && gs[0].country!="Worldwide") {
+                    let locationName = gs[0].country
+                    let locationCoordinates = [0,0]
+                    let members = 0
+                    let contact = gs[0].contact
+                    for (let g of gs) {
+                        locationCoordinates[0] += g.latitude
+                        locationCoordinates[1] += g.longitude
+                        members += g.members
+                        if (g.contact[0]!=gs[0].contact[0]) {
+                            contact = contactGeneral
+                        }
                     }
+                    locationCoordinates[0] = locationCoordinates[0]/gs.length
+                    locationCoordinates[1] = locationCoordinates[1]/gs.length
+                    let gNew = {
+                        country: locationName,
+                        latitude: locationCoordinates[0],
+                        longitude: locationCoordinates[1],
+                        members: members,
+                        contact: contact
+                    }
+                    addMarkersToLayer(gNew,entriesMarkersLayerOut,content,locale,addPinContent,markerColor,options)
                 }
-                locationCoordinates[0] = locationCoordinates[0]/gs.length
-                locationCoordinates[1] = locationCoordinates[1]/gs.length
-                let gNew = {
-                    country: locationName,
-                    latitude: locationCoordinates[0],
-                    longitude: locationCoordinates[1],
-                    members: members,
-                    contact: contact
-                }
-                addMarkersToLayer(gNew,entriesMarkersLayerOut,content,locale,addPinContent,markerColor)
             }
         }
+        entriesMarkersLayerOut.addTo(entriesMarkersLayer)
+        map.on("zoomend", () => onZoomEnd(map,entriesMarkersLayer,entriesMarkersLayerOut,entriesMarkersLayerIn))
+    }
+    else {
+        entriesMarkersLayerIn.addTo(entriesMarkersLayer)
     }
-
-    entriesMarkersLayerOut.addTo(entriesMarkersLayer)
     entriesMarkersLayer.addTo(map)
-    map.on("zoomend", () => onZoomEnd(map,entriesMarkersLayer,entriesMarkersLayerOut,entriesMarkersLayerIn))
+    
     return entriesMarkersLayer
 }