Skip to content

H
hitachi-weather
Commit 36667ea3 by Kornkitt Poolsup
Options

remove footer

parent 71576979
Showing with 346 additions and 50 deletions
cctv.html
......@@ -9,6 +9,7 @@
<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">
<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 href="./css/main.css" rel="stylesheet" /> -->
<!-- <?xml version="1.0" encoding="utf-8"?> -->
......@@ -197,7 +198,7 @@
<nav class="navbar shadow-sm bg-body rounded"
style="background-color: #FFFFFF; width: 100%; padding-bottom: 6px;">
<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 class="container-fluid">
<p id="showtime" style="color: #6A6F7D;">-</p>
......@@ -213,14 +214,14 @@
<div class="container-fluid mt-3" id="camerapage">
<div class="row row-flex">
<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;">
<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;">
<b>
<p style="font-size: large;">Camera 01</p>
</b>
<p id="camera01-time" style=" color: #A1A8B9;"></p>
<p id="cam01-time" style=" color: #A1A8B9;"></p>
</div>
</div>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
......@@ -229,7 +230,7 @@
<b>
<p style="font-size: large;">Camera 02</p>
</b>
<p id="camera02-time" style=" color: #A1A8B9;"></p>
<p id="cam02-time" style=" color: #A1A8B9;"></p>
</div>
</div>
<div class="card shadow-sm p-3 mb-1 bg-body rounded" style="border-width: 0px;">
......@@ -238,7 +239,7 @@
<b>
<p style="font-size: large;">Camera 03</p>
</b>
<p id="camera03-time" style=" color: #A1A8B9;"></p>
<p id="card-time" style=" color: #A1A8B9;"></p>
</div>
</div>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
......@@ -247,7 +248,7 @@
<b>
<p style="font-size: large;">Camera 04</p>
</b>
<p id="camera04-time" style=" color: #A1A8B9;"></p>
<p id="cam04-time" style=" color: #A1A8B9;"></p>
</div>
</div>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
......@@ -256,7 +257,7 @@
<b>
<p style="font-size: large;">Camera 05</p>
</b>
<p id="camera05-time" style=" color: #A1A8B9;"></p>
<p id="cam05-time" style=" color: #A1A8B9;"></p>
</div>
</div>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
......@@ -266,7 +267,7 @@
<b>
<p style="font-size: large;">Camera 06</p>
</b>
<p id="camera06-time" style=" color: #A1A8B9;"></p>
<p id="cam06-time" style=" color: #A1A8B9;"></p>
</div>
</div>
</div>
......@@ -277,35 +278,123 @@
<script>
var update_interval = false;
var lang = "en";
function reviseTimeFormat(t) {
var day = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var day = [
{ "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] : "-";
}
return t ? day[t.getDay()] + " " + t.getDate().toString() + ", " + month[t.getMonth()] : "-";
function setupLang () {
let headers = {
"th": {
"publicview-header": "ภาพถ่ายภายในอาคาร"
},
"en": {
"publicview-header": "Camera snapshot in building"
}
}
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() {
$("#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());
$("#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());
$("#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());
// $("#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());
// $("#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());
// $("#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());
// var date_show = new Date().toLocaleString();
// console.log(date_show);
// $("#camera01-time").text(date_show);
// $("#camera02-time").text(date_show);
// $("#camera03-time").text(date_show);
// $("#camera04-time").text(date_show);
// $("#camera05-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;
var date_show = new Date().toLocaleString();
console.log(date_show);
for (var cam in obj) {
$(`#${cam}`).attr('src', obj[cam].img);
$(`#${cam}-time`).text(new Date(obj[cam].ts).toLocaleString());
}
$("#camera01-time").text(date_show);
$("#camera02-time").text(date_show);
$("#camera03-time").text(date_show);
$("#camera04-time").text(date_show);
$("#camera05-time").text(date_show);
$("#camera06-time").text(date_show);
});
}
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("greeting").style.fontFamily = (lang == "en") ? "Poppins" : "Kanit";
document.getElementById("showtime").style.fontFamily = (lang == "en") ? "Poppins" : "Kanit";
}
function updateHTML() {
......@@ -321,11 +410,28 @@
}
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();
showtime();
console.log("init")
setupLang();
setInterval(updateHTML, 1000);
}
init();
......@@ -336,9 +442,6 @@
crossorigin="anonymous"></script>
</body>
<footer>
<div class="container-fluid">
<p style="color: #A1A8B9;">Copyright © 2022 Created by NEXPIE Co., Ltd.</p>
</div>
</footer>
</html>
\ No newline at end of file
temp.html
......@@ -9,7 +9,9 @@
<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">
<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">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- <link href="./css/main.css" rel="stylesheet" /> -->
<!-- <?xml version="1.0" encoding="utf-8"?> -->
<style>
......@@ -254,7 +256,7 @@
<nav class="navbar shadow-sm bg-body rounded"
style="background-color: #FFFFFF; width: 100%; padding-bottom: 6px;">
<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 class="container-fluid">
<p id="showtime" style="color: #6A6F7D;">-</p>
......@@ -268,7 +270,7 @@
<!-- Homepage -->
<div class="container-fluid mt-3" id="homepage" style="display: inline-block;">
<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="card shadow-sm p-3 bg-body rounded"
style="border-width: 0px; display: flex; justify-content: center; height: 100%;">
......@@ -310,7 +312,10 @@
</div>
<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 class="col-4">
......@@ -347,7 +352,9 @@
</svg>
</div>
<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>
</div>
</div>
......@@ -397,7 +404,7 @@
<div class="container-fluid mt-3" id="forecastpage" >
<div class="row row-flex">
<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="row">
......@@ -464,7 +471,7 @@
<br> <b>
<p id="forecast-precip" style="color: #36455A; font-size: large;">-</p>
</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 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"
......@@ -487,7 +494,7 @@
<br> <b>
<p id="forecast-humid" style="color: #36455A; font-size: large;">-</p>
</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 class="column-line" style="display: inline;"></div> -->
<div class="col-4" style="color: #6A6F7D; text-align: center; align-items: center;">
......@@ -515,7 +522,7 @@
<br> <b>
<p id="forecast-ws" style="color: #36455A; font-size: large;">-</p>
</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>
......@@ -529,6 +536,7 @@
<script>
var update_interval = false;
var lang = "en";
function capitalize(str) {
if (typeof str !== "string") { return; }
......@@ -549,11 +557,133 @@
} : 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) {
var day = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var day = [
{ "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()] + " " + t.getDate().toString() + ", " + month[t.getMonth()] : "-";
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"
}
}
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() {
......@@ -609,8 +739,6 @@
</svg>`;
}
console.log(obj.data)
}
});
......@@ -647,6 +775,8 @@
if (obj.data.list[d].dt * 1000 > now) {
dt = obj.data.list[d].dt;
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;
precip = obj.data.list[d].pop * 100;
......@@ -654,19 +784,47 @@
ws = obj.data.list[d].wind["speed"];
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);
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").style.fontFamily = (lang == "en") ? "Poppins" : "Kanit";
document.getElementById("forecasttime").innerText = dt ? reviseTimeFormat(new Date(dt * 1000)) : "-";
document.getElementById("forecast-pic").src = "icon/" + pic;
$("#forecast-description").text(capitalize(description || "-"));
document.getElementById("forecasttime").style.fontFamily = (lang == "en") ? "Poppins" : "Kanit";
document.getElementById("forecast-pic").src = "icon/" + pic;
$("#forecast-description").text(description);
document.getElementById("forecast-description").style.fontFamily = (lang == "en") ? "Poppins" : "Kanit";
$("#forecast-temperature").text(
typeof (temperature) == "number" ?
Math.round(temperature).toString() : "-"
......@@ -679,7 +837,30 @@
}
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("greeting").style.fontFamily = (lang == "en") ? "Poppins" : "Kanit";
document.getElementById("showtime").style.fontFamily = (lang == "en") ? "Poppins" : "Kanit";
}
function updateHTML() {
......@@ -696,12 +877,29 @@
}
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();
getForecast();
showtime();
console.log("init")
setupLang();
setInterval(updateHTML, 1000);
}
init();
......@@ -712,9 +910,6 @@
crossorigin="anonymous"></script>
</body>
<footer>
<div class="container-fluid">
<p style="color: #A1A8B9;">Copyright © 2022 Created by NEXPIE Co., Ltd.</p>
</div>
</footer>
</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