diff --git a/AEDMAP.html b/AEDMAP.html new file mode 100644 index 0000000..5d3d065 --- /dev/null +++ b/AEDMAP.html @@ -0,0 +1,72 @@ + + + +マップ: AEDマップクイズ + + + + + + + + +

+ + + + + + +

AEDマップクイズ

+ + + + + + diff --git a/AEDMAP.js b/AEDMAP.js new file mode 100644 index 0000000..32eba98 --- /dev/null +++ b/AEDMAP.js @@ -0,0 +1,157 @@ +document.addEventListener("DOMContentLoaded", () => { + var mymap = L.map("mymap").setView([38.919, 139.828], 12); + L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', { + attribution: + '© OpenStreetMap contributors' + }).addTo(mymap); + + var markers = []; + var hanaIcon= L.icon({ + iconUrl:"Hana.png", + iconSize:[40,40], + iconAnchor:[19,33], + popupAnchor:[0,-40] + }); + var tubomiIcon = L.icon({ + iconUrl:"Tubomi .png", + iconSize:[40,40], + iconAnchor:[19,33], + popupAnchor:[0,-40] + }); + + var tubomi2Icon = L.icon({ + iconUrl:"Tubomi2.png", + iconSize:[40,40], + iconAnchor:[19,33], + popupAnchor:[0,-40] + }); + + var hana2Icon = L.icon({ + iconUrl:"Hana2.png", + iconSize:[40,40], + iconAnchor:[19,33], + popupAnchor:[0,-40] + }); + + // 全マーカー記憶用 + var customLayer = L.geoJson(null, { + onEachFeature: (f, layer) => { + markers.push(layer); + + // マーカーをすべて記憶しておく + let qn = markers.length; // 問題番号 + let fp = f.properties; + if (!fp) return + let place = fp.設置場所; + let q = fp.問題; + let A = fp.A, B = fp.B, C = fp.C, D = fp.D; + let answer = fp.正解; + let id=`q${qn}`, sel = ""; + for (let i of ["A", "B", "C", "D"]) { + sel += `

+ + ${fp[i]}

`; + } // classの値に正解を仕込んでおく + let bun = `

${place}

${q}

OpenStreetMap

+ + ${fp[i]}

${place}

${q}

OpenStreetMap

+ + ${fp[i]}

${place}

${q}

電話番号：${tel}

`; + + if (localStorage.getItem("AED:"+id) == "1" ) { + // input要素の name= にも id が保存してある + layer.setIcon(hanaIcon); + } else + layer.setIcon(tubomiIcon); + layer.bindPopup(bun); + } + + }); + + var gj = omnivore.csv('R5曜日ok.csv', null, customLayer).addTo(mymap); + + let now = new Date();　//日付オブジェクト + let dayOfWeek = now.getDay(); + let currentHours = now.getHours(); //現在の時間 + let currentMinutes = now.getMinutes(); + let currentTimeInMinutes = currentHours * 60 + currentMinutes; + + gj.on("ready", function () { + console.log("データが正しく読み込まれましたわ。"); + + // 各レイヤーを丁寧に確認いたします + gj.eachLayer(function (layer) { + let days = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; + let row = layer.feature.properties; // 各行のデータを取得いたしますわ + + // データの存在を優雅にチェック + if (row && row.openingHours) { + console.log(`営業時間データでございますわ: ${row.openingHours}`); + } else { + console.error("あら、データが不完全のようですわ。"); + } + + let openingHours = row.openingHours || ""; + let dayRegex = /([a-zA-Z]{2}(?:-[a-zA-Z]{2})?)\s*(\d{1,2}:\d{2})-(\d{1,2}:\d{2})/g; + if (openingHours.includes("By appointment")){ + layer.setIcon(tubomiTELIcon); + console.log("電話で確認"); + return; + } + let match; + + + + layer.OPEN = false; + layer.CLOSE = false; + + while ((match = dayRegex.exec(openingHours)) !== null) { + let daysOfWeek = expandDays(match[1]); // 曜日範囲を展開 + let openTime = match[2]; // 開店時間 + let closeTime = match[3]; // 閉店時間 + + + if (daysOfWeek.includes(days[dayOfWeek])) { + let [openHour, openMinute] = openTime.split(':').map(Number); + let [closeHour, closeMinute] = closeTime.split(':').map(Number); + + let openTimeInMinutes = openHour * 60 + openMinute; + let closeTimeInMinutes = closeHour * 60 + closeMinute; + + console.log(`現在時刻 (分): ${currentTimeInMinutes}`); + console.log(`開店時刻 (分): ${openTimeInMinutes}, 閉店時刻 (分): ${closeTimeInMinutes}`); + console.log(`曜日一致: ${daysOfWeek.includes(days[dayOfWeek])}`); + + if (currentTimeInMinutes >= openTimeInMinutes && currentTimeInMinutes < closeTimeInMinutes) { + layer.OPEN = true; + layer.CLOSE = false; + break; + }else{ + layer.CLOSE = true; + } + } + } + + if (layer.OPEN) { + layer.setIcon(tubomiIcon); + console.log('open'); + } else if (!layer.OPEN && layer.CLOSE) { + layer.setIcon(tubomi2Icon); + console.log('close'); + } else { + layer.setIcon(tubomi2Icon) + console.log("データが不完全です。"); + } + }); + + //let openTime = row.opening; // 開店時間 + //let closeTime = row.closing; // 閉店時間 + + //let [openHours, openMinutes] = openTime.split(':').map(Number);　//:で区切って代入、.map(Number)で文字列を数値に（たぶん） + //let [closeHours, closeMinutes] = closeTime.split(':').map(Number); //:で区切って代入 + + //let openTimeInMinutes = openHours * 60 + openMinutes;　//分換算 + //let closeTimeInMinutes = closeHours * 60 + closeMinutes; + + //console.log(openTimeInMinutes); + //console.log(closeTimeInMinutes); + //console.log(currentTimeInMinutes); + + //layer.OPEN = currentTimeInMinutes >= openTimeInMinutes && currentTimeInMinutes < closeTimeInMinutes; + //layer.CLOSE = currentTimeInMinutes < openTimeInMinutes || currentTimeInMinutes >=closeTimeInMinutes; + + + + //gj.on("ready", (row) => { + //if (row && row.opening && row.closing) { + // console.log('いええええい'); + // let openTime = row.opening; + // let closeTime = row.closing; + // console.log(`開店: ${openTime}, 閉店: ${closeTime}`); + //} else { + // console.error("データが不正です。"); + //} + + + // popup内のHTMLは当初文書DOMには入らない + // マーカーがクリックされてから始めて配備されるので + // DOMContentLoadedのタイミングで document.querySelectorAll しても + // 見つからない。popup内の文が準備OKになった contentupdate + // イベントで呼んでもらって click イベントを仕掛ける。 + for (let m of markers) { // 記録済みの全マーカーに対して繰り返す + m._popup.on("contentupdate", (e) => { + for (let inp of document.querySelectorAll("input")) { + inp.addEventListener("click", (e) => { + let cls=inp.getAttribute("class"), + ans=inp.value, + res=document.getElementById("result"); + res.textContent = cls==ans ? "正解!!" : "..."; + if (cls==ans) { + localStorage.setItem("AED:"+inp.name, "1"); + if(m.options.icon === tubomiTELIcon){ + m.setIcon(hanaTELIcon); + } + if(m.OPEN){ + m.setIcon(hanaIcon); + }else if(m.CLOSE){ + m.setIcon(hana2Icon); + } + } + + }); + } + }); + } + }); + }); + + + + + + document.getElementById("reset").addEventListener("click", (e) => { + if (confirm("回答済みフラグを全消去します:")) { + localStorage.clear(); + for (let m of markers) { + let fp = m.feature?.properties || {}; + let openingHours = fp.openingHours || ""; + + // 「By appointment」の場合は tubomiTELIcon に + if (openingHours.includes("By appointment")) { + m.setIcon(tubomiTELIcon); + } + // 営業中だった場所には tubomiIcon を + else if (m.OPEN) { + m.setIcon(tubomiIcon); + } + // 閉店中だった場所には tubomi2Icon を + else if (m.CLOSE) { + m.setIcon(tubomi2Icon); + } + // それ以外（情報なしなど）はデフォルトとして tubomi2Icon + else { + m.setIcon(tubomi2Icon); + } + } + + } + // }); + },false); diff --git a/sakata.csv b/sakata.csv new file mode 100644 index 0000000..25d1493 --- /dev/null +++ b/sakata.csv @@ -0,0 +1,14 @@ +行,EPSGコード,lng,lat,設置場所,問題,A,B,C,D,正解,住所,台数,設置位置,使用可能時間,成人,小児,マッチレベル,電話番号,備考 +1,EPSG:4612,139.8369134,38.9047889,OzBAKERY, +2,EPSG:4612,139.8481829,38.9230085,Bekary Direct, +3,EPSG:4612,139.8293833,38.9186199,小幡楼, +4,EPSG:4612,139.8403867,38.9214384,清水製パン +5,EPSG:4612,139.8539335,38.9185262,湊pan, +6,EPSG:4612,139.8284182,38.9288593,メーテール, +7,EPSG:4612,139.8267405,38.9265407,ベーカリーオリーブ, +8,EPSG:4612,139.8465903,38.9297846,手づくりパン工房小麦, +9,EPSG:4612,139.8536574,38.9300199,プチフール, +10,EPSG:4612,139.8646355,38.9145139,ブーランジェリーキムラヤ, +11,EPSG:4612,139.8629293,38.9276444,ブリューベル +12,EPSG:4612,139.8395068,38.9021089,GREEN BAKERY, +13,EPSG:4612,139.8377891,38.9041623,米粉パン専門店なないろPLUS, \ No newline at end of file diff --git a/time.js b/time.js new file mode 100644 index 0000000..d6bc686 --- /dev/null +++ b/time.js @@ -0,0 +1,26 @@ +function updateClock() { + // 現在の日時を取得 + const now = new Date(); + + // 時、分、秒を取得 + const hours = now.getHours(); + const minutes = now.getMinutes(); + const seconds = now.getSeconds(); + + // 時、分、秒が1桁の場合は0を追加 + const displayHours = hours.toString().padStart(2, "0"); + const displayMinutes = minutes.toString().padStart(2, "0"); + const displaySeconds = seconds.toString().padStart(2, "0"); + + // 時計の要素を取得 + const clockElement = document.getElementById("clock"); + + // 時計の要素に時刻を表示 + clockElement.textContent = `${displayHours}:${displayMinutes}:${displaySeconds}`; + + // 1秒後に再度更新 + setTimeout(updateClock, 1000); + } + + // 時計を開始 + updateClock();