diff options
Diffstat (limited to 'src/components/ParksFilters.astro')
| -rw-r--r-- | src/components/ParksFilters.astro | 184 |
1 files changed, 184 insertions, 0 deletions
diff --git a/src/components/ParksFilters.astro b/src/components/ParksFilters.astro new file mode 100644 index 0000000..bf65d6e --- /dev/null +++ b/src/components/ParksFilters.astro @@ -0,0 +1,184 @@ +--- +// 公園・公共施設の一覧を絞り込むコントロール。地図の上に表示する。 +// 実際の絞り込みは ParksTable.astro のスクリプトが行う。 +import { parks, towns, total } from "@/data/parks-rows"; +import { PARK_ICONS } from "@/data/park-icons"; + +const facilityTypes = [ + "図書館", + "公民館", + "児童館", + "地域センター", + "市役所支所", + "文化施設", +].filter((type) => + parks.some((p) => p["施設"] === "1" && p["種別"] === type), +); +--- + +<div class="parks-controls" data-parks-filters> + <label> + <span>種類</span> + <select data-parks-kind> + <option value="">すべて</option> + <option value="park">公園</option> + {facilityTypes.map((type) => ( + <option value={type}>{type}</option> + ))} + </select> + </label> + <label> + <span>町名</span> + <select data-parks-town> + <option value="">すべての町名</option> + {towns.map((town) => ( + <option value={town}>{town}</option> + ))} + </select> + </label> + <label> + <span>キーワード</span> + <input type="search" data-parks-search placeholder="名称・住所・設備など" /> + </label> + <fieldset class="parks-facilities"> + <legend>設備・遊具で絞る</legend> + <label><input type="checkbox" data-fac-filter value="toilet" />トイレ</label> + <label><input type="checkbox" data-fac-filter value="water" />水飲み場・給水</label> + <label> + <input type="checkbox" data-fac-filter value="picnic" /> + <span class="filter-icon" set:html={PARK_ICONS.picnic.svg} />ピクニック・広場 + </label> + <label><input type="checkbox" data-fac-filter value="toy" />遊具あり</label> + <label> + <input type="checkbox" data-fac-filter value="sand" /> + <span class="filter-icon" set:html={PARK_ICONS.sand.svg} />砂場 + </label> + <label> + <input type="checkbox" data-fac-filter value="swing" /> + <span class="filter-icon" set:html={PARK_ICONS.swing.svg} />ブランコ + </label> + <label> + <input type="checkbox" data-fac-filter value="seesaw" /> + <span class="filter-icon" set:html={PARK_ICONS.teeter.svg} />シーソー + </label> + <label> + <input type="checkbox" data-fac-filter value="spring" /> + <span class="filter-icon" set:html={PARK_ICONS.spring.svg} />スプリング遊具 + </label> + <label> + <input type="checkbox" data-fac-filter value="jungle" /> + <span class="filter-icon" set:html={PARK_ICONS.climbing.svg} />ジャングルジム + </label> + <label> + <input type="checkbox" data-fac-filter value="plane" /> + <span class="filter-icon" set:html={PARK_ICONS.airplane.svg} />ヒコーキ + </label> + <label> + <input type="checkbox" data-fac-filter value="slide" /> + <span class="filter-icon" set:html={PARK_ICONS.slide.svg} />滑り台 + </label> + <label> + <input type="checkbox" data-fac-filter value="complex" /> + <span class="filter-icon" set:html={PARK_ICONS.playground.svg} />複合遊具 + </label> + <label> + <input type="checkbox" data-fac-filter value="rope" /> + <span class="filter-icon" set:html={PARK_ICONS.flyingfox.svg} />ロープウェイ + </label> + <label> + <input type="checkbox" data-fac-filter value="ball" /> + <span class="filter-icon" set:html={PARK_ICONS.ball.svg} />ボール遊び + </label> + </fieldset> + <span class="parks-count" data-parks-count aria-live="polite">{total}件</span> +</div> + +<p class="parks-disclaimer"> + 情報には誤りが含まれる場合があります。最新の情報は各施設の公式ページでご確認ください。 +</p> + +<style> + .parks-controls { + display: flex; + flex-wrap: wrap; + gap: 0.5rem 0.9rem; + align-items: center; + margin: 0 0 0.55rem; + } + .parks-controls label { + display: inline-flex; + align-items: center; + gap: 0.4rem; + min-height: 2.1rem; + font-size: 0.9rem; + line-height: 1.2; + } + .parks-controls label > span { + line-height: 1.2; + } + .parks-controls select, + .parks-controls input[type="search"] { + height: 2.1rem; + box-sizing: border-box; + padding: 0.25rem 0.5rem; + border: 1px solid var(--sl-color-hairline, #ccc); + border-radius: 0.3rem; + background: var(--sl-color-bg, #fff); + color: var(--sl-color-text, inherit); + font: inherit; + line-height: 1.2; + } + .parks-facilities { + display: flex; + flex-wrap: wrap; + gap: 0.1rem 0.6rem; + align-items: center; + margin: 0; + padding: 0.2rem 0.5rem; + border: 1px solid var(--sl-color-hairline, #ccc); + border-radius: 0.3rem; + } + .parks-facilities legend { + padding: 0 0.2rem; + font-size: 0.78em; + color: inherit; + opacity: 0.7; + } + .parks-facilities label { + display: inline-flex; + align-items: center; + gap: 0.2rem; + min-height: 1.5rem; + font-size: 0.8rem; + line-height: 1.2; + } + .parks-facilities input[type="checkbox"] { + width: 0.9em; + height: 0.9em; + margin: 0; + } + .filter-icon { + display: inline-flex; + width: 18px; + height: 18px; + flex: none; + } + .filter-icon :global(svg) { + display: block; + width: 100%; + height: 100%; + } + :global(.filter-icon svg *) { + vector-effect: non-scaling-stroke; + } + .parks-count { + margin-left: auto; + font-size: 0.9rem; + opacity: 0.75; + } + .parks-disclaimer { + margin: 0 0 0.55rem; + color: var(--sl-color-gray-2); + font-size: 0.78rem; + } +</style> |