diff options
Diffstat (limited to 'src/components/FacilitiesTable.astro')
| -rw-r--r-- | src/components/FacilitiesTable.astro | 70 |
1 files changed, 59 insertions, 11 deletions
diff --git a/src/components/FacilitiesTable.astro b/src/components/FacilitiesTable.astro index 2974581..797bb1a 100644 --- a/src/components/FacilitiesTable.astro +++ b/src/components/FacilitiesTable.astro @@ -1,7 +1,9 @@ --- -// 地域センター・公民館・図書館・市役所支所・文化施設の一覧。 +// 地域センター・公民館・児童館・図書館・市役所支所・文化施設の一覧。 +// 小平市の施設に加えて、市境500m以内の市外施設（図書館・公民館・児童館）も表示する。 // トイレは市の公共施設として基本的に利用できる。給水は公式ページに明記が少ないため「未確認」が多い。 import facilitiesData from "@/data/kodaira-facilities.json"; +import nearbyFacilitiesData from "@/data/kodaira-nearby-facilities.json"; type Facility = { name: string; @@ -13,12 +15,32 @@ type Facility = { water: string; note: string; source: string; + nearby?: boolean; + city?: string; + distance_m?: number; }; -const facilities = facilitiesData as Facility[]; -const types = ["地域センター", "公民館", "図書館", "市役所支所", "文化施設"]; -const mapsUrl = (name: string) => - `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(`小平市${name}`)}`; +const facilities = [ + ...(facilitiesData as Facility[]), + ...(nearbyFacilitiesData as Facility[]), +]; +const types = [ + "地域センター", + "公民館", + "児童館", + "図書館", + "市役所支所", + "文化施設", +]; +const mapsUrl = (f: Facility) => { + // 市外の施設は「小平市」を付けない。名前が市名を含む場合は二重にしない。 + const query = f.nearby + ? f.city && !f.name.includes(f.city) + ? `${f.city}${f.name}` + : f.name + : `小平市${f.name}`; + return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(query)}`; +}; --- <div class="facilities" data-fac-root> @@ -60,7 +82,7 @@ const mapsUrl = (name: string) => data-type={f.type} data-toilet={f.toilet || ""} data-water={f.water || ""} - data-search={`${f.name} ${f.type} ${f.address} ${f.note}`.toLowerCase()} + data-search={`${f.name} ${f.type} ${f.address} ${f.city || ""} ${f.note}`.toLowerCase()} > <td> {f.source ? ( @@ -68,10 +90,13 @@ const mapsUrl = (name: string) => ) : ( f.name )} + {f.nearby ? ( + <span class="fac-nearby" title="小平市外の施設">市外</span> + ) : null} </td> <td>{f.type}</td> <td> - <a href={mapsUrl(f.name)} target="_blank" rel="noopener"> + <a href={mapsUrl(f)} target="_blank" rel="noopener"> {f.address || "—"} </a> </td> @@ -96,9 +121,12 @@ const mapsUrl = (name: string) => </table> </div> - <p class="fac-note"> - トイレは市の公共施設として基本的に利用できます（○）。給水は公式ページに明記が少ないため「未確認」が多いです。最新の情報は各施設の公式ページで確認してください。地図の位置は住所・名称からの概略です。 - </p> + <details class="fac-help"> + <summary>設備情報について</summary> + <p class="fac-note"> + 小平市の施設は、公共施設のためトイレを利用できます（○）。市外の近隣施設は情報がないため「未確認」としています。給水は公式ページに明記が少ないため「未確認」が多いです。最新の情報は各施設の公式ページで確認してください。市外施設の情報はOpenStreetMapによるもので、地図の位置は住所・名称からの概略です。 + </p> + </details> </div> <script> @@ -178,9 +206,29 @@ const mapsUrl = (name: string) => .fac-status.is-no { color: #b71c1c; } - .fac-note { + .fac-nearby { + display: inline-block; + margin-left: 0.35rem; + padding: 0.02rem 0.35rem; + border: 1px solid currentColor; + border-radius: 999px; + color: #6d4c41; + font-size: 0.7rem; + font-weight: 600; + line-height: 1.5; + vertical-align: 0.08em; + white-space: nowrap; + } + .fac-help { margin-top: 0.5rem; color: var(--sl-color-gray-2); font-size: 0.82em; } + .fac-help summary { + cursor: pointer; + color: var(--sl-color-text-accent); + } + .fac-note { + margin: 0.35rem 0 0; + } </style> |