map svg documentation

docs/README.md

@@ -3,3 +3,6 @@
 # Help Documentation
 
 **Thank you for taking the time to read the documentation.**
+
+[**Map Images**](mapImages.md)<br />
+How to create images compatible with the Lot Occupancy System.

docs/mapImages.md

@@ -0,0 +1,43 @@
+[Home](https://cityssm.github.io/lot-occupancy-system/)
+•
+[Help](https://cityssm.github.io/lot-occupancy-system/docs/)
+
+# Map Images
+
+Map images rely on SVG (Scalable Vector Graphics) files.
+
+While many SVG editors exist, we recommend [Inkscape](https://inkscape.org/),
+a free and open source vector graphics editor.
+
+## Structuring the SVG Files
+
+The SVG format has the ability to group together elements using a `<g>` tag,
+and to set an `id` attribute on `<g>` and `<path>` tags.
+These two features are heavilty relied on by the Lot Occupancy System.
+
+![Screenshot of Map Image Structure](images/mapImageStructure.png)
+
+Take the screenshot above.
+
+- The map has two main sections, D and E.
+- Within each section, there are groups 1, 2, and 3.
+- Each group has a north side (N) and a south side (S).
+- Each side has 3 or 6 lots.
+
+The `id` for the top leftmost lot is `E-1-N-1`.
+The `id` for the bottom rightmost lot is `D-3-S-3`.
+
+![Lot Image Configuration](images/mapImageLotConfig.png)
+
+In order to link the lot record in the application to the lot path in the image,
+the `id` attribute of the `<path>` tag should match the Map SVG ID set on the lot record.
+
+Non-exact matching can also be done.  If all lot paths in the SVG image are grouped,
+and those groups have their `id` attributes set, the application will for the first matching
+path or group, removing pieces from the end of the configured Map SVG ID.
+
+For example, if the application comes across a new lot with Map SVG ID `E-1-N-7`,
+there is no exact match.  The application will then look for `E-1-N`,
+which will match a group of six lots.  The six lots will be highlighted
+until the map is revised with the new lot.
+

public-typescript/main.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 break;
             }
             svgId = svgId.slice(0, Math.max(0, svgId.lastIndexOf("-")));
-            console.log(svgId);
         }
         if (svgElementToHighlight) {
             svgElementToHighlight.style.fill = null;

public-typescript/main.ts

@@ -20,11 +20,8 @@ import type * as globalTypes from "../types/globalTypes";
             }
 
             svgId = svgId.slice(0, Math.max(0, svgId.lastIndexOf("-")));
-            console.log(svgId);
         }
 
-
-
         if (svgElementToHighlight) {
 
             // eslint-disable-next-line unicorn/no-null

public/javascripts/main.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const e=e=>{const t=e.currentTarget.closest(".field").querySelector("input, select");if("INPUT"===t.tagName)t.disabled=!1;else{const e=t.querySelectorAll("option");for(const t of e)t.disabled=!1}t.focus()},t={highlightMap:(e,t,s)=>{let o,l=t;for(;!(o=e.querySelector("#"+l))&&l.includes("-");)l=l.slice(0,Math.max(0,l.lastIndexOf("-"))),console.log(l);if(o){o.style.fill=null,o.classList.add("highlight","is-"+s);const e=o.querySelectorAll("path");for(const t of e)t.style.fill=null}},initializeUnlockFieldButtons:t=>{const s=t.querySelectorAll(".is-unlock-field-button");for(const t of s)t.addEventListener("click",e)},populateAliases:e=>{const t=e.querySelectorAll(".alias");for(const e of t)switch(e.dataset.alias){case"Lot":e.textContent=exports.aliases.lot;break;case"lot":e.textContent=exports.aliases.lot.toLowerCase();break;case"Occupancy":e.textContent=exports.aliases.occupancy;break;case"occupancy":e.textContent=exports.aliases.occupancy.toLowerCase();break;case"Occupant":e.textContent=exports.aliases.occupant;break;case"occupant":e.textContent=exports.aliases.occupant.toLowerCase();break;case"ExternalReceiptNumber":e.textContent=exports.aliases.externalReceiptNumber}}};exports.los=t})();
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const e=e=>{const t=e.currentTarget.closest(".field").querySelector("input, select");if("INPUT"===t.tagName)t.disabled=!1;else{const e=t.querySelectorAll("option");for(const t of e)t.disabled=!1}t.focus()},t={highlightMap:(e,t,s)=>{let o,a=t;for(;!(o=e.querySelector("#"+a))&&a.includes("-");)a=a.slice(0,Math.max(0,a.lastIndexOf("-")));if(o){o.style.fill=null,o.classList.add("highlight","is-"+s);const e=o.querySelectorAll("path");for(const t of e)t.style.fill=null}},initializeUnlockFieldButtons:t=>{const s=t.querySelectorAll(".is-unlock-field-button");for(const t of s)t.addEventListener("click",e)},populateAliases:e=>{const t=e.querySelectorAll(".alias");for(const e of t)switch(e.dataset.alias){case"Lot":e.textContent=exports.aliases.lot;break;case"lot":e.textContent=exports.aliases.lot.toLowerCase();break;case"Occupancy":e.textContent=exports.aliases.occupancy;break;case"occupancy":e.textContent=exports.aliases.occupancy.toLowerCase();break;case"Occupant":e.textContent=exports.aliases.occupant;break;case"occupant":e.textContent=exports.aliases.occupant.toLowerCase();break;case"ExternalReceiptNumber":e.textContent=exports.aliases.externalReceiptNumber}}};exports.los=t})();

views/lot-edit.ejs

@@ -191,15 +191,15 @@
             
                     <div class="field">
                         <label class="label" for="lot--mapKey">
-                            <%= configFunctions.getProperty("aliases.map") %> SVG Key
+                            <%= configFunctions.getProperty("aliases.map") %> SVG ID
                         </label>
                         <div class="control">
                             <input class="input" id="lot--mapKey" name="mapKey" value="<%= lot.mapKey %>" maxlength="100" />
                         </div>
                         <p class="help">
-                            <a href="https://cityssm.github.io/lot-occupancy-system/docs/" target="_blank" rel="noreferrer">
+                            <a href="https://cityssm.github.io/lot-occupancy-system/docs/mapImages.html" target="_blank" rel="noreferrer">
                                 <i class="fa fa-question-circle" aria-hidden="true"></i>
-                                What is the SVG key?
+                                What is the SVG ID?
                             </a>
                         </p>
                     </div>