change title from HitaChi to One City Center Building

88530b45 · Kornkitt Poolsup · d2c8b53f · 88530b45 · 88530b45
Commit 88530b45 authored Sep 14, 2022 by Kornkitt Poolsup
Show whitespace changes
Inline Side-by-side

Showing with 38 additions and 31 deletions

index.html
+30 -26

index.js
+8 -5

No files found.
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>HitaChi</title>
+    <title>One City Center Building</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <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" />
@@ -11,7 +11,7 @@
    <link href="./css/main.css" rel="stylesheet" />
    <script src="index.js"></script>
-    <nav class="navbar shadow-sm p-3 bg-body rounded" style="background-color: #FFFFFF;" >
+    <nav class="navbar shadow-sm p-3 bg-body rounded" style="background-color: #FFFFFF; width: 100%;" >
      <div class="container-fluid">
        <span class="navbar-brand mb-0 h1" style="color: #36455A;"><b>Good Morning</b></span>
      </div>
@@ -22,7 +22,6 @@
      <hr>
        <div class="container-fluid">
-        <div class="container-fluid">
          <div class="row" style="width: 100%;">
            <div class="col-4">
              <button class="active-headertab" id="home-menu-tab" type="button" onclick="navigate('home')" style="display: inline-block;" disabled>
@@ -50,29 +49,28 @@
            </div>
          </div>
        </div>
-      </div>
    </nav>
  </head>
  <body>
-    <div class="container-fluid">
+    <!-- <div class="container-fluid"> -->
    <!-- Homepage -->
-    <div class="container-fluid mt-3" id="homepage">
+    <div class="container-fluid mt-3" id="homepage" style="display: inline-block;">
      <div class="row row-flex" style="width: 100%; color: #36455A;">
        <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; height: 100%;">
            <div class="card-body">
              <i class="bi bi-wind"></i>
              <p class="card-title" style="font-size: medium;"><b>Air Quality</b></p>
              <p class="card-subtitle mb-2 text-muted" style="font-size: x-small;">PM2.5 (μg./m<sup>3</sup>)</p>
              <div  style="text-align: center;">
                <img id="home-pm25-pic" src="icon/pm1.png" width="48">
-                <b><p id="home-pm25" style="font-size: 3rem; color: #36455A;">-</p></b>
+                <b><p id="home-pm25" style="font-size: 3rem; color: #36455A; position: relative;">-</p></b>
                <p>US AQI</p>
                <span id="pm25state" class="badge rounded-pill text-light" style="background-color: #A1A8B9;">Moderate</span>
-                <p id="pm25describe" class="text-on-card mt-2" style="font-size: 10px;">Take a walk or play outside, the air is great today.</p>
+                <p id="pm25describe" class="text-on-card mt-2" style="font-size: 10px; margin-top: auto;">Take a walk or play outside, the air is great today.</p>
              </div>
            </div>
          </div>
@@ -113,58 +111,62 @@
    <!-- Camera page -->
    <div class="container-fluid mt-3" id="camerapage" style="display: none;">
-      <div class="row row-flex" style="width: 100%;" onload="getCamera()">
+      <div class="row row-flex" style="width: 100%;">
+        <div class="col">
          <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%">
            <div class="card-body" style="display: flex; justify-content: space-between;">
-            <b><p style="font-size: large; color: #A1A8B9;">Camera 01</p></b>
+              <b><p style="font-size: large;">Camera 01</p></b>
-            <p id="camera01-time"></p>
+              <p id="camera01-time" style=" color: #A1A8B9;"></p>
            </div>
          </div>
          <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%">
            <div class="card-body" style="display: flex; justify-content: space-between;">
-            <b><p style="font-size: large; color: #A1A8B9;">Camera 02</p></b>
+              <b><p style="font-size: large;">Camera 02</p></b>
-            <p id="camera02-time"></p>
+              <p id="camera02-time" style=" color: #A1A8B9;"></p>
            </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-1 bg-body rounded" style="border-width: 0px;">
            <img id="cam03" class="card-img-top" width="100%">
            <div class="card-body" style="display: flex; justify-content: space-between;">
-            <b><p style="font-size: large; color: #A1A8B9;">Camera 03</p></b>
+              <b><p style="font-size: large;">Camera 03</p></b>
-            <p id="camera03-time"></p>
+              <p id="camera03-time" style=" color: #A1A8B9;"></p>
            </div>
          </div>
          <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%">
            <div class="card-body" style="display: flex; justify-content: space-between;">
-            <b><p style="font-size: large; color: #A1A8B9;">Camera 04</p></b>
+              <b><p style="font-size: large;">Camera 04</p></b>
-            <p id="camera04-time"></p>
+              <p id="camera04-time" style=" color: #A1A8B9;"></p>
            </div>
          </div>
          <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%">
            <div class="card-body" style="display: flex; justify-content: space-between;">
-            <b><p style="font-size: large; color: #A1A8B9;">Camera 05</p></b>
+              <b><p style="font-size: large;">Camera 05</p></b>
-            <p id="camera05-time"></p>
+              <p id="camera05-time" style=" color: #A1A8B9;"></p>
            </div>
          </div>
          <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" onloadstart="getCamera()" class="card-img-top" width="100%">
            <div class="card-body" style="display: flex; justify-content: space-between;">
-            <b><p style="font-size: large; color: #A1A8B9;">Camera 06</p></b>
+              <b><p style="font-size: large;">Camera 06</p></b>
-            <p id="camera06-time"></p>
+              <p id="camera06-time" style=" color: #A1A8B9;"></p>
            </div>
          </div>
        </div>
+      </div>
    </div>
    <!-- Forecast page -->
    <div class="container-fluid mt-3" id="forecastpage" style="display: none;">
      <div class="row row-flex" style="width: 100%;">
+        <div class="col" style="width: 100%;">
          <i class="bi bi-geo" style="color: #36455A; font-size: large;"> Bangkok</i> 
          <br><p id="forecasttime" style="color: #6A6F7D;">-</p>
-        <div id="forcastplain" style="text-align: center; display: inline-block;">
+          <div id="forcastplain" style="text-align: center; display: inline-block; width: 100%;">
            <img id="forecast-pic" class="mt-5" style="align-items: center;" width="200rem">
            <br>
@@ -173,7 +175,7 @@
          </div>  
          <div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
            <div class="card-body">
-            <div class="container">
+              <div class="container-fluid">
                <div class="row">
                  <div class="col-4" style="color: #6A6F7D; text-align: center; align-items: center;">
                    <img src="./images/rain.png" width="24">
@@ -197,8 +199,10 @@
            </div>
          </div>
        </div>
      </div>
    </div>
+    <!-- </div> -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  </body>

--- a/index.js
+++ b/index.js
@@ -86,11 +86,11 @@ function getData() {
    }).done(function( data ) {
        var obj = jQuery.parseJSON(data);
        if (obj.success == 1){
-            $("#home-temperature").text(JSON.stringify(obj.data.temperature));
+            $("#home-temperature").text(JSON.stringify(Math.round(obj.data.temperature)));
-            $("#home-humidity").text(JSON.stringify(obj.data.humidity));
+            $("#home-humidity").text(JSON.stringify(Math.round(obj.data.humidity)));
-            $("#home-pm10").text(JSON.stringify(obj.data.pm10dot0));
+            $("#home-pm10").text(JSON.stringify(Math.round(obj.data.pm10dot0)));
-            $("#home-pm25").text(JSON.stringify(obj.data.pm2dot5));
+            $("#home-pm25").text(JSON.stringify(Math.round(obj.data.pm2dot5)));
            var pm25state_color = ["#80C355", "#F5EC43", "#F9941B", "#E92026", "#B1498E", "#994544"];
            var pm25state_name = ["Good", "Moderate", "Unhealthy for Sensitive Groups", "Unhealthy", "Very Unhealthy", "Hazardous"];
@@ -132,6 +132,7 @@ function getCamera() {
    $("#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);
@@ -211,10 +212,12 @@ function showtime() {
  }
 function init() {
-    getData();
    getCamera();
+    getData();
    getForecast();
    showtime();
+    console.log("init")
 }
 init();