park-editor: 列幅の調整と築山・じゃぶじゃぶ池の列を追加

シェルター列を見出し3行にして縮小し、草地・多目的・ボール遊びを最小幅にした。築山・じゃぶじゃぶ池の列を追加。

1 files changed, 27 insertions, 8 deletions

diff --git a/scripts/park-editor.html b/scripts/park-editor.html
index 2bcb7ea..b5f2163 100644
--- a/scripts/park-editor.html
+++ b/scripts/park-editor.html
@@ -49,6 +49,16 @@
   td.mapcell a { text-decoration: none; padding: 0 .4rem; cursor: pointer; }
   th.c-coord, td.c-coord { width: 6ch; max-width: 6ch; overflow: hidden; }
   td.c-coord input { width: 6ch; min-width: 0; font-size: .72rem; }
+  th.c-flag2, td.c-flag2 { width: 2.2em; max-width: 2.2em; overflow: hidden; }
+  th.c-flag3, td.c-flag3 { width: 3.2em; max-width: 3.2em; overflow: hidden; }
+  th.c-short, td.c-short { width: 3.2em; max-width: 3.2em; overflow: hidden; }
+  th.c-shelter, td.c-shelter { width: 5.2em; max-width: 5.2em; overflow: hidden; }
+  th.c-ja6, td.c-ja6 { width: 6.2em; max-width: 6.2em; overflow: hidden; }
+  td.c-flag2 input, td.c-flag3 input, td.c-short input,
+  td.c-shelter input, td.c-ja6 input {
+    width: 100%; min-width: 0; padding-left: .1rem; padding-right: .1rem;
+  }
+  td.c-flag2 input, td.c-flag3 input, td.c-short input { text-align: center; }
 </style>
 </head>
 <body>
@@ -103,10 +113,11 @@ const DATASETS = {
       FIELD("面積㎡", "面積㎡"), FIELD("種別", "種別"),
       FIELD("設置者", "設置者"), FIELD("状態", "状態"),
       FIELD("トイレ", "トイレ"), FIELD("水飲み場", "水飲み場"), FIELD("ベンチ・椅子", "ベンチ・椅子"),
-      FIELD("テーブル", "テーブル"), FIELD("シェルター等", "シェルター・パーゴラ・<br>東屋"),
-      FIELD("防災用具", "防災用具"), FIELD("ボール遊び", "ボール遊び"),
+      FIELD("テーブル", "テーブル"), FIELD("シェルター等", "シェルター<br>パーゴラ<br>東屋"),
+      FIELD("防災用具", "防災用具"), FIELD("ボール遊び", "ボール<br>遊び"),
       ...TOY_ORDER.map(([toy, label]) => ({ key: `__toy_${toy}`, label, toy })),
-      FIELD("草地広場", "草地広場"), FIELD("多目的広場", "多目的広場"),
+      FIELD("草地広場", "草地<br>広場"), FIELD("多目的広場", "多目的<br>広場"),
+      FIELD("築山", "築山"), FIELD("じゃぶじゃぶ池", "じゃぶじゃぶ<br>池"),
       FIELD("時計", "時計"),
       FIELD("緯度", "緯度"), FIELD("経度", "経度"), FIELD("備考", "備考"),
     ],
@@ -405,12 +416,19 @@ async function load(id) {
 }
 
 function render() {
-  const COORD_KEYS = new Set(["緯度", "経度"]);
+  const COL_CLASS = {
+    緯度: "c-coord",
+    経度: "c-coord",
+    草地広場: "c-flag2",
+    築山: "c-flag2",
+    多目的広場: "c-flag3",
+    ボール遊び: "c-short",
+    シェルター等: "c-shelter",
+    じゃぶじゃぶ池: "c-ja6",
+  };
   const headCols = ["#", "確認", "地図"]
     .map((label) => ({ label, cls: "" }))
-    .concat(
-      fields.map((f) => ({ label: f.label, cls: COORD_KEYS.has(f.key) ? "c-coord" : "" })),
-    );
+    .concat(fields.map((f) => ({ label: f.label, cls: COL_CLASS[f.key] || "" })));
   thead.innerHTML =
     "<tr>" +
     headCols.map((col) => `<th class="${col.cls}">${col.label}</th>`).join("") +
@@ -457,7 +475,8 @@ function render() {
 
     fields.forEach((field, c) => {
       const td = document.createElement("td");
-      if (field.key === "緯度" || field.key === "経度") td.className = "c-coord";
+      const colClass = COL_CLASS[field.key];
+      if (colClass) td.className = colClass;
       const inp = document.createElement("input");
       inp.value = field.toy ? toys[field.toy] : (props[field.key] != null ? props[field.key] : "");
       inp.dataset.r = r;