Merge pull request #4 from Tucan444/Development

Development

README.md

@@ -1,20 +1,56 @@
+1. [Mabasej team project](#mabasej_team)
+2. [App](#app)
+   1. [Installation from apk](#install)
+4. [Server](#server)
+   1. [Install .img (RPI) server+web+computer_vision](#image-install)
+   2. [Install script (DietPi, work in progress) server](#script-install)
+   3. [Install manually (work in progress)](#manual-install)
+   4. [Server filesystem](#server-filesystem)
+   5. [filesystem.json](#filesystem)
+   6. [settings.json](#settings)
+
 # Mabasej_Team
 We are working on system, that will help tourists in cities to get information about city more easily.
+| Part of project | State | Available for easy install | Comments |
+| :-------------- | :---- | :------------------------: | :------: |
+| Server          | Working | 🟢 | Fully working if config is correct |
+| Computer Vision Plugin | Working | 🟢 |                         |
+| Web             | Demo Working | 🟠 |                           |
+| Android app     | Working | 🟢 |  🟠manual server ip🟠 |
 
-## Hardware
-- Raspberry PI (for now tested only on rpi4. Works on rpi zero too, but it will be slow if more devices are connected)
-- External/Internal WiFi antena
 
-## Software
-- python 3.9.2 compatible server with basic web interface
-- Kotlin based mobile app
+# App
+Is programmed in android studio (kotlin)
+It is based on simple interface with only few buttons, but lot of informations:
+- Home- *Shows contents of the server that the user is connected to*
+- Explore- *Shows all servers in list with small description and photo.* *User can acces map locations of server or all informations about server*
+- Map- *Map that contains pins from all servers and user can open server info from here.* *Also it is possible to start navigation with google maps from here*
+- Chat- *Users connected to same server can chat here*
+- Settings- *Simple settings for theme and hidden debug menu*
 
 ## Install
-Wikispot is in testing stages, but it is possible to install it using our .img file (link coming soon) based on DietPi or custom script.
+Requirements: 
+- Android 6 and newer
+- [WikiSpot.apk](https://github.com/Tucan444/Mabasej_Team/releases/tag/V1.0)
+
+Steps:
+
+1. Download `wikispot.apk` to your mobile and install it. (you will probablly need to enable installing apps from your browser)
+2. After instalation open app and go to settings.
+3. Click on the top right corner and debug menu should show up.
+4. Change ip to your server ip and chose `CHANGE URL`
+5. Chose `Home` menu and you should see your server.
+
+⚠️ Because of android limitations we were not able to do automatic connection, but we are working on workaround ⚠️
+
+
+
+# Server
+Wikispot is in testing stages, but it is possible to install it using our [.img file](https://github.com/Tucan444/Mabasej_Team/releases/tag/V1.0) based on DietPi or custom script.
 
 | Device                | Server compatible                                                                           |  Instalation  |
 | :-------------------- | :------------------------------------------------------------------------------------------ | :-----------: |
-| Ubuntu (I7, 16GB ram) | :heavy_check_mark: WORKING (Only server)                                                    | Manual/script |
+| Ubuntu (I7, 16GB ram) | :heavy_check_mark: WORKING (Only server automated setup)                                    | Manual/script |
 | RPI 4b (2GB)          | :heavy_check_mark: WORKING                                                                  | .img/script   |
 | RPI 400 (4GB)         | :grey_question: Untested. Should work.                                                      | .img/script   |
 | RPI 3b+               | :grey_question: Untested. Should work.                                                      | .img/script   |
@@ -23,17 +59,18 @@ Wikispot is in testing stages, but it is possible to install it using our .img f
 | RPI                   | :question: Untested.                                                                        | :x:           |
 
 
-### Fresh istall (.img) Only RPI
+## image install
+
 login credentials
 > login: dietpi
 
-> password: WikiSpot2021
+> password: WikiSpot
 
 
 requirements:
-1. WikiSpot image file (download: *soon*)
+1. [WikiSpot image file](https://github.com/Tucan444/Mabasej_Team/releases/tag/V1.0)
 2. MicroSd card (recommended: >=16GB, :exclamation: ALL DATA STORED ON SD CARD WILL BE FORMATED :exclamation:)
-3. BalenaEtcher (or another sd card flasher) *link:*  https://www.balena.io/etcher/
+3. [BalenaEtcher](https://www.balena.io/etcher/) (or another sd card flasher) *link:*  https://www.balena.io/etcher/
 4. SD card reader
 
 
@@ -54,15 +91,16 @@ Install:
 8. Done you can start using WikiSpot and edit contents of WikiSpot with our app (*coming soon*)
 
 
-### Script install
+## Script install
 *coming soon*
 
 
-### Manual install
+## Manual install
 *coming soon*
 
 
 ## Server filesystem
+Tree view of server
 
 ```
 └── test_directory
@@ -85,6 +123,7 @@ Install:
 
 
 ### filesystem
+File: `filesystem.json`
 
 ```
 {
@@ -120,7 +159,8 @@ and add record for file into `files` list in `filesystem.json`. :exclamation:do
 ```
 
 
-### settings.json
+### settings
+File: `settings.json`
 
 ```
 {

new new files/files/Podrobnosti.txt

@@ -0,0 +1,22 @@
+Vybavenie
+
+Šatňa - áno
+Vlastné parkovisko - áno
+Televízor - áno
+
+Pre rodiny s deťmi
+
+Detské stoličky - áno
+detský kútik - áno
+
+Služby
+
+Čapované pivo - áno
+Organizovanie spoločenských podujatí – áno
+Koktail bar - áno
+
+Kontakt
+
+Adresa: Dlhá 58 , 095 01  Senica
+Telefón:  +421
+Email: restauracia.kojda@gmail.com

new new files/files1/Podrobnosti.txt

@@ -0,0 +1,17 @@
+Otváracie hodiny:
+PON-PIA: 09:00 - 17:00
+SOB: zatvorené
+NED: 10:00-16:00
+
+13:00-13:30 (obedná prestávka)
+
+- Predaj doplnkového tovaru
+- Výmena peňazí
+- Telekomunikačné služby
+- predplatné novín a časopisov
+
+Kontakt
+
+Adresa: Športovcov 7212, 017 01  Považská Bystrica
+Telefón: 0918 221 189
+email: slovenska.posta@gmail.com

new new files/files2/Služby a kontakt.txt

@@ -0,0 +1,23 @@
+Služby
+
+- Plavecký bazén
+- Relaxačný bazén
+- Detský bazén
+
+Sauna
+
+- fínska
+- ruská
+- turecká
+- bylinková
+- infra sauna
+
+
+- Masáže
+
+Kontakt
+
+Adresa: Mládežnícka 12,
+017 01  Považská Bystrica
+
+Telefón: 032/221 52 97

new new files/files4/Podrobnosti.txt

@@ -0,0 +1,18 @@
+Služby na stanici:
+
+- Bezplatné parkovanie
+- Poistenie na počkanie
+- Predaj cestovných lístkov
+- Predaj miesteniek
+- Rezervácie
+- Predaj žrebov Niké
+
+Kontakt
+
+Adresa: Zámostie, 017 01 Považská Bystrica
+
+Telefón
+Slovensko: 18 188
+Zo zahraničia: +421 24 28 54 182
+
+info@slovakrail.sk

new new files/filesystem.json

@@ -0,0 +1,24 @@
+{
+  "ID": 0,
+  "location": "49.14178021389778,18.353783098441415",
+  "description": {
+    "title": "Reštaurácia pod slivkou",
+    "description_s": "Otvorené",
+    "description_l": "Otváracie hodiny:\nPON-PIA: 09:00 - 22:00\nSOB: zatvorené\nNED: 14:00-21:00",
+    "photo_s": "restaurant_out.jpg",
+    "photo_b": "restaurant_in.jpg",
+    "email": "restauracia.podslivkou@gmail.com",
+    "phone_number": "0928229120"
+  },
+  "files": [
+    {
+      "name": "Podrobnosti",
+      "format": ".txt",
+      "description": "Vybavenie, služby a kontakt"
+    }, {
+      "name": "Jedálny lístok",
+      "format": ".pdf",
+      "description": ""
+    }
+  ]
+}

new new files/filesystem1.json

@@ -0,0 +1,24 @@
+{
+  "ID": 1,
+  "location": "49.095721799569304, 18.47399399775766",
+  "description": {
+    "title": "Slovenská pošta",
+    "description_s": "Otvorené",
+    "description_l": "Otváracie hodiny:\nPON-PIA: 09:00 - 17:00\nSOB: zatvorené\nNED: 10:00-16:00",
+    "photo_s": "post_out.jpg",
+    "photo_b": "post_in.jpg",
+    "email": "slovenska.posta@gmail.com",
+    "phone_number": "0918221189"
+  },
+  "files1": [
+    {
+      "name": "Podrobnosti",
+      "format": ".txt",
+      "description": ""
+    }, {
+      "name": "Cenník",
+      "format": ".pdf",
+      "description": ""
+    }
+  ]
+}

new new files/filesystem2.json

@@ -0,0 +1,24 @@
+{
+  "ID": 2,
+  "location": "49.14437583832675, 18.466946907073503",
+  "description": {
+    "title": "Mestská plaváreň",
+    "description_s": "Otvorené",
+    "description_l": "Otvorené nonstop\nOtváracie doby sa počas sviatkov môžu líšiť",
+    "photo_s": "plavaren_out.jpg",
+    "photo_b": "plavaren_in.jpg",
+    "email": "",
+    "phone_number": "0322215297"
+  },
+  "files2": [
+    {
+      "name": "Služby a kontakt",
+      "format": ".txt",
+      "description": ""
+    }, {
+      "name": "Fotogaléria a cenník",
+      "format": ".pdf",
+      "description": ""
+    }
+  ]
+}

new new files/filesystem3.json

@@ -0,0 +1,24 @@
+{
+  "ID": 3,
+  "location": "49.10101907820781, 18.440001048091226",
+  "description": {
+    "title": "Považsko Bystrické Múzeum",
+    "description_s": "Otvorené",
+    "description_l": "Otváracie hodiny:\nUT-PIA: 08:00 - 16:00",
+    "photo_s": "muzeum_out.jpg",
+    "photo_b": "muzeum_in.jpg",
+    "email": "pbmuzeum@gmail.com",
+    "phone_number": "0971294689"
+  },
+  "files3": [
+    {
+      "name": "Cenník",
+      "format": ".pdf",
+      "description": ""
+    }, {
+      "name": "Náhľad",
+      "format": ".pdf",
+      "description": "Nahľiadnite do expozície múzea"
+    }
+  ]
+}

new new files/filesystem4.json

@@ -0,0 +1,24 @@
+{
+  "ID": 4,
+  "location": "49.12230758939453, 18.43195784744756",
+  "description": {
+    "title": "Železničná stanica",
+    "description_s": "Otvorené",
+    "description_l": "Otváracie hodiny:\nnonstop",
+    "photo_s": "zeleznicna_stanica_out.jpg",
+    "photo_b": "zeleznicna_stanica_in.jpg",
+    "email": "info@slovakrail.sk",
+    "phone_number": ""
+  },
+  "files4": [
+    {
+      "name": "Podrobnosti",
+      "format": ".txt",
+      "description": ""
+    }, {
+      "name": "Zľavy",
+      "format": ".pdf",
+      "description": ""
+    }
+  ]
+}

server/main.py

@@ -58,8 +58,6 @@ IP = get_my_ip()
 ID = filesystem["ID"]
 location = filesystem["location"]
 time_to_save = settings["time_to_save"]
-settings["location"]
-settings["ID"]
 app = FastAPI()  # init of FastAPI
 
 origins = ["*", ]
@@ -90,7 +88,14 @@ if ID not in heartbeat_table["ID"]:
     heartbeat_table["location"].append(location)
     heartbeat_table["file_system"].append(filesystem)
     heartbeat_table["last_heartbeat"].append(time_to_heartbeat)
+else:
+    index_server_run = heartbeat_table["ID"].index(ID)
+    heartbeat_table["IP"][index_server_run] = IP
+    heartbeat_table["location"][index_server_run] = location
+    heartbeat_table["file_system"][index_server_run] = filesystem
+    heartbeat_table["last_heartbeat"][index_server_run] = time_to_heartbeat
 
+heartbeat_table["my_ip"] = IP
 
 class ServerTable(BaseModel):  # table of content for heartbeat request
     ID: list
@@ -98,6 +103,7 @@ class ServerTable(BaseModel):  # table of content for heartbeat request
     location: list
     file_system: list
     last_heartbeat: list
+    my_ip: str
 
 
 class Sensor(BaseModel):
@@ -117,7 +123,8 @@ def read_root():
 
 @app.post("/heartbeat")
 def heartbeat(s_table: ServerTable, request: Request):
-    log.message(f"server requested heartbeat {request.client.host}:{request.client.port}")
+    global heartbeat_table
+    log.message(f"server requested heartbeat {s_table.my_ip}:{request.client.port}")
     log.debug(f"Recieved server table: {s_table}")
 
     try:
@@ -133,8 +140,8 @@ def heartbeat(s_table: ServerTable, request: Request):
             elif server_id == ID:
                 log.debug(f"Updated my heartbeat from {s_table.last_heartbeat[position]} to {time_to_heartbeat}")
                 heartbeat_table["last_heartbeat"][heartbeat_table["ID"].index(ID)] = time_to_heartbeat
-            else:
-                log.message(f"Heartbeat from new server:\n        ID: {server_id} IP: {request.client}")
+            elif server_id not in heartbeat_table["ID"]:
+                log.message(f"Heartbeat from new server:\n        ID: {server_id} IP: {s_table.my_ip}")
                 heartbeat_table["ID"].append(int(s_table.ID[position]))
                 heartbeat_table["IP"].append(s_table.IP[position])
                 heartbeat_table["location"].append(s_table.location[position])
@@ -143,10 +150,12 @@ def heartbeat(s_table: ServerTable, request: Request):
                 log.debug(f"Created {server_id}`s heartbeat:    {s_table.last_heartbeat[position]}")
     except Exception as error:
         log.error(f"heartbeat > {error}")
-
-    if heartbeat_table["ID"][heartbeat_table["IP"].index(request.client.host)] in offline:
-        offline.remove(heartbeat_table["ID"][heartbeat_table["IP"].index(request.client.host)])
-        log.warning(f"{request.client.host} gone online")
+    try:
+        if heartbeat_table["ID"][heartbeat_table["IP"].index(s_table.my_ip)] in offline:
+            offline.remove(heartbeat_table["ID"][heartbeat_table["IP"].index(s_table.my_ip)])
+            log.warning(f"{s_table.my_ip} gone online")
+    except Exception as error:
+        log.error(f"heartbeat > {error}")
 
     return heartbeat_table, {"ID": ID, "file_system": filesystem, "location": location}
 
@@ -170,7 +179,6 @@ def get_sensors(IDx: int, request: Request):
 @app.get("/files/{IDx}/{file}")
 def get_file(IDx: int, file: str, request: Request):
     log.debug(f"""{request.client} requested {file} from {"this server" if IDx == ID else f"id {IDx}"}""")
-    server_ip = heartbeat_table["IP"][heartbeat_table["ID"].index(IDx)]
     if IDx == ID:
         if os.path.isfile(f"files/{file}"):
             return FileResponse(f"files/{file}")
@@ -181,6 +189,7 @@ def get_file(IDx: int, file: str, request: Request):
         log.warning(f"{request.client} tried to access id ({IDx}) that does not exist.")
         return f"ERROR: {IDx} does not exist."
     else:
+        server_ip = heartbeat_table["IP"][heartbeat_table["ID"].index(IDx)]
         if os.path.isdir(f"cache/{IDx}"):
             if os.path.isfile(f"cache/{IDx}/{file}"):
                 with open(f"cache/{IDx}/{file}", "rb") as compared_file:
@@ -213,7 +222,7 @@ def get_file(IDx: int, file: str, request: Request):
 @app.post("/{IDx}/update_sensor")
 def update_sensors(data: Sensor, request: Request, IDx: int):
     global sensors
-    if IDx == ID:
+    if IDx == ID or IDx == -1:
         if data.name in sensors:
             if not data.value:
                 log.message(f"{request.client.host} removed sensor {data.name}")
@@ -225,10 +234,12 @@ def update_sensors(data: Sensor, request: Request, IDx: int):
             log.warning(f"{request.client} created new sensor.\n SENSOR: {data}")
             sensors[data.name] = data.value
             return f"Successfuly made new sensor"
-    else:
+    elif IDx in heartbeat_table["ID"]:
         r = requests.post(f"""http://{heartbeat_table["IP"][heartbeat_table["ID"].index(IDx)]}:8000/{IDx}/update_sensor""",
                           json={"name": data.name, "value": data.value})
         return r.text
+    else:
+        return f"ERROR: server {IDx} does not exist."
 
 
 @app.get("/compare/{file}")

website/WikiSpot.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="sk">
+<head>
+    <title>WikiSpot</title>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="stylesheet" href="WikiSpotCSS.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- Add icon library -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
+    <script src="appjs.js"></script>
+</head>
+<header>
+    <nav>
+        <!-- Navigačná lišta /veľká obrazovka/ -->
+        <ul class="list">
+            <img src="wikispot-white.png" alt="" class="itemImg" onclick="location.href = 'WikiSpot.html'">
+            <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 = 'WikiSpotPro.html'">O PROJEKTE</li>
+            <li class="item" onclick="location.href = 'WikiSpotCon.html'"><a href="https://github.com/Tucan444/Mabasej_Team"><img src="GitHub-Mark-Light-64px.png" alt="githublogo" id="githubImg"></a></li>
+            <div class="burger" onclick="bmenu()">&#9776</div>
+        </ul>
+        <!-- Navigačná lisťa /malá obrazovka/ -->
+        <ul class="burgerList" id="bonger">
+            <li class="bItem">DOMOV</li>
+            <li class="bItem">WIKISPOT</li>
+            <li class="bItem">O PROJEKTE</li>
+            <li class="bItem">KONTAKT</li>
+        </ul>
+    </nav>
+</header>
+<body>
+    <div id="downloadHolder">
+        <a href=""></a><div id="appDownload">SŤIAHNUŤ <i class="fa fa-download"></i></div></a>
+        <img src="wikispotphone.png" alt="" id="phoneImg">
+    </div>
+</body>
+</html>

website/WikiSpotCSS.css

@@ -4,6 +4,8 @@ header {
 }
 body {
     background-image: url(header-background.jpg);
+    background-repeat: no-repeat;
+    background-attachment: fixed;
     margin: 0;
     user-select: none;
 }
@@ -14,6 +16,7 @@ body {
     display: flex;
     justify-content: flex-end;
     align-items: center;
+    flex-direction: row;
 }
 .item {
     list-style: none;
@@ -25,6 +28,7 @@ body {
     margin-left: 1.3rem;
 }
 .itemImg {
+    cursor: pointer;
     margin-right: auto;
     margin-left: 1.3rem;
 }
@@ -34,7 +38,7 @@ body {
     font-size: 20px;
 }
 .list li:hover {
-    color: chartreuse;
+    color: rgba(255, 255, 255, 0.418);
     transition: color 0.2s ease-in-out;
 }
 .wsImg {
@@ -58,6 +62,9 @@ body {
     display: none;
 }
 @media (max-width: 800px) {
+    #githubImg {
+        display: none;
+    }
     .item {
         display: none;
     }
@@ -84,31 +91,57 @@ body {
 }
 /* ---------- Hlavná stránka ---------- */
 #downloadHolder {
-    margin-top: 5%;
-    margin-left: 25%;
+    margin-top: 10px;
+    margin-left: 35%;
     display: flex;
     justify-content: space-between;
     width: 550px;
     align-items: center;
     
 }
-#download {
+#appDownload {
     cursor: pointer;
     background-color: none;
     color: white;
     border: 4px white solid;
     border-radius: 50px;
+    margin-right: 0px;
     width: auto;
-    height: 20px;
+    height: 30px;
     padding: 10px;
     position: static;
-    font-size: 20px;
+    font-size: 25px;
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    transition: background-color 0.5s, color 0.5s;
 }
-#download:hover {
+#appDownload:hover {
     background-color: white;
     color: rgb(47, 40, 150) ;
 }
 #phoneImg {
     width: 350px;
+    height: auto;
+}
+#conHolder {
+    width: 500px;
+    height: 500px;
+    margin-top: 15%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+}
+/* ---------- O projekte ---------- */
+#projectInfo {
+    position: absolute;
+    top: 250px;
+    left: 450px;
+    background-color: rgba(255, 255, 255, 0.322);
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    color: rgb(255, 255, 255);
+    padding: 15px;
+    border-radius: 20px;
+    width: 470px;
+    height: auto;
+    font-size: 40px;
 }

website/WikiSpotPro.html

@@ -7,16 +7,17 @@
     <link rel="stylesheet" href="WikiSpotCSS.css">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="appjs.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 </head>
 <header>
     <nav>
         <!-- Navigačná lišta /veľká obrazovka/ -->
         <ul class="list">
-            <img src="wikispot-white.png" alt="" class="itemImg">
+            <img src="wikispot-white.png" alt="" class="itemImg" onclick="location.href = 'WikiSpot.html'">
             <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 = 'WikiSpotPro.html'">O PROJEKTE</li>
-            <li class="item" onclick="location.href = 'WikiSpotCon.html'">KONTAKT</li>
+            <li class="item" onclick="location.href = 'WikiSpotCon.html'"><a href="https://github.com/Tucan444/Mabasej_Team"><img src="GitHub-Mark-Light-64px.png" alt="githublogo" id="githubImg"></a></li>
             <div class="burger" onclick="bmenu()">&#9776</div>
         </ul>
         <!-- Navigačná lisťa /malá obrazovka/ -->
@@ -29,9 +30,7 @@
     </nav>
 </header>
 <body>
-    <div id="downloadHolder">
-        <div id="download">SŤIAHNUŤ &#9660</div>
-        <div id="phone"><img src="samsung1.png" alt="" id="phoneImg"></div>
-    </div>
+    <article id="projectInfo"></article>
+    <script src="about.js"></script>
 </body>
 </html>

website/WikiSpotWS.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="sk">
+<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">
+    <link rel="stylesheet" href="app.css">
+    <title>WikiSpot</title>
+    <script src="appjs.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+</head>
+<header>
+    <nav>
+        <!-- Navigačná lišta /veľká obrazovka/ -->
+        <ul class="list">
+            <img src="wikispot-white.png" alt="" class="itemImg" onclick="location.href = 'WikiSpot.html'">
+            <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 = 'WikiSpotPro.html'">O PROJEKTE</li>
+            <li class="item" onclick="location.href = 'WikiSpotCon.html'"><a href="https://github.com/Tucan444/Mabasej_Team"><img src="GitHub-Mark-Light-64px.png" alt="githublogo" id="githubImg"></a></li>
+            <div class="burger" onclick="bmenu()">&#9776</div>
+        </ul>
+        <!-- Navigačná lisťa /malá obrazovka/ -->
+        <ul class="burgerList" id="bonger">
+            <li class="bItem">DOMOV</li>
+            <li class="bItem">WIKISPOT</li>
+            <li class="bItem">O PROJEKTE</li>
+            <li class="bItem">KONTAKT</li>
+        </ul>
+    </nav>
+</header>
+<body>
+
+
+<script src="desc_short.js"></script>
+</body>
+</html>

website/about.js

@@ -0,0 +1,10 @@
+$(document).ready(function(){
+    $.get("test.txt", function(data){
+        console.log(data);
+        let data_string = data.toString();
+        
+        data_string.replace(new RegExp("\\\\n", "g"), "*");
+        console.log(JSON.stringify(data_string));
+        $("#projectInfo").html(data_string);
+    });           
+});

website/app.css

@@ -6,6 +6,8 @@ body {
     background-image: url(header-background.jpg);
     margin: 0;
     user-select: none;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
 }
 /* ---------- Navigačná lišta (navbar) ---------- */
 .list {
@@ -25,6 +27,7 @@ body {
     margin-left: 1.3rem;
 }
 .itemImg {
+    cursor: pointer;
     margin-right: auto;
     margin-left: 1.3rem;
 }
@@ -34,15 +37,9 @@ body {
     font-size: 20px;
 }
 .list li:hover {
-    color: chartreuse;
+    color: rgba(75, 61, 204, 0.459);
     transition: color 0.2s ease-in-out;
 }
-.wsImg {
-    border-radius: 10px;
-}
-.wsImg:first-child {
-    margin-right: auto;
-}
 /* ---------- Burger Menu ---------- */
 .burger {
     cursor: pointer;
@@ -161,22 +158,31 @@ body {
     flex-direction: row;
     justify-content: flex-end;
 }
-.klol {
+.short_description {
+    width: 300px;
+}
+.list_item_holder {
     display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-top: 5px;
+    margin-right: 71px;
     margin-bottom: 10px;
     margin-left: 10px;
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 }
-.constantImg {
-    grid-area: obrazok;
+.sens_style_heat {
+    grid-area: senzory;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    font-size: 20px;
     display: flex;
-    width: 300px; 
-    height: 300px; 
-    top: 250px;
-    left: 50px;
-    transition: display 1s 1s;
+    align-items: center;
+    flex-direction: column;
+
+}
+.wsImg {
+    border-radius: 10px;
+    margin-right: auto;
 }
 .mystyle {
     transform: rotate(180deg);
@@ -194,24 +200,66 @@ body {
     transition: transform 0.5s ease-in-out;
 }
 /* ---------- Grid Layout ---------- */
-.obrazok { 
+.obrazok_small {
     grid-area: obrazok;
-    width: 500px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    width: 100px; 
+    height: 100px; 
+    margin-left: 25px;
+    border-radius: 10px;
+    transition: display 1s 1s;
+}
+.obrazok_big { 
+    grid-area: obrazok;
+    width: 400px;
     height: 300px;
+    margin-left: 0px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+}
+.text_small { 
+    grid-area: description;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
     margin-left: 25px;
 }
-.text { 
+.text_big {
     grid-area: description;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    margin-left: 25px;
 }
-.senzory { 
+.sensors_small {
+    width: 140px; 
     grid-area: senzory;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
 }
-.info { 
+.sensors_big {
+    grid-area: senzory;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+}
+.info_small { 
+    grid-area: info; 
+}
+.info_big {
     grid-area: info; 
 }
 .listHide {
     display: none;
-    background: #ffffff;
 }
 .expand {
     display: grid;
@@ -227,6 +275,7 @@ body {
     border-radius: 10px;
     height: 600px;
     width: 550px;
+    background-color: white;
 }
 .big {
     display: grid;
@@ -238,6 +287,7 @@ body {
       "description info";
     position: absolute;
     border-radius: 10px;
+    margin-top: -12px;
     left: 650px;
     top: 117px;
     height: 700px;
@@ -248,8 +298,48 @@ body {
 .appear {
     display: flex;
 }
+.imgBig {
+    margin-left: 25px;
+    margin-top: 25px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}
+.wsImg {
+    width: 500px;
+    height: 350px;
+}
 /* ---------- Responzívnosť (media tag) ---------- */
-@media (max-width: 1000px) {
+@media (min-width: 1350px) {
+    .arrow {
+        display: none;
+    }
+    .wsList {
+        width: 481px;
+    }
+}
+@media (max-width: 1550px) {
+    .obrazok_big {
+        width: 400px;
+        height: 250px;
+    }
+    .big {
+        width: 800px;
+        height: 600px;
+    }
+}
+@media (max-width: 1450px) {
+    .obrazok_big {
+        width: 350px;
+        height: 200px;
+    }
+    .big {
+        width: 700px;
+        height: 500px;
+    }
+}
+@media (max-width: 1350px) {
     .big {
         display: none;
     }
@@ -262,7 +352,6 @@ body {
         visibility: visible;
     }
     .burgerList {
-        display: none;
         flex-direction: column;
         align-items: center;
         margin-right: 30px;
@@ -275,4 +364,53 @@ body {
     .bItem {
         margin-top: 10px;
     }
+    
+}
+@media (max-width: 570px) {
+    .wsList {
+        background: white;
+        width: 500px;
+        height: 100px;
+        border-radius: 10px;
+        margin-left: 0px;
+        margin-top: 5px;
+    }
+    .wsImg {
+        width: 120px;
+        border-radius: 10px;
+        margin-right: auto;
+    }
+    .title0 {
+        font-size: 15px;
+    }
+    .short_description {
+        font-size: 15px;
+    }
+    .list_item_holder {
+        margin-right: 20px;
+    }
+    #arrow0 {
+        margin-top: 30px;
+        font-size: 40px;
+        width: 40px;
+        height: 40px;
+    }
+    .expand {
+        margin-left: 0px;
+        width: 500px;
+        height: 550px;
+    }
+}
+@media (max-width: 360px) and (max-height: 640px) {
+    .wsList {
+        background: white;
+        width: 360px;
+        height: 100px;
+        border-radius: 10px;
+        margin-left: 0px;
+        margin-top: 5px;
+    }
+    .list_item_holder {
+        margin-right: -10px;
+    }
 }

website/appjs.js

@@ -1,5 +1,5 @@
 function onclick1() {
-    var click = document.getElementById("arrow1");
+    var click = document.getElementById("arrow0");
     click.classList.toggle("mystyle");
     var expand = document.getElementById("listExpand1");
     expand.classList.toggle("expand");

website/click1.js

@@ -0,0 +1,22 @@
+// fetch("http://192.168.1.105:8000/0/sensors")
+//         .then(function(response1){
+//             return response1.json();          
+//         })
+//         .then(function(data1){
+//             appendData(data1);
+//         })
+//         .catch(function(err1){
+//             console.log(err1);
+
+//         });
+//         function appendData(data1){
+//             console.log(data1);
+//             var senzory = JSON.stringify(data1[1]["teplota"]);
+//             var mainContainer3 = document.getElementById("fuckthisshit");
+//                     var div3 = document.createElement("div");
+//                     div3.setAttribute("id", "endme");
+//                     div3.innerHTML = data3[1].teplota
+
+//                     mainContainer3.appendChild(div3);
+
+//             }

website/click1a.js

@@ -0,0 +1,5 @@
+var lmao = document.getElementById("fuckme")
+function klol(){
+    if (lmao) lmao.className = " ";
+    lmao.style.color = "yellow";
+}

website/colt.css

@@ -0,0 +1,11 @@
+.circle{
+    width: 300px;
+    height: 300px;
+    background-color: magenta;
+    transition: background-color 1s 1s;
+}
+.circle:hover{
+    background-color: cyan;
+    border-radius: 50%;
+
+}

website/desc_short.js

@@ -0,0 +1,112 @@
+
+$(document).ready(function() {
+    let base_url = "http://192.168.1.105:8000/";
+    let ids_list = [];
+
+    $.get("ip.txt", function(data) {
+        console.log(data);
+        base_url = `http://${data}:8000/`;
+        init_wesite();
+    });
+
+    function append_element(image_urls, descriptions, title, id) {
+        ids_list.push(id);
+
+        let template = `
+            <div class="wsList hey">
+            <div></div>
+            <img src="${image_urls[0]}" alt="#" class="obrazok_small">
+            <div id="list_item_holder${id}" class="list_item_holder">
+                <div class="title${id}">${title}</div>
+                <div class="short_description">${descriptions[0]}</div>
+            </div>
+            <div id="arrow${id}" class="arrow">&#9660</div>
+            </div>
+            <!-- Rozšírené malé zobrazenie -->
+            <div id="listExpand${id}" class="listHide">
+                <img src="${image_urls[1]}" alt="#" class="obrazok_big">
+                <div class="text_small">${descriptions[1]}</div>
+                <div class="sensors_small">
+                </div>
+                <div class="info_small"></div>
+            </div>
+            <!-- Veľké zobrazenie -->
+            <div id="big${id}" class="big">
+                <div class="imgBig"><img class="wsImg" src="${image_urls[1]}" alt="#"></div>
+                <div class="text_big">${descriptions[1]}</div>
+                <div class="sensors_big">
+                </div>
+                <div class="info_big"></div>
+            </div>`;
+    
+        $("body").append(template);
+
+        $.get(`${base_url}${id}/sensors`, function(data1) {
+            Object.keys(data1).forEach(function(key) {
+                let value = data1[key];
+                if (key.startsWith("[translate]-")) {
+                    key = key.slice(12, key.length);
+                }
+                $(".sensors_small").append(`<p class="sens_style_heat">${key}: ${value}</p>`);
+                $(".sensors_big").append(`<p class="sens_style_heat">${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");
+            id.a();
+        });
+
+        $(".list_item_holder").click(function() {
+            let id = this.id;
+            id = id.slice(id.length-1, id.length);
+            
+            clear_big_display();
+            $(`#big${id}`).show();
+        });
+    
+    }
+
+    function clear_big_display(){
+        ids_list.forEach(function(id) {
+            $(`#big${id}`).hide();
+        });
+    }
+
+    function init_wesite() {
+        $.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]);
+            }
+     
+        })
+    }
+})

website/filesystem.json

@@ -0,0 +1,22 @@
+{
+  "ID": "0",
+  "location": "izba",
+  "description": {
+    "title": "legionrpi",
+    "description_s": "krátky popis, ktorý bude zobrazený iba v náhladovom okne",
+    "description_l": "dlhší popis zariadenia, ktorý bude zobrazený po otvorení",
+    "photo_s": "mala_fotka.png",
+    "photo_b": "velka fotka.png"
+  },
+  "files": [
+    {
+      "name": "test",
+      "format": ".jpg",
+      "description": "toto je jpg test file"
+    }, {
+      "name": "test2",
+      "format": ".txt",
+      "description": "toto je txt test file"
+    }
+  ]
+}

website/fuckme.json

@@ -0,0 +1,7 @@
+[
+    {
+        "id": "1",
+        "location": "izba",
+        "desc": "hey"
+    }
+]

website/ip.txt

@@ -0,0 +1 @@
+127.0.0.1

website/marathon.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Race Register Form</title>
+</head>
+<body>
+    <h1>Race Registration!</h1>
+    <form action="reg">
+        <div>
+        <label for="first">First Name</label>
+        <input type="text" name="first" id="first">
+        <label for="last">Last Name</label>
+        <input type="text" name="last" id="last">
+        </div>
+        <p>Select a Race:</p>
+        <div>
+            <input type="radio" name="run" id="5k">
+            <label for="5k">Fun Run 5k</label>
+        </div>
+        <div>
+            <input type="radio" name="run" id="half">
+            <label for="half">Half Marathon</label>
+        </div>
+        <div>
+            <input type="radio" name="run" id="full">
+            <label for="full">Full Marathon</label>
+        </div>
+        <div>
+            <label for="mail">Email</label>
+            <input type="email" name="mail" id="mail">
+            <label for="pass">Password</label>
+            <input type="password" name="pass" id="pass">
+        </div>
+        <div>
+            <label for="age">Select Age Group</label>
+            <select name="age" id="age">
+                <option value="<18">under 18</option>
+                <option value="18-30">18-30</option>
+                <option value="30-50">30-50</option>
+                <option value="50+">50+</option>
+            </select>
+        </div>
+        <div>
+            <button>Register!</button>
+        </div>
+    </form>
+</body>
+</html>

website/navbarclick.js

@@ -0,0 +1,5 @@
+const object = { name: "John Smith" };
+const json = JSON.stringify(object);  // {"name":"John Smith"}
+console.log(json);
+const unquoted = json.replace(/"([^"]+)":/g, '$1:');
+console.log(unquoted);  // {name:"John Smith"}

website/navigacia.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="navigacia.css">
+    <title>Navigácia</title>
+</head>
+<body>
+    
+</body>
+</html>

website/people.json

@@ -0,0 +1,24 @@
+[
+    {
+        "id": "1",
+        "firstName": "John",
+        "lastName": "Doe"
+    },
+    {
+        "id": "2",
+        "firstName": "Mary",
+        "lastName": "Peterson"
+    },
+    {
+        "id": "3",
+        "firstName": "George",
+        "lastName": "Hansen"
+    }
+]
+var mainContainer = document.getElementById("myData");
+                    var div = document.createElement("div");
+                    div.innerHTML = escape(data[1]["description"]["description_s"] + "<br>");
+                    Kql = unescape(data[1]["description"]["description_s"]);
+
+                    mainContainer.appendChild(div);
+                }

website/sensors.js

@@ -0,0 +1,13 @@
+fetch("http://192.168.1.105:8000/docs#/default/update_sensors_update_sensor_post")
+            .then(function(response1){
+                return response.json();          
+            })
+            .then(function(data1){
+                appendData(data1);
+            })
+            .catch(function(err1){
+
+            });
+            function appendChild(data1){
+                
+            }

website/test.txt

@@ -0,0 +1 @@
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Error placeat optio facere nobis, ex tempore aut illo ipsum modi deserunt doloremque, harum ad ipsa perferendis assumenda cum magni perspiciatis delectus.

website/title.js

@@ -0,0 +1,26 @@
+fetch("http://192.168.1.105:8000/devices_list")
+            .then(function(response){
+                return response.json();          
+            })
+            .then(function(data){
+                appendData(data);
+            })
+            .catch(function(err){
+
+            });
+            function appendData(data){
+                console.log(data);
+                console.log(data[1]["files"][0]);
+                var myJson1 = JSON.stringify(data[1]["description"]["title"]);
+                var uJson1 =  myJson1.replace(/\"/g, "");
+                var str1 = (uJson1);
+                var str_esc1 = escape(str1);
+                console.log(str_esc1 + "<br>");
+                console.log(unescape(str_esc1));
+                var mainContainer = document.getElementById("myTitle");
+                    var div1 = document.createElement("p");
+                    div.setAttribute("id", "titleData")
+                    div.innerHTML = unescape(str_esc1);
+
+                    mainContainer.appendChild(div1);
+                }

websites/WikiSpotCon.html

@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html lang="sk">
-<head>
-    <title>WikiSpot</title>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <link rel="stylesheet" href="WikiSpotCSS.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="appjs.js"></script>
-</head>
-<body>
-    <header>
-        <nav>
-            <!-- Navigačná lišta /veľká obrazovka/ -->
-            <ul class="list">
-                <img src="wikispot-white.png" alt="" class="itemImg">
-                <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 = 'WikiSpotPro.html'">O PROJEKTE</li>
-                <li class="item" onclick="location.href = 'WikiSpotCon.html'">KONTAKT</li>
-                <div class="burger" onclick="bmenu()">&#9776</div>
-            </ul>
-            <!-- Navigačná lisťa /malá obrazovka/ -->
-            <ul class="burgerList" id="bonger">
-                <li class="bItem">DOMOV</li>
-                <li class="bItem">WIKISPOT</li>
-                <li class="bItem">O PROJEKTE</li>
-                <li class="bItem">KONTAKT</li>
-            </ul>
-        </nav>
-    </header>
-</body>
-</html>

websites/WikiSpotLoc.html

@@ -1,158 +0,0 @@
-<!DOCTYPE html>
-<html lang="sk">
-<head>
-    <title>WikiSpot</title>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <link rel="stylesheet" href="WikiSpotLoc.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="desc_short.js"></script>
-    <script src="click1.js"></script>
-    <script src="sensors.js"></script>
-</head>
-<body>
-    <header>
-        <img src="wikispot-white.png" alt="wikispot" id="logo" usemap="#navhome">
-        <map name="navhome">
-            <area shape="rect" coords="20, 15, 255, 100" href="http://www.spspb.sk/kontakt.html?page_id=91" alt="home">
-        </map>
-        <nav>
-            <ul id="container">
-                <li id="home" onclick="location.href = 'WikiSpot.html';"><a href="WikiSpot.html">DOMOV</a></li>
-                <li id="about" onclick="location.href = 'WikiSpotLoc.html';"><a href="WikiSpotLoc.html">WIKISPOT</a></li>
-                <li id="project" onclick="location.href = 'WikiSpotPro.html';"><a href="WikiSpotPro.html">O PROJEKTE</a></li>
-                <li id="contact" onclick="location.href = 'http://www.spspb.sk/kontakt.html?page_id=91';"><a href="http://www.spspb.sk/kontakt.html?page_id=91">KONTAKT</a></li>
-            </ul>
-            <div class="nav">
-                <label for="check" id="bmenu">&#9776</label>
-                <input type="checkbox" id="check">  
-                <table class="menu">
-                    <tr><td><a href="WikiSpot.html" class="expandable">DOMOV</a></td></tr>
-                    <tr><td><a href="WikiSpotLoc.html" class="expandable">WIKISPOT</a></td></tr>
-                    <tr><td><a href="WikiSpotPro.html" class="expandable">PROJEKT</a></td></tr>
-                    <tr><td><a href="#" class="expandable">KOTAKT</a></td></tr>
-                </table>
-            </div>
-        </nav>
-    </header>
-    <!--Device select-->
-    <input type="radio" id="checkExp1" name="pick" class="pickNone">
-    <input type="radio" id="checkExp2" name="pick" class="pickNone">
-    <!--1st device-->
-    <label for="checkExp1">
-        <section id="wsData1">
-            <div id="wsBackGround1" class="round_s"></div>
-            <section id="myData"></section>
-            <section id="myTitle"></section>
-            <div id="imgData1">
-                <img src="http://192.168.1.105:8000/files/0/library.jpg" alt="wsimage1" style="width: 100px; height: 100px;">
-            </div>
-            <input type="checkbox" id="checkDesc1" class="none">
-            <label for="checkDesc1" id="descIcon1" onclick="lul1()"><div id="fuckme1">&#9660</div></label>
-            <div id="dataExpand1"></div>
-        </section>
-    </label>
-    <section id="wsData1Exp" class="round">
-        <article id="wsData1desc_l">
-            <div id="desc_l1"></div>
-        </article>
-        <article>
-            <img src="http://192.168.1.105:8000/files/0/library.jpg" alt="wsData1img" id="wsData1img" style="height: 300px; width: 500px;">
-        </article>
-    </section>
-    <!--2nd device-->
-    <label for="checkExp2">
-        <section id="wsData2">
-            <div id="wsBackGround2" class="round_s"></div>
-            <section id="myData2"></section>
-            <section id="myTitle2"></section>
-            <div id="imgData2">
-                <img src="http://192.168.1.105:8000/files/0/test.jpg" alt="wsimage2" style="width: 100px; height: 100px;">
-            </div>
-            <label for="checkDesc2" id="descIcon2" onclick="lul2()"><div id="fuckme2">&#9660</div></label>
-            <input type="checkbox" id="checkDesc2" class="none">
-            <div id="dataExpand2" class="round_s"></div>
-        </section>
-    </label>
-    <section id="wsData2Exp" class="round">
-        <article id="wsData2desc_l">
-            <div id="desc_l2"></div>
-        </article>
-        <article>
-            <img src="http://192.168.1.105:8000/files/0/test.jpg" alt="wsData2img" id="wsData2img" style="height: 300px; width: 500px;">
-        </article>
-    </section>
-</body>
-</html>
-<!--3rd device-->
-<label for="checkExp3">
-    <section id="wsData3">
-        <div id="wsBackGround3" class="round_s"></div>
-        <section id="myData3"></section>
-        <section id="myTitle3"></section>
-        <div id="imgData3">
-            <img src="http://192.168.1.105:8000/files/0/test.jpg" alt="wsimage3" style="width: 100px; height: 100px;">
-        </div>
-        <label for="checkDesc3" id="descIcon3" onclick="lul2()"><div id="fuckme3">&#9660</div></label>
-        <input type="checkbox" id="checkDesc3" class="none">
-        <div id="dataExpand3"></div>
-    </section>
-</label>
-<section id="wsData3Exp" class="round">
-    <article id="wsData3desc_l">
-        <div id="desc_l3"></div>
-    </article>
-    <article>
-        <img src="http://192.168.1.105:8000/files/0/test.jpg" alt="wsData3img" id="wsData3img" style="height: 300px; width: 500px;">
-    </article>
-</section>
-</body>
-</html>
-<!--4th device-->
-<label for="checkExp4">
-    <section id="wsData4">
-        <div id="wsBackGround4" class="round_s"></div>
-        <section id="myData4"></section>
-        <section id="myTitle4"></section>
-        <div id="imgData4">
-            <img src="http://192.168.1.105:8000/files/0/test.jpg" alt="wsimage4" style="width: 100px; height: 100px;">
-        </div>
-        <label for="checkDesc4" id="descIcon4" onclick="lul4()"><div id="fuckme4">&#9660</div></label>
-        <input type="checkbox" id="checkDesc4" class="none">
-        <div id="dataExpand4"></div>
-    </section>
-</label>
-<section id="wsData4Exp" class="round">
-    <article id="wsData4desc_l">
-        <div id="desc_l4"></div>
-    </article>
-    <article>
-        <img src="http://192.168.1.105:8000/files/0/test.jpg" alt="wsData4img" id="wsData4img" style="height: 300px; width: 500px;">
-    </article>
-</section>
-</body>
-</html>
-<!--5th device-->
-<label for="checkExp5">
-    <section id="wsData5">
-        <div id="wsBackGround5" class="round_s"></div>
-        <section id="myData5"></section>
-        <section id="myTitle5"></section>
-        <div id="imgData5">
-            <img src="http://192.168.1.105:8000/files/0/test.jpg" alt="wsimage5" style="width: 100px; height: 100px;">
-        </div>
-        <label for="checkDesc5" id="descIcon5" onclick="lul5()"><div id="fuckme5">&#9660</div></label>
-        <input type="checkbox" id="checkDesc5">
-        <div id="dataExpand5"></div>
-    </section>
-</label>
-<section id="wsData5Exp" class="round">
-    <article id="wsData5desc_l">
-        <div id="desc_l5"></div>
-    </article>
-    <article>
-        <img src="http://192.168.1.105:8000/files/0/test.jpg" alt="wsData5img" id="wsData5img" style="height: 300px; width: 500px;">
-    </article>
-</section>
-</body>
-</html>

websites/WikiSpotPro.html

@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html lang="sk">
-<head>
-    <title>WikiSpot</title>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <link rel="stylesheet" href="WikiSpotCSS.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="appjs.js"></script>
-</head>
-<body>
-    <header>
-        <nav>
-            <!-- Navigačná lišta /veľká obrazovka/ -->
-            <ul class="list">
-                <img src="wikispot-white.png" alt="" class="itemImg">
-                <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 = 'WikiSpotPro.html'">O PROJEKTE</li>
-                <li class="item" onclick="location.href = 'WikiSpotCon.html'">KONTAKT</li>
-                <div class="burger" onclick="bmenu()">&#9776</div>
-            </ul>
-            <!-- Navigačná lisťa /malá obrazovka/ -->
-            <ul class="burgerList" id="bonger">
-                <li class="bItem">DOMOV</li>
-                <li class="bItem">WIKISPOT</li>
-                <li class="bItem">O PROJEKTE</li>
-                <li class="bItem">KONTAKT</li>
-            </ul>
-        </nav>
-    </header>
-</body>
-</html>

websites/WikiSpotWS.html

@@ -1,146 +0,0 @@
-<!DOCTYPE html>
-<html lang="sk">
-<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">
-    <link rel="stylesheet" href="app.css">
-    <title>Flextest</title>
-    <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>
-    <nav>
-        <!-- Navigačná lišta /veľká obrazovka/ -->
-        <ul class="list">
-            <img src="wikispot-white.png" alt="" class="itemImg">
-            <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 = 'WikiSpotPro.html'">O PROJEKTE</li>
-            <li class="item" onclick="location.href = 'WikiSpotCon.html'">KONTAKT</li>
-            <div class="burger" onclick="bmenu()">&#9776</div>
-        </ul>
-        <!-- Navigačná lisťa /malá obrazovka/ -->
-        <ul class="burgerList" id="bonger">
-            <li class="bItem">DOMOV</li>
-            <li class="bItem">WIKISPOT</li>
-            <li class="bItem">O PROJEKTE</li>
-            <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>
-</html>

websites/desc_short.js

@@ -1,118 +0,0 @@
-// 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 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>
-        </div>
-        <div id="arrow${n}" class="arrow" onclick="onclick${n}()">&#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>
-        <div class="info"></div>
-    </div>
-    <!-- Veľké zobrazenie -->
-    <div class="big">
-        <img class="obrazok" src="${urls[2]}" 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) {
-        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);
-})
-    })
-    
-})