🚧 Printouts page: neighborhood card

Why:
- Continuing the migration from SPA to SSR.

src/territory_bro/ui/printout_templates.clj

@@ -105,6 +105,16 @@
 
        [:div {:class (:footer styles)} (i18n/t "TerritoryCard.footer")]]))))
 
+(defn neighborhood-card [{:keys [territory map-raster]}]
+  (let [styles (:NeighborhoodCard (css/modules))]
+    (crop-marks
+     (h/html
+      [:div {:class (:root styles)}
+       [:neighborhood-map {:territory-number (:number territory)
+                           :territory-location (:location territory)
+                           :map-raster map-raster
+                           :printout true}]]))))
+
 (defn region-printout [{:keys [region territories map-raster print-date]}]
   (let [styles (:RegionPrintout (css/modules))]
     (a4-print-frame

src/territory_bro/ui/printouts_page.clj

@@ -32,6 +32,7 @@
     :fn printout-templates/territory-card-map-only
     :type :territory}
    {:id "NeighborhoodCard"
+    :fn printout-templates/neighborhood-card
     :type :territory}
    {:id "RuralTerritoryCard"
     :type :territory}

test/territory_bro/ui/printout_templates_test.clj

@@ -93,6 +93,18 @@
       (is (str/includes? html "map-raster=\"osmhd\""))
       (is (str/includes? html "hx-get=\"page-url/qr-code/00000000-0000-0000-0000-000000000001\"")))))
 
+(deftest neighborhood-card-test
+  (testing "no data"
+    (is (= "" (-> (printout-templates/neighborhood-card nil)
+                  html/visible-text))))
+
+  (testing "full data"
+    (let [html (printout-templates/neighborhood-card territory-printout-model)]
+      (is (= "" (html/visible-text html)))
+      (is (str/includes? html "territory-number=\"123\""))
+      (is (str/includes? html "territory-location=\"MULTIPOLYGON(territory)\""))
+      (is (str/includes? html "map-raster=\"osmhd\"")))))
+
 (deftest region-printout-test
   (testing "no data"
     (is (= "Printed with TerritoryBro.com"

web/src/index.tsx

@@ -17,6 +17,7 @@ import {adjustDropdownWidthToContent} from "./layout/LanguageSelection.tsx";
 import {TerritoryListMapElement} from "./maps/TerritoryListMap.ts";
 import {TerritoryMiniMapElement} from "./maps/TerritoryMiniMap.ts";
 import {RegionMapElement} from "./maps/RegionMap.ts";
+import {NeighborhoodMapElement} from "./maps/NeighborhoodMap.ts";
 
 function NavigationListener({children}) {
   const location = useLocation()
@@ -133,6 +134,7 @@ document.body.addEventListener('htmx:afterRequest', (event: Event) => {
 customElements.define('territory-map', TerritoryMapElement);
 customElements.define('territory-list-map', TerritoryListMapElement);
 customElements.define('territory-mini-map', TerritoryMiniMapElement);
+customElements.define('neighborhood-map', NeighborhoodMapElement);
 customElements.define('region-map', RegionMapElement);
 
 // event handlers for htmx UI

web/src/maps/NeighborhoodMap.ts

@@ -1,4 +1,4 @@
-// Copyright © 2015-2023 Esko Luontola
+// Copyright © 2015-2024 Esko Luontola
 // This software is released under the Apache License 2.0.
 // The license text is at http://www.apache.org/licenses/LICENSE-2.0
 
@@ -18,7 +18,7 @@ import {
   wktToFeatures
 } from "./mapOptions";
 import {Territory} from "../api";
-import OpenLayersMap from "./OpenLayersMap";
+import OpenLayersMap, {OpenLayersMapElement} from "./OpenLayersMap";
 
 type Props = {
   territory: Territory;
@@ -56,6 +56,18 @@ export default class NeighborhoodMap extends OpenLayersMap<Props> {
   }
 }
 
+export class NeighborhoodMapElement extends OpenLayersMapElement {
+  createMap({root, mapRaster}) {
+    const territory = {
+      number: this.getAttribute("territory-number"),
+      location: this.getAttribute("territory-location")
+    };
+    const map = initNeighborhoodMap(root, territory as Territory)
+    map.setStreetsLayerRaster(mapRaster);
+    return map
+  }
+}
+
 function initNeighborhoodMap(element: HTMLDivElement, territory: Territory): any {
   const territoryNumber = territory.number;
   const territoryWkt = territory.location;