🎨🐛 rework room map and fix theme bugs

rogue-thi-app/components/RoomMap.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 
 import Link from 'next/link'
@@ -8,15 +8,21 @@ import Form from 'react-bootstrap/Form'
 
 import { AttributionControl, CircleMarker, FeatureGroup, LayerGroup, LayersControl, MapContainer, Polygon, Popup, TileLayer } from 'react-leaflet'
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faLinux } from '@fortawesome/free-brands-svg-icons'
+
 import { NoSessionError, UnavailableSessionError } from '../lib/backend/thi-session-handler'
+import { TUX_ROOMS, filterRooms, getNextValidDate, getTranslatedRoomFunction } from '../lib/backend-utils/rooms-utils'
 import { USER_GUEST, useUserKind } from '../lib/hooks/user-kind'
-import { filterRooms, getNextValidDate, getTranslatedRoomFunction } from '../lib/backend-utils/rooms-utils'
 import { formatFriendlyTime, formatISODate, formatISOTime } from '../lib/date-utils'
 import { useLocation } from '../lib/hooks/geolocation'
 
+import { ThemeContext } from '../pages/_app'
 import styles from '../styles/RoomMap.module.css'
 import { useTranslation } from 'next-i18next'
 
+import themes from '../data/themes.json'
+
 const SPECIAL_ROOMS = {
   G308: { text: 'Linux PC-Pool', color: '#F5BD0C' }
 }
@@ -58,6 +64,18 @@ export default function RoomMap ({ highlight, roomData }) {
 
   const { t, i18n } = useTranslation(['rooms', 'api-translations'])
 
+  const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+  const [theme] = useContext(ThemeContext)
+
+  function isDark () {
+    const themeSettings = themes.filter(item => item.style === theme)[0].mapTheme ?? 'system'
+    if (themeSettings === 'system') {
+      return systemDark
+    } else {
+      return themeSettings === 'dark'
+    }
+  }
+
   /**
    * Preprocessed room data for Leaflet.
    */
@@ -181,32 +199,40 @@ export default function RoomMap ({ highlight, roomData }) {
 
     return (
       <FeatureGroup key={key}>
-        <Popup>
+        <Popup className={styles.popup}>
           <strong>
             {entry.properties.Raum}
           </strong>
-          {`, ${getTranslatedRoomFunction(entry?.properties?.Funktion, i18n)}`} <br />
+          {`, ${getTranslatedRoomFunction(entry?.properties?.Funktion, i18n)}`}
           {avail && (
             <>
+              <br />
               {t('rooms.map.freeFromUntil', {
                 from: formatFriendlyTime(avail.from),
                 until: formatFriendlyTime(avail.until)
               })}
-              <br />
             </>
           )}
           {!avail && availableRooms && (
             <>
+              <br />
               {t('rooms.map.occupied')}
             </>
           )}
-          {special?.text}
+          {special && (
+            <>
+              <br />
+              {special.text}
+              {TUX_ROOMS.includes(entry.properties.Raum) && <> <FontAwesomeIcon title="Linux" icon={faLinux} fontSize={12}/></>}
+            </>
+          )}
         </Popup>
         <Polygon
           positions={entry.coordinates}
           pathOptions={{
             ...entry.options,
-            className: special ? special.color : (avail ? styles.roomAvailable : styles.roomOccupied)
+            color: special && avail ? special.color : null,
+            className: `${avail ? (!special ? styles.roomAvailable : '') : styles.roomOccupied}`
           }}
         />
       </FeatureGroup>
@@ -275,7 +301,7 @@ export default function RoomMap ({ highlight, roomData }) {
       >
         <TileLayer
           attribution={t('rooms.map.attribution')}
-          url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
+          url={`https://tiles-eu.stadiamaps.com/tiles/alidade_smooth${isDark() ? '_dark' : ''}/{z}/{x}/{y}{r}.png`}
           maxNativeZoom={19}
           maxZoom={21}
         />
@@ -322,7 +348,6 @@ export default function RoomMap ({ highlight, roomData }) {
             center={[location.latitude, location.longitude]}
             fillOpacity={1.0}
             color='#ffffff'
-            fillColor='rgb(51, 136, 255)'
             radius={8}
             weight={3}
             className={styles.locationMarker}

rogue-thi-app/data/themes.json

@@ -1,11 +1,11 @@
 [
-    { "name": { "en": "Automatic", "de": "Automatisch" }, "style": "default" },
-    { "name": { "en": "Light", "de": "Hell" }, "style": "light" },
-    { "name": { "en": "THI Light", "de": "THI Hell" }, "style": "thi-light" },
-    { "name": { "en": "Dark", "de": "Dunkel" }, "style": "dark" },
-    { "name": { "en": "Barbie & Ken", "de": "Barbie & Ken" }, "style": "barbie" },
-    { "name": { "en": "Retro", "de": "Retro" }, "style": "retro" },
-    { "name": { "en": "Windows 95", "de": "Windows 95" }, "style": "95" },
-    { "name": { "en": "Pride", "de": "Pride" }, "style": "pride" },
-    { "name": { "en": "Hackerman", "de": "Hackerman" }, "style": "hacker", "requiresToken": true }
+    { "name": { "en": "Automatic", "de": "Automatisch" }, "style": "default", "mapTheme": "system" },
+    { "name": { "en": "Light", "de": "Hell" }, "style": "light", "mapTheme": "light"},
+    { "name": { "en": "THI Light", "de": "THI Hell" }, "style": "thi-light", "mapTheme": "light"},
+    { "name": { "en": "Dark", "de": "Dunkel" }, "style": "dark", "mapTheme": "dark" },
+    { "name": { "en": "Barbie & Ken", "de": "Barbie & Ken" }, "style": "barbie", "mapTheme": "light" },
+    { "name": { "en": "Retro", "de": "Retro" }, "style": "retro", "mapTheme": "dark" },
+    { "name": { "en": "Windows 95", "de": "Windows 95" }, "style": "95", "mapTheme": "light" },
+    { "name": { "en": "Pride", "de": "Pride" }, "style": "pride", "mapTheme": "system" },
+    { "name": { "en": "Hackerman", "de": "Hackerman" }, "style": "hacker", "requiresToken": true, "mapTheme": "dark" }
 ]

rogue-thi-app/lib/backend-utils/rooms-utils.js

@@ -12,6 +12,7 @@ export const BUILDINGS_ALL = 'Alle'
 export const ROOMS_ALL = 'Alle'
 export const DURATION_PRESET = '01:00'
 export const SUGGESTION_DURATION_PRESET = 90
+export const TUX_ROOMS = ['G308']
 
 /**
  * Adds minutes to a date object.

rogue-thi-app/next.config.js

@@ -72,7 +72,7 @@ module.exports = {
           {
             key: 'Content-Security-Policy',
             value: `default-src 'none';
-              img-src 'self' data: https://tile.openstreetmap.org;
+              img-src 'self' data: https://tiles-eu.stadiamaps.com/;
               font-src 'self';
               connect-src 'self' ${PROXY_URL} ${API_URL};
               style-src 'self' 'unsafe-inline';

rogue-thi-app/pages/personal.jsx

@@ -51,7 +51,7 @@ export default function Personal () {
   const [, setShowPersonalDataModal] = useContext(ShowPersonalDataModal)
   const [, setShowThemeModal] = useContext(ShowThemeModal)
   const [, setShowLanguageModal] = useContext(ShowLanguageModal)
-  const theme = useContext(ThemeContext)
+  const [theme] = useContext(ThemeContext)
   const router = useRouter()
   const { t, i18n } = useTranslation('personal')
 
@@ -172,7 +172,7 @@ export default function Personal () {
 
       <ListGroup>
 
-        {themes.filter(item => item.style.includes(theme[0])).map(item => (
+        {themes.filter(item => item.style === theme).map(item => (
           <ListGroup.Item action onClick={() => setShowThemeModal(true)} key={item.style}>
             <div className={styles.interaction_icon}>
               <span className="text-muted">

rogue-thi-app/pages/rooms/list.jsx

@@ -14,7 +14,7 @@ import AppNavbar from '../../components/page/AppNavbar'
 import AppTabbar from '../../components/page/AppTabbar'
 
 import { NoSessionError, UnavailableSessionError } from '../../lib/backend/thi-session-handler'
-import { ROOMS_ALL, getTranslatedRoomName } from '../../lib/backend-utils/rooms-utils'
+import { ROOMS_ALL, TUX_ROOMS, getTranslatedRoomName } from '../../lib/backend-utils/rooms-utils'
 import { formatFriendlyTime, formatNearDate } from '../../lib/date-utils'
 import API from '../../lib/backend/authenticated-api'
 
@@ -23,8 +23,6 @@ import styles from '../../styles/RoomsList.module.css'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { useTranslation } from 'next-i18next'
 
-const TUX_ROOMS = ['G308']
-
 export const getStaticProps = async ({ locale }) => ({
   props: {
     ...(await serverSideTranslations(locale ?? 'en', [

rogue-thi-app/pages/rooms/search.jsx

@@ -15,7 +15,7 @@ import AppContainer from '../../components/page/AppContainer'
 import AppNavbar from '../../components/page/AppNavbar'
 import AppTabbar from '../../components/page/AppTabbar'
 
-import { BUILDINGS, BUILDINGS_ALL, DURATION_PRESET, filterRooms, getNextValidDate, getTranslatedRoomFunction, getTranslatedRoomName } from '../../lib/backend-utils/rooms-utils'
+import { BUILDINGS, BUILDINGS_ALL, DURATION_PRESET, TUX_ROOMS, filterRooms, getNextValidDate, getTranslatedRoomFunction, getTranslatedRoomName } from '../../lib/backend-utils/rooms-utils'
 import { NoSessionError, UnavailableSessionError } from '../../lib/backend/thi-session-handler'
 import { formatFriendlyTime, formatISODate, formatISOTime } from '../../lib/date-utils'
 
@@ -25,7 +25,6 @@ import { Trans, useTranslation } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
 const DURATIONS = ['00:15', '00:30', '00:45', '01:00', '01:15', '01:30', '01:45', '02:00', '02:15', '02:30', '02:45', '03:00', '03:15', '03:30', '03:45', '04:00', '04:15', '04:30', '04:45', '05:00', '05:15', '05:30', '05:45', '06:00']
-const TUX_ROOMS = ['G308']
 
 export const getStaticProps = async ({ locale }) => ({
   props: {

rogue-thi-app/pages/rooms/suggestions.jsx

@@ -23,7 +23,7 @@ import AppTabbar from '../../components/page/AppTabbar'
 import { NoSessionError, UnavailableSessionError } from '../../lib/backend/thi-session-handler'
 import { formatFriendlyTime, isSameDay } from '../../lib/date-utils'
 
-import { SUGGESTION_DURATION_PRESET, findSuggestedRooms, getAllUserBuildings, getEmptySuggestions, getTranslatedRoomFunction, getTranslatedRoomName } from '../../lib/backend-utils/rooms-utils'
+import { SUGGESTION_DURATION_PRESET, TUX_ROOMS, findSuggestedRooms, getAllUserBuildings, getEmptySuggestions, getTranslatedRoomFunction, getTranslatedRoomName } from '../../lib/backend-utils/rooms-utils'
 
 import styles from '../../styles/RoomsSearch.module.css'
 
@@ -34,8 +34,6 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { Trans, useTranslation } from 'next-i18next'
 import { useBuildingFilter } from '../../lib/hooks/building-filter'
 
-const TUX_ROOMS = ['G308']
-
 export const getStaticProps = async ({ locale }) => ({
   props: {
     ...(await serverSideTranslations(locale ?? 'en', [

rogue-thi-app/public/locales/en/rooms.json

@@ -13,7 +13,7 @@
             "automaticSuggestion": "Automatic Suggestions",
             "occupied": "Occupied",
             "freeFromUntil": "Free from {{from}} to {{until}}",
-            "attribution": "&copy; <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors",
+            "attribution": "&copy; <a href=\"https://www.stadiamaps.com/\" target=\"_blank\">Stadia Maps</a> &copy; <a href=\"https://openmaptiles.org/\" target=\"_blank\">OpenMapTiles</a> &copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
             "legend": {
                 "free": "Free",
                 "occupied": "Occupied",

rogue-thi-app/scss/common.scss

@@ -150,12 +150,11 @@ pre {
   --home-card-mobile-border: #{$gray-700};
 
   --rooms-controls-background: #{$body-bg};
-  --rooms-controls-border: #{$gray-700};
+  --rooms-controls-border: #{rgba($gray-700, .1)};
 }
 
 // use our CI color
 $theme-colors: (
   "primary": $primary
 );
 
-@import "../node_modules/bootstrap/scss/bootstrap";

rogue-thi-app/scss/themes/95.scss

@@ -1,5 +1,5 @@
+// stylelint-disable
 $enable-rounded: false;
-// $border-radius: 0;
 
 @import "../../node_modules/bootstrap/scss/bootstrap";
 @import "../../node_modules/win95.css/assets/win95";

rogue-thi-app/scss/themes/barbie.scss

@@ -5,6 +5,7 @@ $body-bg: #FACDE5;
 $body-color: black;
 
 @import "../common.scss";
+@import "../../node_modules/bootstrap/scss/bootstrap";
 
 @font-face {
     font-family: sacramento;

rogue-thi-app/scss/themes/dark.scss

@@ -42,3 +42,4 @@ $light: $gray-300;
 $dark: $gray-800;
 
 @import "../common.scss";
+@import "../../node_modules/bootstrap/scss/bootstrap";

rogue-thi-app/scss/themes/hacker.scss

@@ -5,6 +5,7 @@ $body-bg: #404040BB;
 $body-color: white;
 
 @import "../common.scss";
+@import "../../node_modules/bootstrap/scss/bootstrap";
 
 @font-face {
   font-family: fasterone;