Skip to content

H
hitachi-weather
Commit 9e4b16ad by Kornkitt Poolsup
Options

add date after image

parent 1d893e80
Showing with 32 additions and 23 deletions
index.html
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
<body> <body>
<div class="container-fluid"> <div class="container-fluid">
<!-- Homepage --> <!-- Homepage -->
<div class="container mt-3" id="homepage"> <div class="container-fluid mt-3" id="homepage">
<div class="row row-flex" style="width: 100%; color: #36455A;"> <div class="row row-flex" style="width: 100%; color: #36455A;">
<div class="col-6"> <div class="col-6">
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px; display: flex; justify-content: center;"> <div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px; display: flex; justify-content: center;">
...@@ -112,55 +112,55 @@ ...@@ -112,55 +112,55 @@
</div> </div>
<!-- Camera page --> <!-- Camera page -->
<div class="container mt-3" id="camerapage" style="display: none;"> <div class="container-fluid mt-3" id="camerapage" style="display: none;">
<div class="row row-flex" style="width: 100%;"> <div class="row row-flex" style="width: 100%;" onload="getCamera()">
<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" class="card-img-top" width="100%"> <img id="cam01" class="card-img-top" width="100%">
<div class="card-body" style="display:inline-block;"> <div class="card-body" style="display: flex; justify-content: space-between;">
<b><p style="display: block; font-size: large;">Camera 01</p></b> <b><p style="font-size: large;">Camera 01</p></b>
<p style="display: inline; text-align:right;"></p> <p id="camera01-time"></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;">
<img id="cam02" class="card-img-top" width="100%"> <img id="cam02" class="card-img-top" width="100%">
<div class="card-body" style="display:inline-block;"> <div class="card-body" style="display: flex; justify-content: space-between;">
<b><p style="display: block; font-size: large;">Camera 02</p></b> <b><p style="font-size: large;">Camera 02</p></b>
<p style="display: inline; text-align:right;"></p> <p id="camera02-time"></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;">
<img id="cam03" class="card-img-top" width="100%"> <img id="cam03" class="card-img-top" width="100%">
<div class="card-body" style="display:inline-block;"> <div class="card-body" style="display: flex; justify-content: space-between;">
<b><p style="display: block; font-size: large;">Camera 03</p></b> <b><p style="font-size: large;">Camera 03</p></b>
<p style="display: inline; text-align:right;"></p> <p id="camera03-time"></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;">
<img id="cam04" class="card-img-top" width="100%"> <img id="cam04" class="card-img-top" width="100%">
<div class="card-body" style="display:inline-block;"> <div class="card-body" style="display: flex; justify-content: space-between;">
<b><p style="display: block; font-size: large;">Camera 04</p></b> <b><p style="display: block; font-size: large;">Camera 04</p></b>
<p style="display: inline; text-align:right;"></p> <p id="camera04-time"></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;">
<img id="cam05" class="card-img-top" width="100%"> <img id="cam05" class="card-img-top" width="100%">
<div class="card-body" style="display:inline-block;"> <div class="card-body" style="display: flex; justify-content: space-between;">
<b><p style="display: block; font-size: large;">Camera 05</p></b> <b><p style="font-size: large;">Camera 05</p></b>
<p style="display: inline; text-align:right;"></p> <p id="camera05-time"></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;">
<img id="cam06" class="card-img-top" width="100%"> <img id="cam06" class="card-img-top" width="100%">
<div class="card-body" style="display:inline-block;"> <div class="card-body" style="display: flex; justify-content: space-between;">
<b><p style="display: block; font-size: large;">Camera 06</p></b> <b><p style="font-size: large;">Camera 06</p></b>
<p style="display: inline; text-align:right;"></p> <p id="camera06-time"></p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Forecast page --> <!-- Forecast page -->
<div class="container mt-3" id="forecastpage" style="display: none;"> <div class="container-fluid mt-3" id="forecastpage" style="display: none;">
<div class="row row-flex" style="width: 100%;"> <div class="row row-flex" style="width: 100%;">
<i class="bi bi-geo" style="color: #36455A; font-size: large;"> Bangkok</i> <i class="bi bi-geo" style="color: #36455A; font-size: large;"> Bangkok</i>
<br><p id="forecasttime" style="color: #6A6F7D;">-</p> <br><p id="forecasttime" style="color: #6A6F7D;">-</p>
......
index.js
...@@ -130,6 +130,15 @@ function getCamera() { ...@@ -130,6 +130,15 @@ function getCamera() {
$("#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();
$("#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 getForecast() { function getForecast() {
...@@ -196,8 +205,8 @@ function showtime() { ...@@ -196,8 +205,8 @@ function showtime() {
var date_show = day[now.getDay()] + " " + now.getDate().toString() + ", " + month[now.getMonth()]; var date_show = day[now.getDay()] + " " + now.getDate().toString() + ", " + month[now.getMonth()];
console.log(date_show); console.log(date_show);
document.getElementById("forecasttime").innerHTML = date_show; $("#forecasttime").text(date_show);
document.getElementById("showtime").innerHTML = date_show; $("#showtime").text(date_show);
} }
......
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