Custom Theming Support

.gitignore

@@ -125,3 +125,7 @@ static/locales/*
 
 # No docker-compose.yml files
 docker-compose.yml
+
+static/css/themes/*
+!static/css/themes/default.css
+!static/css/themes/*.css.example

src/index.js

@@ -18,8 +18,6 @@ const discordRoutes = require('./routes/discord.js');
 const uiRoutes = require('./routes/ui.js');
 const { sessionStore, isValidSession, clearOtherSessions } = require('./services/session-store.js');
 
-// TODO: Check sessions table and parse json
-
 const RateLimitTime = config.ratelimit.time * 60 * 1000;
 const MaxRequestsPerHour = config.ratelimit.requests * (RateLimitTime / 1000);
 

src/routes/ui.js

@@ -82,6 +82,9 @@ const handlePage = async (req, res) => {
     await updateAvailableForms(config.icons);
     data.available_icon_styles_json = JSON.stringify(config.icons);
 
+    const themes = await getAvailableThemes();
+    data.available_themes_json = JSON.stringify(themes);
+
     // Build available items list
     const availableItems = [-1, -2, -3, -4, -5, -6, -7, -8];
     //const keys = Object.keys(InventoryItemId);
@@ -92,11 +95,7 @@ const handlePage = async (req, res) => {
     data.available_items_json = JSON.stringify(availableItems);    
 
     // Build available areas list
-    const areas = [];
-    const areaKeys = Object.keys(config.areas).sort();
-    areaKeys.forEach(key => {
-        areas.push({ 'area': key });
-    });
+    const areas = Object.keys(config.areas).sort().map(x => { return { 'area': x }; });
     data.areas = areas;
 
     // Available raid boss filters
@@ -164,8 +163,8 @@ const handlePage = async (req, res) => {
     }
 
     if (city) {
-        for (let i = 0; i < areaKeys.length; i++) {
-            const key = areaKeys[i];
+        for (let i = 0; i < areas.length; i++) {
+            const key = areas[i];
             if (city.toLowerCase() === key.toLowerCase()) {
                 const area = config.areas[key];
                 lat = parseFloat(area.lat);
@@ -215,6 +214,24 @@ const getAvailableTileservers = () => {
     return tileservers;
 };
 
+const getAvailableThemes = async () => {
+    const themes = {};
+    const themesDir = path.resolve(__dirname, '../../static/css/themes');
+    const files = await fs.promises.readdir(themesDir);
+    if (files) {
+        files.forEach(file => {
+            const ext = path.extname(file);
+            if (ext !== '.css') {
+                return;
+            }
+            let name = path.basename(file, ext);
+            name = name.charAt(0).toUpperCase() + name.slice(1);
+            themes[name] = `/css/themes/${file}`;
+        });
+    }
+    return themes;
+};
+
 const updateAvailableForms = async (icons) => {
     for (const icon of Object.values(icons)) {
         if (icon.path.startsWith('/')) {

src/views/header.mustache

@@ -19,6 +19,7 @@
     <link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/L.Control.Locate.min.css" />
     <link rel="stylesheet" type="text/css" href="/css/all.css" />
+    <link rel="stylesheet" type="text/css" href="/css/themes/default.css" class="theme-css" />
 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

src/views/index.mustache

@@ -43,6 +43,7 @@
         const availableItems = JSON.parse('{{{available_items_json}}}');
         const availableTileservers = JSON.parse(`{{{available_tileservers_json}}}`);
         const availableIconStyles = JSON.parse('{{{available_icon_styles_json}}}');
+        const availableThemes = JSON.parse('{{{available_themes_json}}}');
         const availableRaidBosses = JSON.parse('{{{available_raid_bosses_json}}}');
         const availableQuestRewards = JSON.parse('{{{available_quest_rewards_json}}}');
         const availableNestPokemon = JSON.parse('{{{available_nest_pokemon_json}}}');
@@ -762,7 +763,7 @@
                 </div>
                 <div class="modal-footer">
                     <div class="mr-auto">
-                        <div class="btn-group">
+                        <div class="form-group">
                             <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#mapstyleModal">{{filter_mapstyle}}</button>
                             &nbsp;
                             <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#iconstyleModal">{{filter_iconstyle}}</button>
@@ -777,6 +778,10 @@
                                 </div>
                             </div>
                         </div>
+                        <div class="form-group">
+                            Theme
+                            <select class="form-control" id="select-theme" required></select>
+                        </div>
                     </div>
                     <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">{{filter_cancel}}</button>
                     <button type="button" id="saveSettings" class="btn btn-sm btn-primary">{{filter_save}}</button>
@@ -844,4 +849,4 @@
         </div>
     </div>
 
-{{> footer}}
+{{> footer}}

src/views/navbar.mustache

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+<nav class="navbar navbar-expand-lg fixed-top">
     <div class="navbar-header">
         <a class="navbar-brand" href="/"><img class="align-middle" src="/custom/{{favicon}}" border="0" height="32px"></a>
         <a class="navbar-brand" href="/">{{title}}</a>        
@@ -7,11 +7,11 @@
         <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbar">
-        <i class="fas fa-city"></i>
         <ul class="navbar-nav mr-auto">
         {{#show_areas}}
             <li class="nav-item dropdown">
                 <a class="nav-link dropdown-toggle" href="#" id="areasDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <i class="fas fa-city"></i>
                     {{nav_areas}}{{#page_is_areas}}<span class="sr-only">(current)</span>{{/page_is_areas}}
                 </a>
                 <div class="dropdown-menu scrollable-menu" aria-labelledby="areasDropdown">

static/css/index.css

@@ -120,11 +120,6 @@ fieldset[disabled] .btn-on.active {
     background-color: #C86464;
 }
 
-.btn-off:active,
-.btn-off.active,
-.open .dropdown-toggle.btn-off {
-}
-
 .btn-off.disabled,
 .btn-off[disabled],
 fieldset[disabled] .btn-off,
@@ -167,10 +162,6 @@ fieldset[disabled] .btn-off.active {
     background-color: #6464C8;
 }
 
-.btn-size:active,
-.btn-size.active,
-.open .dropdown-toggle.btn-size {
-}
 
 .btn-size.disabled,
 .btn-size[disabled],
@@ -638,6 +629,7 @@ img {
   pointer-events: none;
 }
 
+/*
 .theme-dark #settingsModal,
 .theme-dark #filtersModal,
 .theme-dark #searchModal,
@@ -664,3 +656,4 @@ img {
 .theme-dark div.DTS div.dataTables_scrollBody {
     background: repeating-linear-gradient(45deg, #33361f, #33361f 10px, #21251f 10px, #21251f 20px);
 }
+*/

static/css/themes/blue.css.example

@@ -0,0 +1,132 @@
+/* Popup marker content colors */
+.leaflet-popup-content-wrapper {
+    background-color: rgb(33, 37, 31);
+    color: lightgray;
+}
+
+/* Navbar colors */
+nav.navbar { 
+    background-color: dodgerblue;
+    color: black;
+}
+
+/* Navbar item colors */
+.nav-item > a { 
+    background-color: dodgerblue;
+    color: black;
+}
+
+/* Navbar title colors */
+a.navbar-brand {
+    background-color: dodgerblue;
+    color: white;
+}
+
+/* Filter/Configure button colors */
+.btn-sm.btn-primary,
+.btn-sm.btn-primary.disabled {
+    background-color: dodgerblue;
+}
+
+/* Cancel button colors */
+.btn-sm.btn-secondary {
+    background-color: gray;
+}
+
+/* Filter hide and off button colors */
+.btn-sm.btn-off,
+.btn-sm.btn-off .active {
+    background-color: gray;
+    color: white;
+}
+
+/* Filter show and on buttons not selected colors */
+.btn-sm.btn-on {
+    background-color: gray;
+    color: white;
+}
+
+/* Filter show and on buttons selected colors */
+.btn-sm.btn-on.active {
+    background-color: #00AF00;
+    color: white;
+}
+
+/* Filter sizing buttons (M/XL) - Selected */
+.btn-size.active.select-button {
+    background-color: #0000AF;
+}
+
+/* Filter sizing buttons (M/XL) - Not Selected */
+.btn-size.select-button {
+    background-color: gray;
+}
+
+/* Save/OK/Close button colors */
+.btn-danger {
+    background-color: #DC3545;
+}
+
+/* Modal header colors */
+.modal > .modal-dialog > .modal-content > .modal-header {
+    background-color: rgb(33, 37, 31);
+    color: white;
+}
+
+/* Modal table columns */
+th {
+    background-color: dodgerblue;
+}
+
+/* Modal body/content colors */
+.modal-body, .modal-content {
+    background-color: rgb(33, 37, 31);
+    color: white;
+}
+
+/* Modal footer colors */
+.modal-footer {
+    background-color: rgb(33, 37, 31);
+    color: white;
+}
+
+/* Odd numbered row in a table */
+.table-dark.table-striped tbody tr:nth-of-type(odd) {
+    background-color: rgb(34, 34, 34);
+    color: white;
+}
+
+/* Even numbered row in a table */
+.table-dark.table-striped tbody tr:nth-of-type(even) {
+    background-color: rgb(33, 37, 41);
+    color: white;
+}
+
+/* Group header colors */
+table.dataTable tr.dtrg-group td {
+    background-color: rgb(33, 37, 41);
+    color: white;
+}
+
+/* Close button (x) colors */
+button.close {
+    background-color: rgb(33, 37, 31);
+    color: white;
+}
+
+/* Button control colors */
+.leaflet-control > a {
+    background-color: seashell;
+    color: black;
+}
+
+/* Button control hover colors */
+.leaflet-control > a:hover {
+    background-color: rgb(202, 202, 202);
+    color: black;
+}
+
+/* Empty space in filters */
+div.DTS div.dataTables_scrollBody {
+    background: repeating-linear-gradient(45deg, #33361f, #33361f 10px, #21251f 10px, #21251f 20px);
+}