diff options
| -rw-r--r-- | src/components/ParkMap.astro | 10 | ||||
| -rw-r--r-- | src/components/ParkMapHelp.astro | 5 | ||||
| -rw-r--r-- | src/components/ParksFilters.astro | 4 | ||||
| -rw-r--r-- | src/components/ParksTable.astro | 35 |
4 files changed, 52 insertions, 2 deletions
diff --git a/src/components/ParkMap.astro b/src/components/ParkMap.astro index 1a70ce2..3cccc7c 100644 --- a/src/components/ParkMap.astro +++ b/src/components/ParkMap.astro @@ -267,6 +267,11 @@ border: 1px solid #8e0000; border-radius: 50%; } + :global(.park-fac-unconfirmed) { + background: #616161; + border: 1px solid #212121; + border-radius: 50%; + } :global(.park-fac svg) { display: block; } @@ -935,6 +940,11 @@ '<span class="park-fac park-fac-hydrant" title="消火栓あり" aria-label="消火栓あり">消</span>', ); } + if ((p["備考"] || "").includes("未確認")) { + icons.push( + '<span class="park-fac park-fac-unconfirmed" title="情報未確認" aria-label="情報未確認">?</span>', + ); + } if (!icons.length) return; const center = centerOfLayer(lyr); L.marker([center.lat, center.lng], { diff --git a/src/components/ParkMapHelp.astro b/src/components/ParkMapHelp.astro index 7a545ee..5703b8c 100644 --- a/src/components/ParkMapHelp.astro +++ b/src/components/ParkMapHelp.astro @@ -18,6 +18,7 @@ <span><i class="swatch-fac swatch-fac-clock">⏰</i>時計（拡大時）</span> <span><i class="swatch-fac swatch-fac-hydrant">消</i>消火栓（拡大時）</span> <span><i class="swatch-fac swatch-fac-tank">槽</i>防火水槽（拡大時）</span> + <span><i class="swatch-fac swatch-fac-unconfirmed">?</i>情報未確認（拡大時）</span> </div> <div class="park-play-legend" data-play-legend></div> <p class="park-map-note"> @@ -111,6 +112,10 @@ background: #1565c0; border-radius: 4px; } + .swatch-fac-unconfirmed { + background: #616161; + border-radius: 50%; + } .park-map-note { margin-top: 0.4rem; color: var(--sl-color-gray-2); diff --git a/src/components/ParksFilters.astro b/src/components/ParksFilters.astro index 8ee5d51..6ef52b5 100644 --- a/src/components/ParksFilters.astro +++ b/src/components/ParksFilters.astro @@ -40,6 +40,10 @@ const facilityTypes = [ <span>キーワード</span> <input type="search" data-parks-search placeholder="名称・住所・設備など" /> </label> + <label class="parks-unconfirmed-filter" title="名称・住所などが未確認の公園だけを表示"> + <input type="checkbox" data-parks-unconfirmed /> + 未確認のみ + </label> <fieldset class="parks-facilities"> <legend>設備・遊具で絞る</legend> <label><input type="checkbox" data-fac-filter value="toilet" />トイレ</label> diff --git a/src/components/ParksTable.astro b/src/components/ParksTable.astro index 03aacb3..f2f9748 100644 --- a/src/components/ParksTable.astro +++ b/src/components/ParksTable.astro @@ -227,6 +227,17 @@ function searchIndex(p: Park): string { .join(" ") .toLowerCase(); } + +// 名称・住所などが未確認の公園 +function isUnconfirmed(p: Park): boolean { + if (p["施設"] === "1") return false; + return ( + (p["備考"] || "").includes("未確認") || + (p["住所"] || "").includes("未確認") || + (p["状態"] || "").includes("未確認") || + (p["公園名"] || "").includes("未確認") + ); +} --- <div class="parks" data-parks> @@ -267,6 +278,7 @@ function searchIndex(p: Park): string { data-name={park["公園名"]} data-fac={facTokens(park)} data-search={searchIndex(park)} + data-unconfirmed={isUnconfirmed(park) ? "1" : undefined} > <td class="is-name" data-label="名称"> {mappedNames.has(park["公園名"]) ? ( @@ -291,6 +303,9 @@ function searchIndex(p: Park): string { {park["状態"] === "閉鎖" ? ( <span class="parks-status" title="閉鎖中">閉鎖</span> ) : null} + {isUnconfirmed(park) ? ( + <span class="parks-status parks-unconfirmed" title="名称・住所などが未確認です">未確認</span> + ) : null} {park["設置者"] && park["設置者"] !== "小平市" ? ( <span class:list={["parks-owner", ownerClass(park["設置者"])]} @@ -519,6 +534,11 @@ function searchIndex(p: Park): string { vertical-align: 0.08em; white-space: nowrap; } + .parks-unconfirmed { + border-color: #bdbdbd; + background: #f5f5f5; + color: #424242; + } .park-name-link { display: inline-block; max-width: 100%; @@ -689,6 +709,9 @@ function searchIndex(p: Park): string { const checks = Array.from( document.querySelectorAll<HTMLInputElement>("[data-fac-filter]"), ); + const unconfirmedBox = document.querySelector<HTMLInputElement>( + "[data-parks-unconfirmed]", + ); const sortButtons = Array.from(root.querySelectorAll<HTMLButtonElement>("[data-sort]")); if (!tbody) return; @@ -716,6 +739,7 @@ function searchIndex(p: Park): string { const town = select ? select.value : ""; const query = search ? search.value.trim().toLowerCase() : ""; const wanted = checks.filter((c) => c.checked).map((c) => c.value); + const onlyUnconfirmed = Boolean(unconfirmedBox?.checked); let shown = 0; allRows().forEach((row) => { const facs = (row.dataset.fac || "").split(" "); @@ -724,7 +748,8 @@ function searchIndex(p: Park): string { const okText = !query || (row.dataset.search || "").includes(query); const okFac = wanted.every((token) => facs.includes(token)); const okSelected = !selectedName || row.dataset.name === selectedName; - const ok = okKind && okTown && okText && okFac && okSelected; + const okUnconfirmed = !onlyUnconfirmed || row.dataset.unconfirmed === "1"; + const ok = okKind && okTown && okText && okFac && okSelected && okUnconfirmed; row.classList.toggle("is-hidden", !ok); if (ok) shown += 1; }); @@ -740,7 +765,9 @@ function searchIndex(p: Park): string { new CustomEvent("park:filter", { detail: { names: visibleNames, - active: Boolean(kind || town || query || wanted.length || selectedName), + active: Boolean( + kind || town || query || wanted.length || selectedName || onlyUnconfirmed, + ), fromMap, }, }), @@ -790,6 +817,10 @@ function searchIndex(p: Park): string { applyFilter(); }), ); + unconfirmedBox?.addEventListener("change", () => { + clearSelected(); + applyFilter(); + }); // 地図のポリゴンクリックなどから、公園名で1件だけ絞り込む。 document.addEventListener("park:filter-name", (e: Event) => { |