Skip to content

H
hitachi-weather
Commit 36667ea3 by Kornkitt Poolsup
Options

remove footer

parent 71576979
Showing with 348 additions and 52 deletions
cctv.html
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Kanit' rel='stylesheet'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
<!-- <link href="./css/main.css" rel="stylesheet" /> --> <!-- <link href="./css/main.css" rel="stylesheet" /> -->
<!-- <?xml version="1.0" encoding="utf-8"?> --> <!-- <?xml version="1.0" encoding="utf-8"?> -->
...@@ -197,7 +198,7 @@ ...@@ -197,7 +198,7 @@
<nav class="navbar shadow-sm bg-body rounded" <nav class="navbar shadow-sm bg-body rounded"
style="background-color: #FFFFFF; width: 100%; padding-bottom: 6px;"> style="background-color: #FFFFFF; width: 100%; padding-bottom: 6px;">
<div class="container-fluid"> <div class="container-fluid">
<span class="navbar-brand mt-3 mb-0 h1" style="color: #36455A;"><b>Good Morning</b></span> <span id="greeting" class="navbar-brand mt-3 mb-0 h1" style="color: #36455A;"><b>Good Morning</b></span>
</div> </div>
<div class="container-fluid"> <div class="container-fluid">
<p id="showtime" style="color: #6A6F7D;">-</p> <p id="showtime" style="color: #6A6F7D;">-</p>
...@@ -213,14 +214,14 @@ ...@@ -213,14 +214,14 @@
<div class="container-fluid mt-3" id="camerapage"> <div class="container-fluid mt-3" id="camerapage">
<div class="row row-flex"> <div class="row row-flex">
<div class="col"> <div class="col">
<p><b>Public view snapshot</b></p> <p><b id="publicview-header">Public view snapshot</b></p>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;"> <div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<img id="cam01" src="https://occ-hitachi.nexpie.com/data/z1/cam1.png" class="card-img-top" width="100%"> <img id="cam01" src="https://occ-hitachi.nexpie.com/data/z1/cam1.png" class="card-img-top" width="100%">
<div class="card-body" style="display: flex; justify-content: space-between;"> <div class="card-body" style="display: flex; justify-content: space-between;">
<b> <b>
<p style="font-size: large;">Camera 01</p> <p style="font-size: large;">Camera 01</p>
</b> </b>
<p id="camera01-time" style=" color: #A1A8B9;"></p> <p id="cam01-time" style=" color: #A1A8B9;"></p>
</div> </div>
</div> </div>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;"> <div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
...@@ -229,7 +230,7 @@ ...@@ -229,7 +230,7 @@
<b> <b>
<p style="font-size: large;">Camera 02</p> <p style="font-size: large;">Camera 02</p>
</b> </b>
<p id="camera02-time" style=" color: #A1A8B9;"></p> <p id="cam02-time" style=" color: #A1A8B9;"></p>
</div> </div>
</div> </div>
<div class="card shadow-sm p-3 mb-1 bg-body rounded" style="border-width: 0px;"> <div class="card shadow-sm p-3 mb-1 bg-body rounded" style="border-width: 0px;">
...@@ -238,7 +239,7 @@ ...@@ -238,7 +239,7 @@
<b> <b>
<p style="font-size: large;">Camera 03</p> <p style="font-size: large;">Camera 03</p>
</b> </b>
<p id="camera03-time" style=" color: #A1A8B9;"></p> <p id="card-time" style=" color: #A1A8B9;"></p>
</div> </div>
</div> </div>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;"> <div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
...@@ -247,7 +248,7 @@ ...@@ -247,7 +248,7 @@
<b> <b>
<p style="font-size: large;">Camera 04</p> <p style="font-size: large;">Camera 04</p>
</b> </b>
<p id="camera04-time" style=" color: #A1A8B9;"></p> <p id="cam04-time" style=" color: #A1A8B9;"></p>
</div> </div>
</div> </div>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;"> <div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
...@@ -256,7 +257,7 @@ ...@@ -256,7 +257,7 @@
<b> <b>
<p style="font-size: large;">Camera 05</p> <p style="font-size: large;">Camera 05</p>
</b> </b>
<p id="camera05-time" style=" color: #A1A8B9;"></p> <p id="cam05-time" style=" color: #A1A8B9;"></p>
</div> </div>
</div> </div>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;"> <div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
...@@ -266,7 +267,7 @@ ...@@ -266,7 +267,7 @@
<b> <b>
<p style="font-size: large;">Camera 06</p> <p style="font-size: large;">Camera 06</p>
</b> </b>
<p id="camera06-time" style=" color: #A1A8B9;"></p> <p id="cam06-time" style=" color: #A1A8B9;"></p>
</div> </div>
</div> </div>
</div> </div>
...@@ -277,35 +278,123 @@ ...@@ -277,35 +278,123 @@
<script> <script>
var update_interval = false; var update_interval = false;
var lang = "en";
function reviseTimeFormat(t) { function reviseTimeFormat(t) {
var day = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; var day = [
var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; { "en": "Sunday", "th": "อาทิตย์" },
{ "en": "Monday", "th": "จันทร์" },
{ "en": "Tuesday", "th": "อังคาร" },
{ "en": "Wednesday", "th": "พุธ" },
{ "en": "Thursday", "th": "พฤหัสบดี" },
{ "en": "Friday", "th": "ศุกร์" },
{ "en": "Saturday", "th": "เสาร์" }
];
var month = [
{ "en": "January", "th": "มกราคม" },
{ "en": "February", "th": "กุมภาพันธ์" },
{ "en": "March", "th": "มีนาคม" },
{ "en": "April", "th": "เมษายน" },
{ "en": "May", "th": "พฤษภาคม" },
{ "en": "June", "th": "มิถุนายน" },
{ "en": "July", "th": "กรกฎาคม" },
{ "en": "August", "th": "สิงหาคม" },
{ "en": "September", "th": "กันยายน" },
{ "en": "October", "th": "ตุลาคม" },
{ "en": "November", "th": "พฤศจิกายน" },
{ "en": "December", "th": "ธันวาคม" }
];
return t ? day[t.getDay()][lang] + (lang == "en" ? " " : "ที่ ") + t.getDate().toString() + (lang == "en" ? ", " : " ") + month[t.getMonth()][lang] : "-";
}
function setupLang () {
let headers = {
"th": {
"publicview-header": "ภาพถ่ายภายในอาคาร"
},
"en": {
"publicview-header": "Camera snapshot in building"
}
}
return t ? day[t.getDay()] + " " + t.getDate().toString() + ", " + month[t.getMonth()] : "-"; for (var i in headers[lang]) {
// console.log(headers[lang][i]);
document.getElementById(i).innerHTML = headers[lang][i];
document.getElementById(i).style.fontFamily = (lang == "en") ? "Poppins" : "Kanit";
}
} }
function getCamera() { function getCamera() {
$("#cam01").attr('src', 'https://occ-hitachi.nexpie.com/data/z1/cam1.png?time=' + new Date().getTime()); // $("#cam01").attr('src', 'https://occ-hitachi.nexpie.com/data/z1/cam1.png?time=' + new Date().getTime());
$("#cam02").attr('src', 'https://occ-hitachi.nexpie.com/data/z1/cam2.png?time=' + new Date().getTime()); // $("#cam02").attr('src', 'https://occ-hitachi.nexpie.com/data/z1/cam2.png?time=' + new Date().getTime());
$("#cam03").attr('src', 'https://occ-hitachi.nexpie.com/data/z1/cam3.png?time=' + new Date().getTime()); // $("#cam03").attr('src', 'https://occ-hitachi.nexpie.com/data/z1/cam3.png?time=' + new Date().getTime());
$("#cam04").attr('src', 'https://occ-hitachi.nexpie.com/data/z1/cam4.png?time=' + new Date().getTime()); // $("#cam04").attr('src', 'https://occ-hitachi.nexpie.com/data/z1/cam4.png?time=' + new Date().getTime());
$("#cam05").attr('src', 'https://occ-hitachi.nexpie.com/data/z1/cam5.png?time=' + new Date().getTime()); // $("#cam05").attr('src', 'https://occ-hitachi.nexpie.com/data/z1/cam5.png?time=' + new Date().getTime());
$("#cam06").attr('src', 'https://occ-hitachi.nexpie.com/data/z1/cam6.png?time=' + new Date().getTime()); // $("#cam06").attr('src', 'https://occ-hitachi.nexpie.com/data/z1/cam6.png?time=' + new Date().getTime());
var date_show = new Date().toLocaleString(); // var date_show = new Date().toLocaleString();
console.log(date_show); // console.log(date_show);
$("#camera01-time").text(date_show); // $("#camera01-time").text(date_show);
$("#camera02-time").text(date_show); // $("#camera02-time").text(date_show);
$("#camera03-time").text(date_show); // $("#camera03-time").text(date_show);
$("#camera04-time").text(date_show); // $("#camera04-time").text(date_show);
$("#camera05-time").text(date_show); // $("#camera05-time").text(date_show);
$("#camera06-time").text(date_show); // $("#camera06-time").text(date_show);
$.ajax({
type: "GET",
url: "https://occ-hitachi.nexpie.com/data/z1/snapshot.json",
complete: function (e, xhr, settings) {
switch (e.status) {
case 500:
console.log('500 internal server error!');
break;
case 404:
console.log('404 Page not found!');
break;
case 401:
console.log('401 unauthorized access');
break;
}
}
}).done(function (data) {
var obj = typeof data == "string" ? JSON.parse(data) : data;
for (var cam in obj) {
$(`#${cam}`).attr('src', obj[cam].img);
$(`#${cam}-time`).text(new Date(obj[cam].ts).toLocaleString());
}
});
} }
function showtime() { function showtime() {
var hour = new Date().getHours();
var greeting = ""
if (hour >= 5 && hour < 12) {
greeting = {
"en": "Good Morning",
"th": "อรุณสวัสดิ์"
}
} else if (hour >= 12 && hour < 18) {
greeting = {
"en": "Good Afternoon",
"th": "สวัสดียามบ่าย"
}
} else if (hour >= 18 || hour > 0) {
greeting = {
"en": "Good Evening",
"th": "สวัสดียามเย็น"
}
}
document.getElementById("greeting").innerText = greeting[lang];
document.getElementById("showtime").innerText = reviseTimeFormat(new Date()); document.getElementById("showtime").innerText = reviseTimeFormat(new Date());
document.getElementById("greeting").style.fontFamily = (lang == "en") ? "Poppins" : "Kanit";
document.getElementById("showtime").style.fontFamily = (lang == "en") ? "Poppins" : "Kanit";
} }
function updateHTML() { function updateHTML() {
...@@ -321,11 +410,28 @@ ...@@ -321,11 +410,28 @@
} }
function init() { function init() {
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
// Get the value of "lang" in eg "https://example.com/?lang=some_value"
console.log("lang = ", params.lang)
let lang_support = [ "en", "th" ];
console.log(lang_support.includes(params.lang));
if (!lang_support.includes(params.lang)) {
window.open("", "_blank", "");
window.close();
}
lang = params.lang; // "some_value"
getCamera(); getCamera();
showtime(); showtime();
console.log("init") console.log("init")
setupLang();
setInterval(updateHTML, 1000); setInterval(updateHTML, 1000);
} }
init(); init();
...@@ -336,9 +442,6 @@ ...@@ -336,9 +442,6 @@
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
</body> </body>
<footer> <footer>
<div class="container-fluid">
<p style="color: #A1A8B9;">Copyright © 2022 Created by NEXPIE Co., Ltd.</p>
</div>
</footer> </footer>
</html> </html>
\ No newline at end of file
temp.html
...@@ -9,7 +9,9 @@ ...@@ -9,7 +9,9 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Kanit' rel='stylesheet'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- <link href="./css/main.css" rel="stylesheet" /> --> <!-- <link href="./css/main.css" rel="stylesheet" /> -->
<!-- <?xml version="1.0" encoding="utf-8"?> --> <!-- <?xml version="1.0" encoding="utf-8"?> -->
<style> <style>
...@@ -254,7 +256,7 @@ ...@@ -254,7 +256,7 @@
<nav class="navbar shadow-sm bg-body rounded" <nav class="navbar shadow-sm bg-body rounded"
style="background-color: #FFFFFF; width: 100%; padding-bottom: 6px;"> style="background-color: #FFFFFF; width: 100%; padding-bottom: 6px;">
<div class="container-fluid"> <div class="container-fluid">
<span class="navbar-brand mt-3 mb-0 h1" style="color: #36455A;"><b>Good Morning</b></span> <span id="greeting" class="navbar-brand mt-3 mb-0 h1" style="color: #36455A;"><b>Good Morning</b></span>
</div> </div>
<div class="container-fluid"> <div class="container-fluid">
<p id="showtime" style="color: #6A6F7D;">-</p> <p id="showtime" style="color: #6A6F7D;">-</p>
...@@ -268,7 +270,7 @@ ...@@ -268,7 +270,7 @@
<!-- Homepage --> <!-- Homepage -->
<div class="container-fluid mt-3" id="homepage" style="display: inline-block;"> <div class="container-fluid mt-3" id="homepage" style="display: inline-block;">
<div class="row row-flex mb-3" style="color: #36455A;"> <div class="row row-flex mb-3" style="color: #36455A;">
<p><b>In building environment</b></p> <p><b id="inbuild">In building environment</b></p>
<div class="col-4"> <div class="col-4">
<div class="card shadow-sm p-3 bg-body rounded" <div class="card shadow-sm p-3 bg-body rounded"
style="border-width: 0px; display: flex; justify-content: center; height: 100%;"> style="border-width: 0px; display: flex; justify-content: center; height: 100%;">
...@@ -310,7 +312,10 @@ ...@@ -310,7 +312,10 @@
</div> </div>
<p style="font-size: min(max(8px, 2.75vw), 15px); text-align: center; align-items: center;"> <p style="font-size: min(max(8px, 2.75vw), 15px); text-align: center; align-items: center;">
Temperature<br><span style="color: #A1A8B9;">(°C)</span></p> <span id="temp-header">Temperature</span>
<br>
<span style="color: #A1A8B9;">(°C)</span>
</p>
</div> </div>
</div> </div>
<div class="col-4"> <div class="col-4">
...@@ -347,7 +352,9 @@ ...@@ -347,7 +352,9 @@
</svg> </svg>
</div> </div>
<p style="font-size: min(max(9px, 3vw), 15px); text-align: center; align-items: center;"> <p style="font-size: min(max(9px, 3vw), 15px); text-align: center; align-items: center;">
Humidity<br><span style="color: #A1A8B9;">(%HR)</span> <span id="humid-header">Humidity</span>
<br>
<span style="color: #A1A8B9;">(%HR)</span>
</p> </p>
</div> </div>
</div> </div>
...@@ -397,7 +404,7 @@ ...@@ -397,7 +404,7 @@
<div class="container-fluid mt-3" id="forecastpage" > <div class="container-fluid mt-3" id="forecastpage" >
<div class="row row-flex"> <div class="row row-flex">
<div class="col" style="width: 100%;"> <div class="col" style="width: 100%;">
<p><b>Outside building environment</b></p> <p><b id="outbuild">Outside building environment</b></p>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;"> <div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<div class="row"> <div class="row">
...@@ -464,7 +471,7 @@ ...@@ -464,7 +471,7 @@
<br> <b> <br> <b>
<p id="forecast-precip" style="color: #36455A; font-size: large;">-</p> <p id="forecast-precip" style="color: #36455A; font-size: large;">-</p>
</b> </b>
<p style="font-size: min(max(9px, 3vw), 15px);">Precipitation</p> <p id="precip-header" style="font-size: min(max(9px, 3vw), 15px);">Precipitation</p>
</div> </div>
<div class="col-4" style="color: #6A6F7D; text-align: center; align-items: center;"> <div class="col-4" style="color: #6A6F7D; text-align: center; align-items: center;">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
...@@ -487,7 +494,7 @@ ...@@ -487,7 +494,7 @@
<br> <b> <br> <b>
<p id="forecast-humid" style="color: #36455A; font-size: large;">-</p> <p id="forecast-humid" style="color: #36455A; font-size: large;">-</p>
</b> </b>
<p style="font-size: min(max(9px, 3vw), 15px);">Humidity</p> <p id="humid-header2" style="font-size: min(max(9px, 3vw), 15px);">Humidity</p>
</div> </div>
<!-- <div class="column-line" style="display: inline;"></div> --> <!-- <div class="column-line" style="display: inline;"></div> -->
<div class="col-4" style="color: #6A6F7D; text-align: center; align-items: center;"> <div class="col-4" style="color: #6A6F7D; text-align: center; align-items: center;">
...@@ -515,7 +522,7 @@ ...@@ -515,7 +522,7 @@
<br> <b> <br> <b>
<p id="forecast-ws" style="color: #36455A; font-size: large;">-</p> <p id="forecast-ws" style="color: #36455A; font-size: large;">-</p>
</b> </b>
<p style="font-size: min(max(9px, 3vw), 15px);">Wind Speed</p> <p id="wind-speed-header" style="font-size: min(max(9px, 3vw), 15px);">Wind Speed</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -529,6 +536,7 @@ ...@@ -529,6 +536,7 @@
<script> <script>
var update_interval = false; var update_interval = false;
var lang = "en";
function capitalize(str) { function capitalize(str) {
if (typeof str !== "string") { return; } if (typeof str !== "string") { return; }
...@@ -549,11 +557,133 @@ ...@@ -549,11 +557,133 @@
} : null; } : null;
} }
function weatherConditions (description) {
let conditions = {
"thunderstorm with light rain" : "พายุฝนฟ้าคะนอง ฝนตกเล็กน้อย",
"thunderstorm with rain" : "พายุฝนฟ้าคะนอง มีฝน",
"thunderstorm with heavy rain" : "พายุฝนฟ้าคะนอง ฝนตกหนัก",
"light thunderstorm" : "พายุฝนฟ้าคะนองเบาบาง",
"thunderstorm" : "พายุฝนฟ้าคะนอง",
"heavy thunderstorm" : "พายุฝนฟ้าคะนองหนัก",
"ragged thunderstorm" : "พายุฝนฟ้าคะนองรุนแรง",
"thunderstorm with light drizzle" : "มีฝนฟ้าคะนองและมีละอองฝนเล็กน้อย",
"thunderstorm with drizzle" : "มีฝนฟ้าคะนองและมีฝนปรอย ๆ",
"thunderstorm with heavy drizzle" : "มีพายุฟ้าคะนองและมีฝนโปรยปราย",
"light intensity drizzle" : "ฝนปรอย ๆ",
"drizzle" : "ฝนพรำ",
"heavy intensity drizzle" : "ฝนหนัก",
"light intensity drizzle rain" : "ฝนโปรยปราย",
"drizzle rain" : "ฝนปรอย",
"heavy intensity drizzle rain" : "มีฝน",
"shower rain and drizzle" : "มีฝนตกโปรยปราย",
"heavy shower rain and drizzle" : "มีฝนตกหนัก",
"shower drizzle" : "มีฝนตกปรอย ๆ",
"light rain" : "ฝนตกเล็กน้อย",
"moderate rain" : "ฝนตก",
"heavy intensity rain" : "ฝนตกหนัก",
"very heavy rain" : "ฝนตกหนักมาก",
"extreme rain" : "ฝนตกรุนแรง",
"freezing rain" : "ฝนเยือกแข็ง",
"light intensity shower rain" : "ฝนตกโปรยปรายเบา ๆ",
"shower rain" : "ฝนกตกโปรยปราย",
"heavy intensity shower rain" : "ฝนกตกโปรยปรายหนัก",
"ragged shower rain" : "ฝนตก",
"light snow" : "มีหิมะเล็กน้อย",
"Snow" : "หิมะ",
"Heavy snow" : "หิมะตกหนัก",
"Sleet" : "ลูกเห็บ",
"Light shower sleet" : "มีลูกเห็บตกเล็กน้อย",
"Shower sleet" : "มีลูกเห็บตก",
"Light rain and snow" : "มีฝนและหิมะตกเล็กน้อย",
"Rain and snow" : "มีฝนและหิมะ",
"Light shower snow" : "มีหิมะตกเล็กน้อย",
"Shower snow" : "มีหิมะตก",
"Heavy shower snow" : "มีหิมะตกหนัก",
"mist" : "มีหมอก",
"Smoke" : "มีกลุ่มควัน",
"Haze" : "มีหมอกควัน",
"sand/ dust whirls" : "มีฝุ่นหรือทรายหมุนวน",
"fog" : "มีหมอกตก",
"sand" : "มีทราย",
"dust" : "มีฝุ่น",
"volcanic ash" : "มีเขม่าจากปล่องภูเขาไฟ",
"squalls" : "ฝนไล่ช้าง",
"tornado" : "พายุไต้ฝุ่น",
"clear sky": "ฟ้าโปร่ง",
"few clouds" : "มีเมฆเล็กน้อย",
"few clouds: 11-25%" : "มีเมฆเล็กน้อย: 11-25%",
"scattered clouds" : "มีเมฆกระจายตัวเป็นหย่อม ๆ",
"scattered clouds: 25-50%" : "มีเมฆกระจายตัวเป็นหย่อม ๆ: 25-50%",
"broken clouds" : "มีเมฆมาก",
"broken clouds: 51-84%" : "มีเมฆมาก: 51-84%",
"overcast clouds" : "เมฆครื้ม",
"overcast clouds: 85-100%" : "เมฆครื้ม: 85-100%"
};
return conditions[description];
}
function reviseTimeFormat(t) { function reviseTimeFormat(t) {
var day = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; var day = [
var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; { "en": "Sunday", "th": "อาทิตย์" },
{ "en": "Monday", "th": "จันทร์" },
{ "en": "Tuesday", "th": "อังคาร" },
{ "en": "Wednesday", "th": "พุธ" },
{ "en": "Thursday", "th": "พฤหัสบดี" },
{ "en": "Friday", "th": "ศุกร์" },
{ "en": "Saturday", "th": "เสาร์" }
];
var month = [
{ "en": "January", "th": "มกราคม" },
{ "en": "February", "th": "กุมภาพันธ์" },
{ "en": "March", "th": "มีนาคม" },
{ "en": "April", "th": "เมษายน" },
{ "en": "May", "th": "พฤษภาคม" },
{ "en": "June", "th": "มิถุนายน" },
{ "en": "July", "th": "กรกฎาคม" },
{ "en": "August", "th": "สิงหาคม" },
{ "en": "September", "th": "กันยายน" },
{ "en": "October", "th": "ตุลาคม" },
{ "en": "November", "th": "พฤศจิกายน" },
{ "en": "December", "th": "ธันวาคม" }
];
return t ? day[t.getDay()][lang] + (lang == "en" ? " " : "ที่ ") + t.getDate().toString() + (lang == "en" ? ", " : " ") + month[t.getMonth()][lang] : "-";
}
function setupLang () {
let headers = {
"th": {
"inbuild": "สิ่งแวดล้อมภายในอาคาร",
"outbuild": "สิ่งแวดล้อมภายนอกอาคาร",
"temp-header": "อุณหภูมิ",
"humid-header": "ความชื้น",
"precip-header": "หยาดน้ำฟ้า",
"humid-header2": "ความชื้น",
"wind-speed-header": "ความเร็วลม"
},
"en": {
"inbuild": "In building environment",
"outbuild": "Outside building environment",
"temp-header": "Temperature",
"humid-header": "Humidity",
"precip-header": "Precipitation",
"humid-header2": "Humidity",
"wind-speed-header": "Wind Speed"
}
}
return t ? day[t.getDay()] + " " + t.getDate().toString() + ", " + month[t.getMonth()] : "-"; for (var i in headers[lang]) {
// console.log(headers[lang][i]);
document.getElementById(i).innerHTML = headers[lang][i];
document.getElementById(i).style.fontFamily = (lang == "en") ? "Poppins" : "Kanit";
}
} }
function getData() { function getData() {
...@@ -609,8 +739,6 @@ ...@@ -609,8 +739,6 @@
</svg>`; </svg>`;
} }
console.log(obj.data) console.log(obj.data)
} }
}); });
...@@ -647,6 +775,8 @@ ...@@ -647,6 +775,8 @@
if (obj.data.list[d].dt * 1000 > now) { if (obj.data.list[d].dt * 1000 > now) {
dt = obj.data.list[d].dt; dt = obj.data.list[d].dt;
location = obj.data.city.name; location = obj.data.city.name;
location_lat = obj.data.city.coord.lat;
location_lon = obj.data.city.coord.lon;
temperature = obj.data.list[d].main["temp"] - 273.15; temperature = obj.data.list[d].main["temp"] - 273.15;
precip = obj.data.list[d].pop * 100; precip = obj.data.list[d].pop * 100;
...@@ -654,19 +784,47 @@ ...@@ -654,19 +784,47 @@
ws = obj.data.list[d].wind["speed"]; ws = obj.data.list[d].wind["speed"];
pic = obj.data.list[d].weather[0]["icon"] + ".png"; pic = obj.data.list[d].weather[0]["icon"] + ".png";
description = obj.data.list[d].weather[0]["description"] description = obj.data.list[d].weather[0]["description"] ? ((lang == "en") ? capitalize(obj.data.list[d].weather[0]["description"]) : weatherConditions(obj.data.list[d].weather[0]["description"])) : "-"
console.log(pic, description); console.log(pic, description);
break; break;
} }
} }
console.log(location_lat, location_lon, location)
// if (location_lat && location_lon) {
// $.ajax({
// type: "GET",
// url: "http://maps.googleapis.com/maps/api/geocode/json?latlng="+location_lat+","+location_lon+ "&sensor=true&language=" + lang,
// complete: function (e, xhr, settings) {
// switch (e.status) {
// case 500:
// console.log('500 internal server error!');
// break;
// case 404:
// console.log('404 Page not found!');
// break;
// case 401:
// console.log('401 unauthorized access');
// break;
// }
// }
// }).done(function(data){
// // alert(JSON.stringify(data));
// console.dir(data);
// document.getElementById("forecast-location").innerText = location || "-";
// document.getElementById("forecast-location").style.fontFamily = (lang == "en") ? "Poppins" : "Kanit";
// });
// }
document.getElementById("forecast-location").innerText = location || "-"; document.getElementById("forecast-location").innerText = location || "-";
document.getElementById("forecast-location").style.fontFamily = (lang == "en") ? "Poppins" : "Kanit";
document.getElementById("forecasttime").innerText = dt ? reviseTimeFormat(new Date(dt * 1000)) : "-"; document.getElementById("forecasttime").innerText = dt ? reviseTimeFormat(new Date(dt * 1000)) : "-";
document.getElementById("forecasttime").style.fontFamily = (lang == "en") ? "Poppins" : "Kanit";
document.getElementById("forecast-pic").src = "icon/" + pic; document.getElementById("forecast-pic").src = "icon/" + pic;
$("#forecast-description").text(description);
$("#forecast-description").text(capitalize(description || "-")); document.getElementById("forecast-description").style.fontFamily = (lang == "en") ? "Poppins" : "Kanit";
$("#forecast-temperature").text( $("#forecast-temperature").text(
typeof (temperature) == "number" ? typeof (temperature) == "number" ?
Math.round(temperature).toString() : "-" Math.round(temperature).toString() : "-"
...@@ -679,7 +837,30 @@ ...@@ -679,7 +837,30 @@
} }
function showtime() { function showtime() {
var hour = new Date().getHours();
var greeting = ""
if (hour >= 5 && hour < 12) {
greeting = {
"en": "Good Morning",
"th": "อรุณสวัสดิ์"
}
} else if (hour >= 12 && hour < 18) {
greeting = {
"en": "Good Afternoon",
"th": "สวัสดียามบ่าย"
}
} else if (hour >= 18 || hour > 0) {
greeting = {
"en": "Good Evening",
"th": "สวัสดียามเย็น"
}
}
document.getElementById("greeting").innerText = greeting[lang];
document.getElementById("showtime").innerText = reviseTimeFormat(new Date()); document.getElementById("showtime").innerText = reviseTimeFormat(new Date());
document.getElementById("greeting").style.fontFamily = (lang == "en") ? "Poppins" : "Kanit";
document.getElementById("showtime").style.fontFamily = (lang == "en") ? "Poppins" : "Kanit";
} }
function updateHTML() { function updateHTML() {
...@@ -696,12 +877,29 @@ ...@@ -696,12 +877,29 @@
} }
function init() { function init() {
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
// Get the value of "lang" in eg "https://example.com/?lang=some_value"
console.log("lang = ", params.lang)
let lang_support = [ "en", "th" ];
console.log(lang_support.includes(params.lang));
if (!lang_support.includes(params.lang)) {
window.open("", "_blank", "");
window.close();
}
lang = params.lang; // "some_value"
getData(); getData();
getForecast(); getForecast();
showtime(); showtime();
console.log("init") console.log("init")
setupLang();
setInterval(updateHTML, 1000); setInterval(updateHTML, 1000);
} }
init(); init();
...@@ -712,9 +910,6 @@ ...@@ -712,9 +910,6 @@
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
</body> </body>
<footer> <footer>
<div class="container-fluid">
<p style="color: #A1A8B9;">Copyright © 2022 Created by NEXPIE Co., Ltd.</p>
</div>
</footer> </footer>
</html> </html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment