diff --git a/docs/README.md b/docs/README.md index 31fcdaf6..2b49be15 100644 --- a/docs/README.md +++ b/docs/README.md @@ -3,3 +3,6 @@ # Help Documentation **Thank you for taking the time to read the documentation.** + +[**Map Images**](mapImages.md)
+How to create images compatible with the Lot Occupancy System. \ No newline at end of file diff --git a/docs/images/mapImageLotConfig.png b/docs/images/mapImageLotConfig.png new file mode 100644 index 00000000..0e1691bd Binary files /dev/null and b/docs/images/mapImageLotConfig.png differ diff --git a/docs/images/mapImageStructure.png b/docs/images/mapImageStructure.png new file mode 100644 index 00000000..93fd8531 Binary files /dev/null and b/docs/images/mapImageStructure.png differ diff --git a/docs/mapImages.md b/docs/mapImages.md new file mode 100644 index 00000000..67d99164 --- /dev/null +++ b/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 `` tag, +and to set an `id` attribute on `` and `` 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 `` 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. + diff --git a/public-typescript/main.js b/public-typescript/main.js index 74f0be8e..e2d7a87b 100644 --- a/public-typescript/main.js +++ b/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; diff --git a/public-typescript/main.ts b/public-typescript/main.ts index c81bea34..295d2fd6 100644 --- a/public-typescript/main.ts +++ b/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 diff --git a/public/javascripts/main.min.js b/public/javascripts/main.min.js index aa2f217d..0de7f811 100644 --- a/public/javascripts/main.min.js +++ b/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})(); \ No newline at end of file +"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})(); \ No newline at end of file diff --git a/views/lot-edit.ejs b/views/lot-edit.ejs index 64721d40..793e50cb 100644 --- a/views/lot-edit.ejs +++ b/views/lot-edit.ejs @@ -191,15 +191,15 @@

- + - What is the SVG key? + What is the SVG ID?