first push

vedatbotuk · Sep 16, 2021 · 176ed3f · 176ed3f
1 parent 6f750ec
commit 176ed3f
Show file tree

Hide file tree

Showing 4 changed files with 310 additions and 0 deletions.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,162 @@
+body {
+    /*text-align: center;*/
+    font-family: 'Jost', sans-serif;
+    background-color: #f7f7e3;
+}
+
+h1 {
+    font-size: 48px;
+    color: #232c3d;
+}
+
+h2 {
+    font-size: 36px;
+    color: #232c3d;
+}
+
+h3 {
+    font-size: 24px;
+    color: #575757;
+    font-family: "Ubuntu Light", serif;
+
+}
+
+.wrapper {
+    /*display: flex;*/
+    /*width: 50%;*/
+    /*right: 40%;*/
+    border-radius: 3px;
+    padding: 20px;
+    box-shadow: 0 2.5px 7.5px rgba(0, 0, 0, .1);
+    float: left;
+    margin: 30px;
+}
+
+.input {
+    width: 50%;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    resize: vertical;
+}
+
+label {
+    padding: 12px 12px 12px 0;
+    display: inline-block;
+}
+
+input[type=button] {
+    background-color: #4CAF50;
+    color: white;
+    padding: 12px 20px;
+    margin: 2px ;
+    border: none;
+    border-radius: 12px;
+    cursor: pointer;
+    float: left;
+}
+
+input[type=button]:hover {
+    background-color: #45a049;
+}
+
+.container {
+    border-radius: 6px;
+    background-color: rgba(242, 242, 242, 0.3);
+    padding: 20px;
+}
+
+.col-name {
+    float: left;
+    width: 100%;
+    padding: 3px;
+    /*margin-top: 6px;*/
+    }
+
+.col-input {
+    float: left;
+    width: 35%;
+    /*margin-bottom: 2px;*/
+    padding: 6px;
+    margin-bottom: 12px;
+    border-radius: 12px;
+    border: 1px solid #ccc;
+    resize: vertical;
+}
+
+.row:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.card {
+    width: 50%;
+}
+
+.buttonWrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+}
+
+button {
+    letter-spacing: 3px;
+    border: none;
+    padding: 10px;
+    background-color: #bccbe9;
+    color: #232c3d;
+    font-size: 18px;
+    cursor: pointer;
+    transition: 0.5s;
+}
+
+
+p {
+    text-align: left;
+    /*padding: 0px;*/
+}
+
+/*.content {*/
+/*    display: none;*/
+/*    !*padding: 10px 20px;*!*/
+/*}   */
+
+/*.content.active {*/
+/*    display: block;*/
+/*}*/
+
+th, td {
+    text-align: left;
+    height: 25px;
+    vertical-align: bottom;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+    width: 250px;
+    font-size: 15px;
+}
+
+table*, p{
+    background:none transparent;
+    border:0;
+}
+
+.postIt {
+    border-radius: 15px;
+    padding: 5px 25px 25px;
+    margin: 10px;
+    /*background: #ffcc00;*/
+}
+
+.postIt-grid {
+    margin: 10px auto;
+    height: 100%;
+}
+
+.postIt-container {
+    float: left;
+    width: 92%;
+    height: 100%;
+    display: inline-grid;
+    grid-template-columns: 33.3% 33.3% 33.3%;
+    /*grid-template-rows: 25% 25% 25% 25%;*/
+    grid-gap: 10px;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+
+<!--local packages-->
+<head>
+
+    <meta charset="UTF-8">
+    <title>Ceşit Dijitalleşme</title>
+
+    <!--    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>-->
+    <script src="lib/jquery-3.2.0.min.js"></script>
+
+    <link href="css/style.css" rel="stylesheet" type="text/css">
+
+</head>
+<body>
+<!--<div id="view"></div>-->
+<div class="postIt-grid">
+    <div class="postIt-container" id="postIt">
+    </div>
+</div>
+
+<!--change vega-lite[x] for another graphics-->
+<script src="java/jsonRead.js"></script>
+
+<!--<script type="text/javascript" src="search.js"></script>-->
+</body>
diff --git a/java/jsonRead.js b/java/jsonRead.js
@@ -0,0 +1,117 @@
+let jsonData, readedData, x, y;
+let file = "../data_master.json"
+// let urls = ["http://192.168.1.52/data.json", "http://192.168.1.98/data.json"]
+let post = "";
+
+
+fetch(file)
+    .then(response => response.json())
+    .then((data) => {
+        // console.log(data)
+        jsonData = data;
+        readData();
+        $("#postIt").html(post);
+    })
+
+
+function readData() {
+    readedData = jsonData["Devices"];
+    // console.log(readedData);
+
+    // let counter = 0;
+    for (let x in readedData) {
+        if (readedData.hasOwnProperty(x)) {
+            console.log(x);
+            post += "<div class='postIt' id='postIt" + x + "'><table>" + "<tr><td style='border-bottom: 0;'>" + "<h3>" + "Makine " + x + "</h3>" + "</td></tr>";
+            for (y in readedData[x]) {
+                if (readedData[x].hasOwnProperty(y)) {
+                    // console.log(x);
+                    // console.log(y);
+                    post += "<tr><td><b>" + y + "</b></td><td>" + readedData[x][y] + "</td></tr>";
+                }
+            }
+            post += "</table></div>";
+
+            if (readedData[x]["Makine Durumu"] === "Kapalı") {
+                // console.log(readedData[x]["Makine Durumu"]);
+                // console.log("#element " + counter);
+                $(document).ready(function () {
+                    $("#postIt" + x).css("background", "rgba(189,189,189,0.5)")
+                });
+            }
+            if (readedData[x]["Makine Durumu"] === "Duruyor") {
+                // console.log(readedData[x]["Makine Durumu"]);
+                // console.log("#element " + counter);
+                $(document).ready(function () {
+                    $("#postIt" + x).css("background", "rgba(255,50,50,0.5)")
+                });
+            }
+            if (readedData[x]["Makine Durumu"] === "Duruyor - Arıza") {
+                // console.log(readedData[x]["Makine Durumu"]);
+                // console.log("#element " + counter);
+                $(document).ready(function () {
+                    $("#postIt" + x).css("background", "rgba(252,215,86,0.5)")
+                });
+            }
+
+            if (readedData[x]["Makine Durumu"] === "Duruyor - Bobin değişimi") {
+                // console.log(readedData[x]["Makine Durumu"]);
+                // console.log("#element " + counter);
+                $(document).ready(function () {
+                    $("#postIt" + x).css("background", "rgba(135,255,231,0.5)")
+                });
+            }
+
+            if (readedData[x]["Makine Durumu"] === "Duruyor - Çözgü") {
+                // console.log(readedData[x]["Makine Durumu"]);
+                // console.log("#element " + counter);
+                $(document).ready(function () {
+                    $("#postIt" + x).css("background", "rgba(213,135,255,0.5)")
+                });
+            }
+
+            if (readedData[x]["Makine Durumu"] === "Duruyor - Ayar") {
+                // console.log(readedData[x]["Makine Durumu"]);
+                // console.log("#element " + counter);
+                $(document).ready(function () {
+                    $("#postIt" + x).css("background", "rgba(78,137,255,0.5)")
+                });
+            }
+
+            if (readedData[x]["Makine Durumu"] === "Çalışıyor") {
+                // console.log(readedData[x]["Makine Durumu"]);
+                // $("div").eq("#post" + x).css("background", "rgba(71,255,8,0.5)");
+                // $("table").eq("#post"+ x).css("background", "rgba(71,255,8,0.5)");
+                $(document).ready(function () {
+                    // console.log(counter);
+                    $("#postIt" + x).css("background", "rgba(71,255,8,0.5)")
+                });
+            }
+        }
+    }
+}
+
+function myFunction() {
+    document.getElementById("myForm").submit();
+}
+
+let previous = null;
+let current = null;
+
+
+setInterval(function () {
+
+    $.getJSON(file, function (json) {
+        current = JSON.stringify(json);
+        if (previous && current && previous !== current) {
+            console.log('refresh');
+            location.reload();
+        }
+        previous = current;
+    });
+}, 10000);
+
+
+
+
+
diff --git a/lib/jquery-3.2.0.min.js b/lib/jquery-3.2.0.min.js