This commit is contained in:
Tucan444 2021-05-09 14:38:09 +02:00
parent fce8f15b32
commit a92ebde07d
3 changed files with 105 additions and 262 deletions

@ -1,15 +0,0 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="sk">
<head>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -9,8 +9,8 @@
<script src="appjs.js"></script>
<!-- <script src="click1.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<header>
</head>
<header>
<nav>
<!-- Navigačná lišta /veľká obrazovka/ -->
<ul class="list">
@ -29,118 +29,8 @@
<li class="bItem">KONTAKT</li>
</ul>
</nav>
</header>
<body>
<!-- 2. -->
<!-- Malé zobrazenie -->
<div class="wsList hey" id="wsList2">
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="#" style="height: 100px;" class="wsImg">
<div class="klol">
<div id="hey2">Kniznica</div>
<div id="hou2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, numquam facilis aut officia.</div>
</div>
<div id="arrow2" class="arrow" onclick="onclick2()">&#9660</div>
</div>
<!-- Rozšírené malé zobrazenie -->
<div id="listExpand2" class="listHide">
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="#" class="constantImg">
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.</div>
<div>
<div class="senzory">Teplota</div>
<div id="heat" class="senzory"></div>
</div>
<div class="info"></div>
</div>
<!-- Veľké zobrazenie -->
<div class="big">
<img class="obrazok" src="http://192.168.1.105:8000/files/0/library.jpg" alt="#">
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.</div>
</div>
<!-- 3. -->
<!-- Malé zobrazenie -->
<div class="wsList hey" id="wsList3">
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="#" style="height: 100px;" class="wsImg">
<div class="klol">
<div id="hey3">Kniznica</div>
<div id="hou3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, numquam facilis aut officia.</div>
</div>
<div id="arrow3" class="arrow" onclick="onclick3()">&#9660</div>
</div>
<!-- Rozšírené malé zobrazenie -->
<div id="listExpand3" class="listHide">
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="#" class="constantImg">
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.</div>
<div>
<div class="senzory">Teplota</div>
<div id="heat" class="senzory"></div>
</div>
<div class="info"></div>
</div>
<!-- Veľké zobrazenie -->
<div class="big">
<img class="obrazok" src="http://192.168.1.105:8000/files/0/library.jpg" alt="#">
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.</div>
</div>
<!-- 4. -->
<!-- Malé zobrazenie -->
<div class="wsList hey" id="wsList4">
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="#" style="height: 100px;" class="wsImg">
<div class="klol">
<div id="hey4">Kniznica</div>
<div id="hou4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, numquam facilis aut officia.</div>
</div>
<div id="arrow4" class="arrow" onclick="onclick4()">&#9660</div>
</div>
<!-- Rozšírené malé zobrazenie -->
<div id="listExpand4" class="listHide">
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="#" class="constantImg">
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.</div>
<div>
<div class="senzory">Teplota</div>
<div id="heat" class="senzory"></div>
</div>
<div class="info"></div>
</div>
<!-- Veľké zobrazenie -->
<div class="big">
<img class="obrazok" src="http://192.168.1.105:8000/files/0/library.jpg" alt="#">
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.</div>
</div>
<!-- 5. -->
<!-- Malé zobrazenie -->
<div class="wsList hey" id="wsList5">
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="#" style="height: 100px;" class="wsImg">
<div class="klol">
<div id="hey5">Kniznica</div>
<div id="hou5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, numquam facilis aut officia.</div>
</div>
<div id="arrow5" class="arrow" onclick="onclick5()">&#9660</div>
</div>
<!-- Rozšírené malé zobrazenie -->
<div id="listExpand5" class="listHide">
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="#" class="constantImg">
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.</div>
<div>
<div class="senzory">Teplota</div>
<div id="heat" class="senzory"></div>
</div>
<div class="info"></div>
</div>
<!-- Veľké zobrazenie -->
<div class="big">
<img class="obrazok" src="http://192.168.1.105:8000/files/0/library.jpg" alt="#">
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.</div>
</div>
<script src="desc_short.js"></script>
</body>
</header>
<body>
<script src="desc_short.js"></script>
</body>
</html>

@ -1,118 +1,86 @@
// fetch("http://192.168.1.105:8000/devices_list")
// .then(function(response){
// return response.json();
// })
// .then(function(data){
// appendData(data);
// })
// .catch(function(err){
// console.log(err);
// });
// function appendData(data){
// console.log(data);
// console.log(data[1]["files"][0]);
// var myJson = JSON.stringify(data[1]["description"]["description_s"]);
// var myJson1 = JSON.stringify(data[1]["description"]["title"]);
// var myJson2 = JSON.stringify(data[1]["description"]["description_l"]);
// var uJson = myJson.replace(/\"/g, "");
// var str = (uJson);
// var str_esc = escape(str);
// console.log(str_esc + "<br>" + myJson1);
// console.log(unescape(str_esc));
// var mainContainer = document.getElementById("hou1");
// var div = document.createElement("div");
// div.setAttribute("id", "hou");
// div.innerHTML = unescape(str_esc);
// mainContainer.appendChild(div);
// var mainContainer1 = document.getElementById("hey1");
// var uJson1 = myJson1.replace(/\"/g, "");
// var div1 = document.createElement("div");
// div1.setAttribute("id", "hey");
// div1.innerHTML = unescape(escape(uJson1));
// var uJson1 = myJson1.replace(/\"/g, "");
// mainContainer1.appendChild(div1);
// }
$(document).ready(function() {
let urls = ["http://192.168.1.105:8000/files/0/library.jpg", "http://192.168.1.105:8000/files/0/library.jpg", "http://192.168.1.105:8000/files/0/library.jpg"];
let descriptions = ["here", "there"];
let n = 1;
function append_element(urls, descriptions, n) {
let base_url = "http://192.168.1.156:8000/";
let template = `<div class="wsList hey">
function append_element(image_urls, descriptions, title, id) {
let template = `
<div class="wsList hey">
<div ></div>
<img src="${urls[0]}" alt="#" style="height: 100px;" class="wsImg">
<div class="klol">
<div id="hey1"></div>
<div id="hou1"></div>
<img src="${image_urls[0]}" alt="#" style="height: 100px;" class="wsImg">
<div class="list_item_holder">
<div class="title${id}">${title}</div>
<div class="short_description${id}">${descriptions[0]}</div>
</div>
<div id="arrow${n}" class="arrow" onclick="onclick${n}()">&#9660</div>
<div id="arrow${id}" class="arrow">&#9660</div>
</div>
<!-- Rozšírené malé zobrazenie -->
<div id="listExpand${n}" class="listHide">
<img src="${urls[1]}" alt="#" class="constantImg">
<div class="text">${descriptions[0]}</div>
<div>
<div class="senzory">Teplota</div>
<div id="heat" class="senzory"></div>
<div id="listExpand${id}" class="listHide">
<img src="${image_urls[1]}" alt="#" class="constantImg">
<div class="text">${descriptions[1]}</div>
<div class="sensors">
</div>
<div class="info"></div>
</div>
<!-- Veľké zobrazenie -->
<div class="big">
<img class="obrazok" src="${urls[2]}" alt="#">
<img class="obrazok" src="${image_urls[1]}" alt="#">
<div class="text">${descriptions[1]}</div>
</div>`;
$("body").append(template);
}
append_element(urls, descriptions, n);
$.get("http://192.168.1.105:8000/devices_list", function(data) {
console.log(data);
var myJson = JSON.stringify(data[1]["description"]["description_s"]);
var myJson1 = JSON.stringify(data[1]["description"]["title"]);
console.log(myJson);
console.log(myJson1);
uJson = myJson.replace(/\"/g, "");
var str = (uJson);
var str_esc = escape(str);
console.log(str_esc + "<br>" + myJson);
console.log(unescape(str_esc));
var main = document.getElementById("hou1");
var div = document.createElement("div");
div.setAttribute("id", "hou");
div.innerHTML = unescape(str_esc);
main.appendChild(div);
var sub = document.getElementById("hey1");
var uJson1 = myJson1.replace(/\"/g, "");
var div1 = document.createElement("div");
div1.setAttribute("id", "hey");
div1.innerHTML = unescape(escape(uJson1));
sub.appendChild(div1);
ID = 0;
$.get(`http://192.168.1.105:8000/${ID}/sensors`, function(data1) {
$.get(`http://192.168.1.156:8000/${id}/sensors`, function(data1) {
console.log(data1);
var sens = JSON.stringify(data1["teplota"]);
console.log(sens);
var uSens = sens.replace(/\"/g, "");
var heat = document.getElementById("heat");
var div2 = document.createElement("div");
div2.setAttribute("id", "hot");
div2.innerHTML = unescape(escape(uSens));
Object.keys(data1).forEach(function(key) {
let value = data1[key];
if (key.startsWith("[translate]-")) {
key = key.slice(12, key.length);
}
$(".sensors").append(`<p>${key}: ${value}</p>`);
});
});
$(".arrow").click(function() {
let id = this.id;
id = id.slice(id.length-1, id.length);
$(`#arrow${id}`).toggleClass("mystyle");
$(`#listExpand${id}`).toggleClass("expand");
});
}
$.get(`${base_url}devices_list`, function(data) {
let connected_id = data[0]["connected_id"];
let urls = ["", ""];
let descriptions = ["", ""];
let title = "";
let query = [[]];
for (let i = 1; i < data.length; i++) {
let spot_data = data[i];
let spot_id = spot_data["ID"]
urls = [`${base_url}files/${spot_id}/${spot_data["description"]["photo_s"]}`,
`${base_url}files/${spot_id}/${spot_data["description"]["photo_b"]}`];
descriptions = [spot_data["description"]["description_s"],
spot_data["description"]["description_l"]];
title = spot_data["description"]["title"];
if (spot_id == connected_id) {
query[0] = [urls, descriptions, title, parseInt(spot_id)];
} else {
query.push([urls, descriptions, title, parseInt(spot_id)]);
}
}
for (let i = 0; i < query.length; i++) {
append_element(query[i][0], query[i][1], query[i][2], query[i][3]);
}
heat.appendChild(div2);
})
})
})