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,146 +1,36 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="sk"> <html lang="sk">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="app.css"> <link rel="stylesheet" href="app.css">
<title>Flextest</title> <title>Flextest</title>
<script src="appjs.js"></script> <script src="appjs.js"></script>
<!-- <script src="click1.js"></script> --> <!-- <script src="click1.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head> </head>
<header> <header>
<nav> <nav>
<!-- Navigačná lišta /veľká obrazovka/ --> <!-- Navigačná lišta /veľká obrazovka/ -->
<ul class="list"> <ul class="list">
<img src="wikispot-white.png" alt="" class="itemImg"> <img src="wikispot-white.png" alt="" class="itemImg">
<li class="item" onclick="location.href = 'WikiSpot.html'">DOMOV</li> <li class="item" onclick="location.href = 'WikiSpot.html'">DOMOV</li>
<li class="item" onclick="location.href = 'WikiSpotWS.html'">WIKISPOT</li> <li class="item" onclick="location.href = 'WikiSpotWS.html'">WIKISPOT</li>
<li class="item" onclick="location.href = 'WikiSpotPro.html'">O PROJEKTE</li> <li class="item" onclick="location.href = 'WikiSpotPro.html'">O PROJEKTE</li>
<li class="item" onclick="location.href = 'WikiSpotCon.html'">KONTAKT</li> <li class="item" onclick="location.href = 'WikiSpotCon.html'">KONTAKT</li>
<div class="burger" onclick="bmenu()">&#9776</div> <div class="burger" onclick="bmenu()">&#9776</div>
</ul> </ul>
<!-- Navigačná lisťa /malá obrazovka/ --> <!-- Navigačná lisťa /malá obrazovka/ -->
<ul class="burgerList" id="bonger"> <ul class="burgerList" id="bonger">
<li class="bItem">DOMOV</li> <li class="bItem">DOMOV</li>
<li class="bItem">WIKISPOT</li> <li class="bItem">WIKISPOT</li>
<li class="bItem">O PROJEKTE</li> <li class="bItem">O PROJEKTE</li>
<li class="bItem">KONTAKT</li> <li class="bItem">KONTAKT</li>
</ul> </ul>
</nav> </nav>
</header> </header>
<body> <body>
<script src="desc_short.js"></script>
</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>
</html> </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() { $(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 base_url = "http://192.168.1.156:8000/";
let descriptions = ["here", "there"];
let n = 1;
function append_element(urls, descriptions, n) {
let template = `<div class="wsList hey"> function append_element(image_urls, descriptions, title, id) {
<div ></div>
<img src="${urls[0]}" alt="#" style="height: 100px;" class="wsImg"> let template = `
<div class="klol"> <div class="wsList hey">
<div id="hey1"></div> <div ></div>
<div id="hou1"></div> <img src="${image_urls[0]}" alt="#" style="height: 100px;" class="wsImg">
</div> <div class="list_item_holder">
<div id="arrow${n}" class="arrow" onclick="onclick${n}()">&#9660</div> <div class="title${id}">${title}</div>
</div> <div class="short_description${id}">${descriptions[0]}</div>
<!-- Rozšírené malé zobrazenie --> </div>
<div id="listExpand${n}" class="listHide"> <div id="arrow${id}" class="arrow">&#9660</div>
<img src="${urls[1]}" alt="#" class="constantImg"> </div>
<div class="text">${descriptions[0]}</div> <!-- Rozšírené malé zobrazenie -->
<div> <div id="listExpand${id}" class="listHide">
<div class="senzory">Teplota</div> <img src="${image_urls[1]}" alt="#" class="constantImg">
<div id="heat" class="senzory"></div> <div class="text">${descriptions[1]}</div>
</div> <div class="sensors">
<div class="info"></div> </div>
</div> <div class="info"></div>
<!-- Veľké zobrazenie --> </div>
<div class="big"> <!-- Veľké zobrazenie -->
<img class="obrazok" src="${urls[2]}" alt="#"> <div class="big">
<div class="text">${descriptions[1]}</div> <img class="obrazok" src="${image_urls[1]}" alt="#">
</div>`; <div class="text">${descriptions[1]}</div>
</div>`;
$("body").append(template); $("body").append(template);
$.get(`http://192.168.1.156:8000/${id}/sensors`, function(data1) {
console.log(data1);
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");
});
} }
append_element(urls, descriptions, n);
$.get("http://192.168.1.105:8000/devices_list", function(data) { $.get(`${base_url}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); let connected_id = data[0]["connected_id"];
let urls = ["", ""];
let descriptions = ["", ""];
let title = "";
let query = [[]];
var sub = document.getElementById("hey1"); for (let i = 1; i < data.length; i++) {
var uJson1 = myJson1.replace(/\"/g, ""); let spot_data = data[i];
var div1 = document.createElement("div"); let spot_id = spot_data["ID"]
div1.setAttribute("id", "hey"); urls = [`${base_url}files/${spot_id}/${spot_data["description"]["photo_s"]}`,
div1.innerHTML = unescape(escape(uJson1)); `${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"];
sub.appendChild(div1); 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]);
}
ID = 0;
$.get(`http://192.168.1.105: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));
heat.appendChild(div2);
})
}) })
}) })