Add leaflet map to load server areas for users to select from

.gitignore

@@ -120,4 +120,9 @@ static/locales/*.json
 
 static/favicons/*.png
 static/favicons/*.icon
-!static/favicons/default.png
+!static/favicons/default.png
+
+static/data/*
+!static/data/server_id1.example.json
+!static/data/server_id2.example.json
+!static/data/rarity.json

src/config.example.json

@@ -65,6 +65,14 @@
         { "name": "Default" },
         { "name": "Shuffle" }
     ],
+    "map": {
+        "startLat": 4,
+        "startLon": -100,
+        "startZoom": 10,
+        "minZoom": 8,
+        "maxZoom": 18,
+        "tileserver": "https://{s}.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}{r}.png;Map tiles by Carto, under CC BY 3.0. Data by  <a href='https://www.openstreetmap.org/'>OpenStreetMap</a>, under ODbL."
+    },
     "urls": {
         "images": {
             "pokemon": "https://mygod.github.io/pokicons/v2"

src/data/default.js

@@ -22,5 +22,12 @@ data.leagues = [
 data.icon_styles = config.iconStyles;
 data.enable_geofence_roles = config.enableGeofenceRoles;
 data.hide_phone_number = config.hidePhoneNumber;
+// Leaflet map properties
+data.start_lat = config.map.startLat;
+data.start_lon = config.map.startLon;
+data.start_zoom = config.map.startZoom;
+data.min_zoom = config.map.minZoom;
+data.max_zoom = config.map.maxZoom;
+data.tileserver = config.map.tileserver;
 
 module.exports = data;

src/routes/api.js

@@ -283,7 +283,7 @@ router.post('/pokemon/new', async (req, res) => {
         city
     } = req.body;
     const user_id = req.session.user_id;
-    const areas = getAreas(guild_id, city);
+    const areas = getAreas(guild_id, (city || '').split(','));
     const subscription = await Subscription.getSubscription(guild_id, user_id);
     if (!subscription) {
         showError(res, 'pokemon-new', `Failed to get user subscription for GuildId: ${guild_id} and UserId: ${user_id}`);
@@ -346,7 +346,7 @@ router.post('/pokemon/edit/:id', async (req, res) => {
     } = req.body;
     //const user_id = req.session.user_id;
     const pkmn = await Pokemon.getById(id);
-    const areas = getAreas(guild_id, city);
+    const areas = getAreas(guild_id, (city || '').split(','));
     if (pkmn) {
         const ivList = iv_list ? iv_list.replace('\r', '').split('\n') : [];
         //pkmn.pokemonId = pokemon;
@@ -428,7 +428,7 @@ router.post('/pvp/new', async (req, res) => {
         showError(res, 'pvp-new', `Failed to get user subscription for GuildId: ${guild_id} and UserId: ${user_id}`);
         return;
     }
-    const areas = getAreas(guild_id, city);
+    const areas = getAreas(guild_id, (city || '').split(','));
     const sql = [];
     const split = pokemon.split(',');
     for (const pokemonId of split) {
@@ -472,7 +472,7 @@ router.post('/pvp/edit/:id', async (req, res) => {
     //const user_id = req.session.user_id;
     const exists = await PVP.getById(id);
     if (exists) {
-        const areas = getAreas(guild_id, city);
+        const areas = getAreas(guild_id, (city || '').split(','));
         exists.form = form;
         exists.league = league;
         exists.minRank = min_rank || 25;
@@ -539,7 +539,7 @@ router.post('/raids/new', async (req, res) => {
         showError(res, 'raid-new', `Failed to get user subscription ID for GuildId: ${guild_id} and UserId: ${user_id}`);
         return;
     }
-    const areas = getAreas(guild_id, city);
+    const areas = getAreas(guild_id, (city || '').split(','));
     let sql = [];
     const split = pokemon.split(',');
     for (const pokemonId of split) {
@@ -569,7 +569,7 @@ router.post('/raids/edit/:id', async (req, res) => {
     //const user_id = req.session.user_id;
     const exists = await Raid.getById(id);
     if (exists) {
-        const areas = getAreas(guild_id, city);
+        const areas = getAreas(guild_id, (city || '').split(','));
         exists.form = form;
         exists.city = areas;
         const result = await exists.save();
@@ -740,7 +740,7 @@ router.post('/quests/new', async (req, res) => {
         showError(res, 'quest-new', `Failed to get user subscription ID for GuildId: ${guild_id} and UserId: ${user_id}`);
         return;
     }
-    const areas = getAreas(guild_id, city);
+    const areas = getAreas(guild_id, (city || '').split(','));
     let exists = await Quest.getByReward(guild_id, user_id, reward);
     if (exists) {
         // Already exists
@@ -772,7 +772,7 @@ router.post('/quests/edit/:id', async (req, res) => {
     //const user_id = req.session.user_id;
     const quest = await Quest.getById(id);
     if (quest) {
-        const areas = getAreas(guild_id, city);
+        const areas = getAreas(guild_id, (city || '').split(','));
         quest.city = areas;
         const result = await quest.save();
         if (result) {
@@ -835,7 +835,7 @@ router.post('/invasions/new', async (req, res) => {
         showError(res, 'invasions', `Failed to get user subscription ID for GuildId: ${guild_id} user: ${user_id}`);
         return;
     }
-    const areas = getAreas(guild_id, city);
+    const areas = getAreas(guild_id, (city || '').split(','));
     const split = pokemon.split(',');
     for (let i = 0; i < split.length; i++) {
         const pokemonId = split[i];
@@ -871,7 +871,7 @@ router.post('/invasions/edit/:id', async (req, res) => {
     //const user_id = req.session.user_id;
     const invasion = await Invasion.getById(id);
     if (invasion) {
-        const areas = getAreas(guild_id, city);
+        const areas = getAreas(guild_id, (city || '').split(','));
         invasion.city = areas;
         const result = invasion.save();
         if (result) {
@@ -936,7 +936,7 @@ router.post('/lures/new', async (req, res) => {
     if (!Array.isArray(lureTypes)) {
         lureTypes = [lureTypes];
     }
-    const areas = getAreas(guild_id, city);
+    const areas = getAreas(guild_id, (city || '').split(','));
     //const split = lureTypes.split(',');
     for (let i = 0; i < lureTypes.length; i++) {
         const lureType = lureTypes[i];
@@ -972,7 +972,7 @@ router.post('/lures/edit/:id', async (req, res) => {
     //const user_id = defaultData.user_id;
     const lure = await Lure.getById(id);
     if (lure) {
-        const areas = getAreas(guild_id, city);
+        const areas = getAreas(guild_id, (city || '').split(','));
         lure.city = areas;
         const result = lure.save();
         if (result) {

src/routes/ui.js

@@ -75,15 +75,15 @@ router.get('/pokemon/edit/:id', async (req, res) => {
     data.genders.forEach(gender => {
         data.selected = gender.id === pokemon.gender;
     });
-    const areas = pokemon.city.map(x => x.toLowerCase());
-    data.cities = getSelectedAreas(
+    const cities = getSelectedAreas(
         // Current guild
         pokemon.guildId,
         // Currently subscribed areas list
-        areas,
+        pokemon.city.map(x => x.toLowerCase()),
         // All areas list
         map.buildCityList(req.session.guilds)
     );
+    data.cities = JSON.stringify(cities.filter(x => x.selected).map(y => y.name));
     res.render('pokemon-edit', data);
 });
 
@@ -130,14 +130,15 @@ router.get('/pvp/edit/:id', async (req, res) => {
     });
     data.min_rank = pvp.minRank;
     data.min_percent = pvp.minPercent;
-    data.cities = getSelectedAreas(
+    const cities = getSelectedAreas(
         // Current guild
         pvp.guildId,
         // Currently subscribed areas list
         pvp.city.map(x => x.toLowerCase()),
         // All areas list
         map.buildCityList(req.session.guilds)
     );
+    data.cities = JSON.stringify(cities.filter(x => x.selected).map(y => y.name));
     res.render('pvp-edit', data);
 });
 
@@ -185,14 +186,15 @@ router.get('/raid/edit/:id', async (req, res) => {
         pkmn.selected = parseInt(pkmn.id) === raid.pokemonId;
     });
     data.form = raid.form;
-    data.cities = getSelectedAreas(
+    const cities = getSelectedAreas(
         // Current guild
         raid.guildId,
         // Currently subscribed areas list
         raid.city.map(x => x.toLowerCase()),
         // All areas list
         map.buildCityList(req.session.guilds)
     );
+    data.cities = JSON.stringify(cities.filter(x => x.selected).map(y => y.name));
     res.render('raid-edit', data);
 });
 
@@ -285,14 +287,15 @@ router.get('/quest/edit/:id', async (req, res) => {
         return;
     }
     data.reward = quest.reward;
-    data.cities = getSelectedAreas(
+    const cities = getSelectedAreas(
         // Current guild
         quest.guildId,
         // Currently subscribed areas list
         quest.city.map(x => x.toLowerCase()),
         // All areas list
         map.buildCityList(req.session.guilds)
     );
+    data.cities = JSON.stringify(cities.filter(x => x.selected).map(y => y.name));
     res.render('quest-edit', data);
 });
 
@@ -339,14 +342,15 @@ router.get('/invasion/edit/:id', async (req, res) => {
     data.rewards.forEach(reward => {
         reward.selected = reward.id === invasion.rewardPokemonId;
     });
-    data.cities = getSelectedAreas(
+    const cities = getSelectedAreas(
         // Current guild
         invasion.guildId,
         // Currently subscribed areas list
         invasion.city.map(x => x.toLowerCase()),
         // All areas list
         map.buildCityList(req.session.guilds)
     );
+    data.cities = JSON.stringify(cities.filter(x => x.selected).map(y => y.name));
     res.render('invasion-edit', data);
 });
 
@@ -393,11 +397,15 @@ router.get('/lure/edit/:id', async (req, res) => {
     data.lureTypes.forEach(lureType => {
         lureType.selected = lureType === lure.lureType;
     });
-    data.cities = map.buildCityList(req.session.guilds);
-    const areas = lure.city.map(x => x.toLowerCase());
-    data.cities.forEach(city => {
-        city.selected = areas.includes(city.name.toLowerCase());
-    });
+    const cities = getSelectedAreas(
+        // Current guild
+        lure.guildId,
+        // Currently subscribed areas list
+        lure.city.map(x => x.toLowerCase()),
+        // All areas list
+        map.buildCityList(req.session.guilds)
+    );
+    data.cities = JSON.stringify(cities.filter(x => x.selected).map(y => y.name));
     res.render('lure-edit', data);
 });
 

src/views/header.mustache

@@ -7,6 +7,7 @@
 
     <link rel='shortcut icon' type='image/x-icon' href='./static/favicon.ico' />
     <link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css' integrity='sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=' crossorigin='anonymous' />
+    <link rel='stylesheet' type='text/css' href='https://unpkg.com/[email protected]/dist/leaflet.css' integrity='sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==' crossorigin='' />
     <link rel='stylesheet' type='text/css' href='https://cdn.datatables.net/v/bs4/dt-1.10.20/b-1.6.1/cr-1.5.2/fh-3.1.6/r-2.2.3/sc-2.0.1/datatables.min.css' />
     <link rel='stylesheet' type='text/css' href='https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css' />
     <link rel='stylesheet' type='text/css' href='../../css/font-awesome.min.css' />
@@ -17,10 +18,11 @@
     <script type='text/javascript' src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
     <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js' integrity='sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49' crossorigin='anonymous'></script>
     <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js' integrity='sha256-VsEqElsCHSGmnmHXGQzvoWjWwoznFSZc6hs7ARLRacQ=' crossorigin='anonymous'></script>
+    <!--<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js' integrity='sha256-tfcLorv/GWSrbbsn6NVgflWp1YOmTjyJ8HWtfXaOaJc=' crossorigin='anonymous'></script>-->
     <script type='text/javascript' src='https://cdn.datatables.net/v/bs4/dt-1.10.20/b-1.6.1/cr-1.5.2/fh-3.1.6/r-2.2.3/sc-2.0.1/datatables.min.js'></script>
     <script type='text/javascript' src='https://cdn.datatables.net/buttons/1.6.1/js/buttons.colVis.min.js'></script>
     <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/flatpickr'></script>
-    <script type='text/javascript' src='https://unpkg.com/leaflet@1.6.0/dist/leaflet.js' integrity='sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==' crossorigin=''></script>
+    <script type='text/javascript' src='https://unpkg.com/leaflet@1.7.1/dist/leaflet.js' integrity='sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==' crossorigin=''></script>
     <script type='text/javascript' src='../../js/storage.js'></script>
     <script type='text/javascript' src='../../js/utils.js'></script>
     {{#analytics}}

src/views/invasion-edit.mustache

@@ -14,13 +14,11 @@
     <form action="/api/invasions/edit/{{id}}" method="post">
         <div class="form-group">
             {{City}}
-            <select name="city" class="custom-select" multiple required>
-                <option value="None">{{None}}</option>
-                <option value="All">{{All}}</option>
-                {{#cities}}
-                <option value="{{name}}" id="g_{{guild}}" {{#selected}}selected{{/selected}} hidden>{{name}}</option>
-                {{/cities}}
-            </select>
+            <br>
+            <input type="hidden" id="city" name="city" />
+            <button id="geofences-select-all" type="button" class="btn btn-primary btn-sm" onclick="selectGeofences(true)">{{Select All}}</button>
+            <button id="geofences-select-none" type="button" class="btn btn-primary btn-sm" onclick="selectGeofences(false)">{{Select None}}</button>
+            <div id="map" style="height: 500px;"></div>
         </div>
         <br>
         <input type="hidden" id="guild_id" name="guild_id" required>
@@ -32,6 +30,7 @@
     </form>
 </div>
 
+<script type='text/javascript' src="/js/city-map.js"></script>
 <script>
     if (!guildId) {
         window.location.href = '/';
@@ -42,4 +41,5 @@
         guilds.forEach(guild => guild.hidden = false);
     }
     $('#server_selector').prop('disabled', true);
+    initMap([{{start_lat}}, {{start_lon}}], {{start_zoom}}, {{min_zoom}}, {{max_zoom}}, "{{{tileserver}}}", {{{cities}}});
 </script>

src/views/invasion-new.mustache

@@ -41,13 +41,11 @@
         </div>
         <div class="form-group">
             {{City}}
-            <select name="city" class="custom-select" multiple required>
-                <option value="None" selected>{{None}}</option>
-                <option value="All">{{All}}</option>
-                {{#cities}}
-                <option value="{{name}}" id="g_{{guild}}" hidden>{{name}}</option>
-                {{/cities}}
-            </select>
+            <br>
+            <input type="hidden" id="city" name="city" />
+            <button id="geofences-select-all" type="button" class="btn btn-primary btn-sm" onclick="selectGeofences(true)">{{Select All}}</button>
+            <button id="geofences-select-none" type="button" class="btn btn-primary btn-sm" onclick="selectGeofences(false)">{{Select None}}</button>
+            <div id="map" style="height: 500px;"></div>
         </div>
         <br>
         <input type="hidden" id="guild_id" name="guild_id" required>
@@ -56,6 +54,7 @@
     </form>
 </div>
 
+<script type='text/javascript' src="/js/city-map.js"></script>
 <script type='text/javascript' src="/js/pokemon-list.js"></script>
 <script type='text/javascript'>
     if (!guildId) {
@@ -67,4 +66,5 @@
         guilds.forEach(guild => guild.hidden = false);
     }
     $('#server_selector').prop('disabled', true);
+    initMap([{{start_lat}}, {{start_lon}}], {{start_zoom}}, {{min_zoom}}, {{max_zoom}}, "{{{tileserver}}}");
 </script>

src/views/lure-edit.mustache

@@ -14,13 +14,11 @@
     <form action="/api/lures/edit/{{id}}" method="post">
         <div class="form-group">
             {{City}}
-            <select name="city" class="custom-select" multiple required>
-                <option value="None">{{None}}</option>
-                <option value="All">{{All}}</option>
-                {{#cities}}
-                <option value="{{name}}" id="g_{{guild}}" {{#selected}}selected{{/selected}} hidden>{{name}}</option>
-                {{/cities}}
-            </select>
+            <br>
+            <input type="hidden" id="city" name="city" />
+            <button id="geofences-select-all" type="button" class="btn btn-primary btn-sm" onclick="selectGeofences(true)">{{Select All}}</button>
+            <button id="geofences-select-none" type="button" class="btn btn-primary btn-sm" onclick="selectGeofences(false)">{{Select None}}</button>
+            <div id="map" style="height: 500px;"></div>
         </div>
         <br>
         <input type="hidden" id="guild_id" name="guild_id">
@@ -32,6 +30,7 @@
     </form>
 </div>
 
+<script type='text/javascript' src="/js/city-map.js"></script>
 <script>
     if (!guildId) {
         window.location.href = '/';
@@ -42,4 +41,5 @@
         guilds.forEach(guild => guild.hidden = false);
     }
     $('#server_selector').prop('disabled', true);
+    initMap([{{start_lat}}, {{start_lon}}], {{start_zoom}}, {{min_zoom}}, {{max_zoom}}, "{{{tileserver}}}", {{{cities}}});
 </script>