Set new Base version
git
commit
a7d8bf9ac5
|
|
@ -0,0 +1,2 @@
|
|||
# Created by .ignore support plugin (hsz.mobi)
|
||||
/.idea/
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
# PiSwitch_frontend
|
||||
A Frontend for the [PiSwitch](https://git.dennisvandermeulen.nl/dennis/PiSwitch) and [PiSwitch_Reporting](https://git.dennisvandermeulen.nl/dennis/PiSwitch_reporting)
|
||||
|
||||
## Installation Process
|
||||
|
||||
Clone the repository
|
||||
```shell
|
||||
git clone https://git.dennisvandermeulen.nl/dennis/PiSwitch_frontend.git
|
||||
```
|
||||
|
||||
## Setup
|
||||
Go to the js asset file folder
|
||||
````shell
|
||||
cd PiSwitch_frontend/assets/js/
|
||||
````
|
||||
Set the values in pagefunctions.js
|
||||
```shell
|
||||
nano pagefunctions.js
|
||||
```
|
||||
Set the key and the url of the [PiSwitch reporting server](https://git.dennisvandermeulen.nl/dennis/PiSwitch_reporting)
|
||||
````javascript
|
||||
var apiurl = ''
|
||||
var srvkey = ''
|
||||
````
|
||||
Set the key and the url of the [PiSwitch](https://git.dennisvandermeulen.nl/dennis/PiSwitch) for this dashboard instance
|
||||
```javascript
|
||||
var deviceurl = ''
|
||||
var deviceid =
|
||||
```
|
||||
Set de mapquest api key in locationpicker.js
|
||||
```shell
|
||||
nano locationpicker.js
|
||||
```
|
||||
Set your mapquest key
|
||||
```javascript
|
||||
L.mapquest.key = '';
|
||||
```
|
||||
|
||||
## Docker
|
||||
Ensure you built the [PiSwitch reporting server](https://git.dennisvandermeulen.nl/dennis/PiSwitch_reporting) dockerfile
|
||||
|
||||
Use the included Docker-Compose files to start the nginx server
|
||||
````shell
|
||||
docker-compose . -up -d
|
||||
````
|
||||
|
||||
Visit your dashboard at:
|
||||
````shell
|
||||
http://your-ip-or-hostname:81/index.html
|
||||
````
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
version: "3.7"
|
||||
services:
|
||||
|
||||
web:
|
||||
container_name: nginx
|
||||
restart: unless-stopped
|
||||
image: nginx:alpine
|
||||
ports:
|
||||
- 81:80
|
||||
depends_on:
|
||||
- api
|
||||
volumes:
|
||||
- ./src:/usr/share/nginx/html
|
||||
networks:
|
||||
- piswitch-network
|
||||
|
||||
api:
|
||||
container_name: raspapi
|
||||
image: appserver/raspapi
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- 5000:5000
|
||||
tty: true
|
||||
working_dir: /code/src/
|
||||
networks:
|
||||
- piswitch-network
|
||||
|
||||
networks:
|
||||
piswitch-network:
|
||||
driver: bridge
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
server {
|
||||
listen 80;
|
||||
index index.html;
|
||||
error_log /var/log/nginx/error.log;
|
||||
access_log /var/log/nginx/access.log;
|
||||
root /var/www/;
|
||||
location / {
|
||||
try_files $uri $uri/ /index.php?$query_string;
|
||||
gzip_static on;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,250 @@
|
|||
body {
|
||||
margin: 0;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Roboto', 'sans-serif';
|
||||
color: white;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: 'Roboto', 'sans-serif';
|
||||
color: white;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-family: 'Roboto', 'sans-serif';
|
||||
color: white;
|
||||
margin-top: 10px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.onethird {
|
||||
width: 34%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.twothird {
|
||||
width: 66%;
|
||||
|
||||
}
|
||||
|
||||
.fullwide {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.leftaligned {
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rightaligned {
|
||||
float: right;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#background {
|
||||
background-image: url("../img/background.svg");
|
||||
background-size: 100%, 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: -99;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.flexparent_row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.flexparent_column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.flex_center_top {
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.flex_center {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.flex_center_left {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.flexitem {
|
||||
|
||||
}
|
||||
|
||||
.flexbtn {
|
||||
position: relative;
|
||||
background-color: #333333;
|
||||
margin: 15px;
|
||||
border-radius: 25px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
min-width: 300px;
|
||||
min-height: 300px;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.onewide {
|
||||
min-width: 1130px;
|
||||
max-width: 1130px;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.twowide {
|
||||
min-width: 545px;
|
||||
max-width: 545px;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.threewide {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
#container{
|
||||
max-width: 1200px;
|
||||
position: relative;
|
||||
background-color: #222222;
|
||||
margin: 25px;
|
||||
border-radius: 25px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.flexbtn:hover {
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
.centeredtext {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.spanfull {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/** edge colors for buttons **/
|
||||
|
||||
.goldedgecolor {
|
||||
border: 5px solid #ffd700;
|
||||
}
|
||||
|
||||
.blueedgecolor {
|
||||
border: 5px solid blue;
|
||||
}
|
||||
|
||||
.blackedgecolor {
|
||||
border: 5px solid black;
|
||||
}
|
||||
|
||||
.whiteedgecolor {
|
||||
border: 5px solid white;
|
||||
}
|
||||
|
||||
.greyedgecolor {
|
||||
border: 5px solid #444444;
|
||||
}
|
||||
|
||||
.greenedgecolor {
|
||||
border: 5px solid green;
|
||||
}
|
||||
|
||||
.rededgecolor {
|
||||
border: 5px solid red;
|
||||
}
|
||||
|
||||
/** form **/
|
||||
input[type=time].form, input[type=text].form, select.form {
|
||||
width: 90%;
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
display: inline-block;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input[type=submit].form {
|
||||
padding: 14px 20px;
|
||||
margin: 8px 10%;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
font-family: 'Roboto', 'sans-serif';
|
||||
color: white;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
input[type=submit]:hover.form {
|
||||
background-color: #001f3f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
label.form {
|
||||
font-family: 'Roboto', 'sans-serif';
|
||||
text-align: center;
|
||||
color: white;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tg {border-collapse:collapse;border-spacing:0;}
|
||||
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
|
||||
overflow:hidden;padding:10px 5px;word-break:normal;}
|
||||
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
|
||||
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
|
||||
.tg .tg-mk6l{background-color:#000000;border-color:#000000;color:#ffffff;text-align:left;vertical-align:top}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" preserveAspectRatio="none" height="100%" width="100%">
|
||||
<style type="text/css">
|
||||
.st0{fill:#323232;}
|
||||
.st1{fill:#2D2D2D;}
|
||||
.st2{fill:#232323;}
|
||||
.st3{fill:#1E1E1E;}
|
||||
.st4{fill:#141414;}
|
||||
.st5{fill:#191919;}
|
||||
.st6{fill:#282828;}
|
||||
.st7{fill:#2A2A2A;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M0,0h54.3c5.4,20.9,10,42.4,14.9,63.6c16.6,74.9,31.8,150.9,45.1,227.7c10.4,59.3,19.4,119.3,28.1,179.5
|
||||
c1.9,13.7,3.2,27.6,5.4,41.1H0V0z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st1" d="M54.3,0h156.9c-5.6,38.6-10.8,77.3-16.7,115.7c-12.2,82.7-24.1,165.5-36.2,248.2c-5.3,35.7-10.2,71.5-15.8,107
|
||||
c-8.6-60.2-17.6-120.2-28.1-179.5c-13.3-77-28.5-152.9-45.1-227.7C64.3,42.4,59.7,20.9,54.3,0z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st2" d="M291.9,512c-19-120.9-47.1-238.7-81.7-348.2c-5-16.3-10.7-31.9-15.8-48.2c6-38.4,11.2-77.1,16.7-115.7h111.2
|
||||
c33.2,98.6,61.2,202.7,83.7,310.4c0.6,3,1.2,6.1,1.8,9.2c13.2,63,23.9,127.4,33.3,192.4h-0.5"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st3" d="M322.5,0h137.1c-1.1,8.9-1.9,17.8-3.1,26.6c-10.9,91.3-25.4,181.2-43.9,268.6c-1.5,8.2-3.9,15.7-4.6,24.4
|
||||
c-0.5-3-1.1-6.2-1.8-9.2C383.7,202.7,355.6,98.6,322.5,0z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st4" d="M459.5,0H512v161.8c-15.3-43.3-31.8-85.2-50.6-123.9c-1.8-3.6-3.5-7.3-5.1-11.2C457.6,17.8,458.4,8.9,459.5,0z
|
||||
"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st5" d="M412.5,295.3c18.5-87.3,33-177.3,43.9-268.6c1.6,3.8,3.3,7.5,5.1,11.2c18.8,38.7,35.4,80.6,50.6,123.9V512
|
||||
h-70.8c-5.7-32.3-11.3-64.5-16.9-96.8c-5.5-31.9-11-63.7-16.4-95.6C408.5,311,410.9,303.3,412.5,295.3z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st6" d="M158.2,363.9c12.2-82.8,24-165.5,36.2-248.2c5,16.3,10.8,31.8,15.8,48.2c34.6,109.4,62.7,227.3,81.7,348.2
|
||||
c36.4,0.3-144.1,0-144.1,0c-2.2-13.5-3.5-27.4-5.4-41.1C148.1,435.5,153,399.5,158.2,363.9z"/>
|
||||
</g>
|
||||
<path class="st7" d="M559.6,403.7"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="140pt" height="140pt" viewBox="0 0 140 140" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="#000000ff">
|
||||
<path fill="#000000" opacity="1.00" d=" M 69.54 0.00 L 70.35 0.00 C 72.44 0.55 74.66 1.13 76.29 2.64 C 78.56 5.15 78.80 8.74 78.78 11.96 C 78.69 28.96 78.81 45.97 78.72 62.97 C 78.99 67.47 75.49 71.74 71.01 72.31 C 66.09 72.99 61.24 68.63 61.32 63.67 C 61.14 46.78 61.34 29.88 61.22 12.99 C 61.21 9.86 61.16 6.50 62.88 3.74 C 64.26 1.41 67.10 0.69 69.54 0.00 Z" />
|
||||
<path fill="#000000" opacity="1.00" d=" M 41.30 19.41 C 46.62 16.98 53.26 21.22 53.36 27.03 C 53.79 31.77 49.69 34.95 45.98 36.94 C 35.54 43.36 27.72 53.99 25.04 65.97 C 21.26 81.74 26.49 99.52 38.76 110.26 C 46.38 117.48 56.63 121.59 67.01 122.48 C 78.22 123.00 89.83 119.71 98.54 112.48 C 112.33 101.87 119.05 82.88 114.89 65.96 C 112.19 53.75 104.08 43.00 93.40 36.59 C 90.77 35.00 87.85 33.28 86.81 30.19 C 84.91 25.54 88.11 19.76 93.01 18.77 C 96.72 17.68 100.08 20.03 103.09 21.85 C 122.69 33.66 134.93 56.70 133.50 79.56 C 132.74 96.41 125.06 113.12 111.95 123.90 C 101.22 133.66 86.96 139.23 72.53 140.00 L 67.63 140.00 C 57.51 139.29 47.41 136.65 38.61 131.52 C 22.83 122.67 11.30 106.66 7.75 88.93 C 1.55 61.73 16.26 31.56 41.30 19.41 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="140pt" height="140pt" viewBox="0 0 140 140" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="#000000ff">
|
||||
<path fill="#0000ff" opacity="1.00" d=" M 69.54 0.00 L 70.35 0.00 C 72.44 0.55 74.66 1.13 76.29 2.64 C 78.56 5.15 78.80 8.74 78.78 11.96 C 78.69 28.96 78.81 45.97 78.72 62.97 C 78.99 67.47 75.49 71.74 71.01 72.31 C 66.09 72.99 61.24 68.63 61.32 63.67 C 61.14 46.78 61.34 29.88 61.22 12.99 C 61.21 9.86 61.16 6.50 62.88 3.74 C 64.26 1.41 67.10 0.69 69.54 0.00 Z" />
|
||||
<path fill="#0000ff" opacity="1.00" d=" M 41.30 19.41 C 46.62 16.98 53.26 21.22 53.36 27.03 C 53.79 31.77 49.69 34.95 45.98 36.94 C 35.54 43.36 27.72 53.99 25.04 65.97 C 21.26 81.74 26.49 99.52 38.76 110.26 C 46.38 117.48 56.63 121.59 67.01 122.48 C 78.22 123.00 89.83 119.71 98.54 112.48 C 112.33 101.87 119.05 82.88 114.89 65.96 C 112.19 53.75 104.08 43.00 93.40 36.59 C 90.77 35.00 87.85 33.28 86.81 30.19 C 84.91 25.54 88.11 19.76 93.01 18.77 C 96.72 17.68 100.08 20.03 103.09 21.85 C 122.69 33.66 134.93 56.70 133.50 79.56 C 132.74 96.41 125.06 113.12 111.95 123.90 C 101.22 133.66 86.96 139.23 72.53 140.00 L 67.63 140.00 C 57.51 139.29 47.41 136.65 38.61 131.52 C 22.83 122.67 11.30 106.66 7.75 88.93 C 1.55 61.73 16.26 31.56 41.30 19.41 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="140pt" height="140pt" viewBox="0 0 140 140" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="#000000ff">
|
||||
<path fill="#FFD700" opacity="1.00" d=" M 69.54 0.00 L 70.35 0.00 C 72.44 0.55 74.66 1.13 76.29 2.64 C 78.56 5.15 78.80 8.74 78.78 11.96 C 78.69 28.96 78.81 45.97 78.72 62.97 C 78.99 67.47 75.49 71.74 71.01 72.31 C 66.09 72.99 61.24 68.63 61.32 63.67 C 61.14 46.78 61.34 29.88 61.22 12.99 C 61.21 9.86 61.16 6.50 62.88 3.74 C 64.26 1.41 67.10 0.69 69.54 0.00 Z" />
|
||||
<path fill="#FFD700" opacity="1.00" d=" M 41.30 19.41 C 46.62 16.98 53.26 21.22 53.36 27.03 C 53.79 31.77 49.69 34.95 45.98 36.94 C 35.54 43.36 27.72 53.99 25.04 65.97 C 21.26 81.74 26.49 99.52 38.76 110.26 C 46.38 117.48 56.63 121.59 67.01 122.48 C 78.22 123.00 89.83 119.71 98.54 112.48 C 112.33 101.87 119.05 82.88 114.89 65.96 C 112.19 53.75 104.08 43.00 93.40 36.59 C 90.77 35.00 87.85 33.28 86.81 30.19 C 84.91 25.54 88.11 19.76 93.01 18.77 C 96.72 17.68 100.08 20.03 103.09 21.85 C 122.69 33.66 134.93 56.70 133.50 79.56 C 132.74 96.41 125.06 113.12 111.95 123.90 C 101.22 133.66 86.96 139.23 72.53 140.00 L 67.63 140.00 C 57.51 139.29 47.41 136.65 38.61 131.52 C 22.83 122.67 11.30 106.66 7.75 88.93 C 1.55 61.73 16.26 31.56 41.30 19.41 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="140pt" height="140pt" viewBox="0 0 140 140" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="#000000ff">
|
||||
<path fill="#008000" opacity="1.00" d=" M 59.26 10.29 C 86.05 6.86 114.25 16.52 133.12 35.89 C 135.25 38.05 135.46 41.56 134.17 44.21 C 132.76 46.34 130.26 47.65 127.76 47.92 C 123.73 47.63 121.10 44.21 118.23 41.80 C 106.71 31.93 92.03 26.03 77.01 24.30 C 57.96 22.50 38.42 28.57 23.43 40.38 C 20.42 42.63 18.10 45.84 14.60 47.37 C 11.62 48.77 8.19 47.02 6.18 44.76 C 4.27 41.91 4.72 37.72 7.29 35.40 C 21.17 21.54 39.78 12.59 59.26 10.29 Z" />
|
||||
<path fill="#008000" opacity="1.00" d=" M 59.46 39.62 C 77.97 36.47 97.63 41.96 112.03 53.97 C 114.59 56.19 117.95 58.34 118.36 62.03 C 119.17 66.26 115.39 70.46 111.12 70.18 C 107.30 70.28 104.97 66.90 102.34 64.71 C 84.33 49.57 55.64 49.58 37.64 64.72 C 35.02 66.92 32.70 70.28 28.90 70.20 C 26.38 69.96 23.87 68.63 22.49 66.48 C 21.03 63.71 21.45 59.98 23.70 57.75 C 33.39 48.25 46.05 41.79 59.46 39.62 Z" />
|
||||
<path fill="#008000" opacity="1.00" d=" M 62.41 68.55 C 75.98 66.06 90.86 70.62 100.32 80.75 C 104.32 84.79 100.78 92.88 95.04 92.53 C 91.65 92.74 89.25 90.04 86.70 88.26 C 79.38 82.45 68.97 80.88 60.26 84.28 C 56.30 85.61 53.06 88.27 49.85 90.85 C 47.01 93.26 42.17 93.19 39.77 90.18 C 37.60 87.58 37.15 83.27 39.67 80.75 C 45.65 74.34 53.83 70.14 62.41 68.55 Z" />
|
||||
<path fill="#008000" opacity="1.00" d=" M 67.43 101.58 C 76.05 99.73 84.98 107.29 84.54 116.10 C 84.71 124.17 77.04 131.23 69.01 130.44 C 61.27 130.12 54.73 122.73 55.47 115.00 C 55.72 108.49 61.01 102.59 67.43 101.58 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="140pt" height="140pt" viewBox="0 0 140 140" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="#000000ff">
|
||||
<path fill="#444444" opacity="1.00" d=" M 69.54 0.00 L 70.35 0.00 C 72.44 0.55 74.66 1.13 76.29 2.64 C 78.56 5.15 78.80 8.74 78.78 11.96 C 78.69 28.96 78.81 45.97 78.72 62.97 C 78.99 67.47 75.49 71.74 71.01 72.31 C 66.09 72.99 61.24 68.63 61.32 63.67 C 61.14 46.78 61.34 29.88 61.22 12.99 C 61.21 9.86 61.16 6.50 62.88 3.74 C 64.26 1.41 67.10 0.69 69.54 0.00 Z" />
|
||||
<path fill="#444444" opacity="1.00" d=" M 41.30 19.41 C 46.62 16.98 53.26 21.22 53.36 27.03 C 53.79 31.77 49.69 34.95 45.98 36.94 C 35.54 43.36 27.72 53.99 25.04 65.97 C 21.26 81.74 26.49 99.52 38.76 110.26 C 46.38 117.48 56.63 121.59 67.01 122.48 C 78.22 123.00 89.83 119.71 98.54 112.48 C 112.33 101.87 119.05 82.88 114.89 65.96 C 112.19 53.75 104.08 43.00 93.40 36.59 C 90.77 35.00 87.85 33.28 86.81 30.19 C 84.91 25.54 88.11 19.76 93.01 18.77 C 96.72 17.68 100.08 20.03 103.09 21.85 C 122.69 33.66 134.93 56.70 133.50 79.56 C 132.74 96.41 125.06 113.12 111.95 123.90 C 101.22 133.66 86.96 139.23 72.53 140.00 L 67.63 140.00 C 57.51 139.29 47.41 136.65 38.61 131.52 C 22.83 122.67 11.30 106.66 7.75 88.93 C 1.55 61.73 16.26 31.56 41.30 19.41 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,13 @@
|
|||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="140pt" height="140pt" viewBox="0 0 140 140" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="#000000ff">
|
||||
<path fill="#FF0000" opacity="1.00" d=" M 124.19 0.00 L 126.35 0.00 C 130.52 0.92 132.95 6.44 129.68 9.65 C 93.27 51.94 56.76 94.15 20.36 136.44 C 19.16 137.85 17.72 139.01 16.16 140.00 L 12.94 140.00 C 8.56 138.67 7.32 132.71 10.68 129.66 C 46.21 88.51 81.79 47.41 117.31 6.25 C 119.38 3.95 121.18 1.14 124.19 0.00 Z" />
|
||||
<path fill="#FF0000" opacity="1.00" d=" M 56.55 12.78 C 65.67 11.48 75.05 11.30 84.12 13.02 C 86.64 13.35 88.89 15.31 89.14 17.91 C 89.88 21.07 87.01 24.21 83.91 24.44 C 81.61 24.60 79.37 23.93 77.11 23.68 C 56.62 21.44 35.69 28.78 20.14 42.08 C 17.39 44.49 14.28 48.50 10.13 46.76 C 6.43 45.63 5.20 40.67 7.74 37.82 C 20.68 24.41 38.10 15.47 56.55 12.78 Z" />
|
||||
<path fill="#FF0000" opacity="1.00" d=" M 123.32 35.41 C 127.98 32.20 134.86 37.79 133.20 43.02 C 132.57 45.34 130.26 46.98 127.90 47.15 C 122.19 47.34 117.86 38.93 123.32 35.41 Z" />
|
||||
<path fill="#FF0000" opacity="1.00" d=" M 55.47 42.56 C 60.05 40.14 65.89 45.32 63.71 50.05 C 62.74 52.82 59.65 53.59 57.13 54.26 C 48.49 56.30 40.46 60.72 34.08 66.87 C 32.04 68.88 28.87 70.61 26.09 68.96 C 22.59 67.43 21.84 62.22 24.67 59.71 C 32.98 51.17 43.89 45.28 55.47 42.56 Z" />
|
||||
<path fill="#FF0000" opacity="1.00" d=" M 107.46 55.48 C 110.96 54.81 113.73 57.86 115.79 60.26 C 118.30 63.20 116.58 68.17 112.90 69.19 C 109.09 70.47 105.87 67.11 103.73 64.39 C 101.22 61.19 103.48 56.02 107.46 55.48 Z" />
|
||||
<path fill="#FF0000" opacity="1.00" d=" M 87.23 77.32 C 91.76 74.67 96.00 79.13 98.95 82.14 C 102.06 85.11 100.22 91.07 95.98 91.71 C 92.16 92.70 89.65 89.07 86.98 87.06 C 83.59 84.84 83.63 79.31 87.23 77.32 Z" />
|
||||
<path fill="#FF0000" opacity="1.00" d=" M 67.12 105.36 C 74.23 103.25 82.12 109.49 81.61 116.91 C 81.74 123.40 75.45 129.05 69.01 128.27 C 62.33 127.95 57.09 120.97 58.55 114.45 C 59.32 110.09 62.84 106.41 67.12 105.36 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -0,0 +1,19 @@
|
|||
$(document).ready(function () {
|
||||
$('form').submit(function (e) {
|
||||
e.preventDefault();
|
||||
var form = $(this);
|
||||
$.ajax({
|
||||
type: form.attr('method'),
|
||||
url: form.attr('action'),
|
||||
data: form.serialize(),
|
||||
success: function (data) {
|
||||
console.log('Submission was successful.');
|
||||
console.log(form.data());
|
||||
},
|
||||
error: function (data) {
|
||||
console.log('An error occurred.');
|
||||
console.log(form.data());
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
function createmap(lat, lon) {
|
||||
if (switchstatus == 0) {
|
||||
color = '#333333'
|
||||
} else if (switchstatus == 1) {
|
||||
color = '#ffd700'
|
||||
}
|
||||
|
||||
L.mapquest.key = '';
|
||||
|
||||
var map = L.mapquest.map('map', {
|
||||
center: [lat, lon],
|
||||
layers: L.mapquest.tileLayer('dark'),
|
||||
zoom: 14
|
||||
}).on('click', function (e) {
|
||||
addMarker(e);
|
||||
});
|
||||
var locmarker = L.mapquest.textMarker([lat, lon], {
|
||||
|
||||
type: 'marker',
|
||||
icon: {
|
||||
primaryColor: '#333333',
|
||||
secondaryColor: color,
|
||||
size: 'sm'
|
||||
}
|
||||
}).addTo(map);
|
||||
|
||||
function addMarker(e) {
|
||||
updatelocform(e.latlng.wrap())
|
||||
locmarker.setLatLng(e.latlng)
|
||||
}
|
||||
|
||||
function updatelocform(ll) {
|
||||
document.getElementById('loc_lat').setAttribute('value', ll.lat)
|
||||
document.getElementById('loc_lon').setAttribute('value', ll.lng)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
// Filled in by database
|
||||
var switchstatus = 0
|
||||
var astralstatus = 0
|
||||
var connstatus = 0
|
||||
var lastupdate = 0
|
||||
var devicekey = 0
|
||||
|
||||
// Fill in manually
|
||||
var apiurl = ''
|
||||
var srvkey = ''
|
||||
var deviceurl = ''
|
||||
var deviceid =
|
||||
|
||||
|
||||
setInterval(getstatus, 1000);
|
||||
|
||||
function getstatus_init() {
|
||||
var request = new XMLHttpRequest();
|
||||
request.onreadystatechange = function () {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
var response = JSON.parse(request.responseText)
|
||||
setswitchstatus(response)
|
||||
setastralstatus(response)
|
||||
setconnstatus(response)
|
||||
setpagevars(response)
|
||||
createmap(response.loc_lat, response.loc_lon);
|
||||
retrievelogs()
|
||||
}
|
||||
}
|
||||
request.open('POST', apiurl+'/fullstatus?id=1&apikey='+srvkey, true);
|
||||
request.send();
|
||||
}
|
||||
|
||||
function getstatus() {
|
||||
var request = new XMLHttpRequest();
|
||||
request.onreadystatechange = function () {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
var response = JSON.parse(request.responseText)
|
||||
setswitchstatus(response)
|
||||
setastralstatus(response)
|
||||
setconnstatus(response)
|
||||
}
|
||||
}
|
||||
request.open('POST', apiurl+'/fullstatus?id=1&apikey='+srvkey, true);
|
||||
request.send();
|
||||
}
|
||||
|
||||
function updatelocation() {
|
||||
var request = new XMLHttpRequest();
|
||||
request.onreadystatechange = function () {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
var response = JSON.parse(request.responseText)
|
||||
setpagevars(response)
|
||||
}
|
||||
}
|
||||
request.open('POST', apiurl+'/fullstatus?id=1&apikey=apikey='+srvkey, true);
|
||||
request.send();
|
||||
}
|
||||
|
||||
function setswitchstatus(response) {
|
||||
var elements = document.getElementsByClassName('switchedgecolor')
|
||||
var button = document.getElementById('switchbtn')
|
||||
if (response.switch_status == 1) {
|
||||
changeedgecolor('gold', button, elements)
|
||||
switchstatus = 1
|
||||
} else if (response.switch_status == 0) {
|
||||
changeedgecolor('grey', button, elements)
|
||||
switchstatus = 0
|
||||
}
|
||||
}
|
||||
|
||||
function setastralstatus(response) {
|
||||
var elements = document.getElementsByClassName('astraledgecolor')
|
||||
var button = document.getElementById('astralbtn')
|
||||
if (response.astral_status == 1) {
|
||||
changeedgecolor('blue', button, elements)
|
||||
astralstatus = 1
|
||||
} else if (response.astral_status == 0) {
|
||||
changeedgecolor('grey', button, elements)
|
||||
astralstatus = 0
|
||||
}
|
||||
}
|
||||
|
||||
function setconnstatus(response) {
|
||||
var elements = document.getElementsByClassName('connedgecolor')
|
||||
var button = document.getElementById('connbtn')
|
||||
if (response.conn_status == 1) {
|
||||
changeedgecolor('green', button, elements)
|
||||
connstatus = 1
|
||||
} else if (response.conn_status == 0) {
|
||||
changeedgecolor('red', button, elements)
|
||||
connstatus = 0
|
||||
}
|
||||
}
|
||||
|
||||
function setpagevars(response) {
|
||||
document.getElementById('subtitle').innerHTML = "Last update: " + response.last_updated
|
||||
document.getElementById('pagetitle').innerHTML = "PiSwitch Dashboard " + response.switch_name
|
||||
document.getElementById('turnontime').setAttribute('value', response.on_time)
|
||||
document.getElementById('turnofftime').setAttribute('value', response.off_time)
|
||||
document.getElementById('loc_name').setAttribute('value', response.loc_name)
|
||||
document.getElementById('loc_region').setAttribute('value', response.loc_region)
|
||||
document.getElementById('loc_lat').setAttribute('value', response.loc_lat)
|
||||
document.getElementById('loc_lon').setAttribute('value', response.loc_lon)
|
||||
devicekey = response.apikey
|
||||
|
||||
var elements = document.getElementsByClassName('srvkey')
|
||||
for (var i = 0, len = elements.length; i < len; i++) {
|
||||
elements[i].setAttribute('value', srvkey)
|
||||
}
|
||||
}
|
||||
|
||||
function toggleswitch() {
|
||||
var request = new XMLHttpRequest();
|
||||
request.open('POST', deviceurl+deviceid+'/override?apikey='+devicekey, true);
|
||||
request.send();
|
||||
}
|
||||
|
||||
function retrievelogs() {
|
||||
var request = new XMLHttpRequest();
|
||||
request.onreadystatechange = function () {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
var response = JSON.parse(request.responseText)
|
||||
logtable(response)
|
||||
}
|
||||
}
|
||||
request.open('GET', apiurl+'/cmd?id=1&apikey='+srvkey, true);
|
||||
request.send();
|
||||
|
||||
}
|
||||
|
||||
function toggleastral() {
|
||||
if (astralstatus == 0) {
|
||||
var request = new XMLHttpRequest();
|
||||
request.open('POST', deviceurl+deviceid+'/toggleastral?command=1&apikey='+devicekey, true);
|
||||
request.send();
|
||||
} else if (astralstatus == 1) {
|
||||
var request = new XMLHttpRequest();
|
||||
request.open('POST', deviceurl+deviceid+'/toggleastral?command=0&apikey='+devicekey, true);
|
||||
request.send();
|
||||
}
|
||||
}
|
||||
|
||||
function changeedgecolor(color, button, elements) {
|
||||
for (var i = 0, len = elements.length; i < len; i++) {
|
||||
elements[i].classList.add('class', color + 'edgecolor')
|
||||
if (color != 'grey') {
|
||||
elements[i].classList.remove('class', 'greyedgecolor')
|
||||
}
|
||||
button.src = 'assets/img/power-button-' + color + '.svg'
|
||||
}
|
||||
}
|
||||
|
||||
// function logtable(response) {
|
||||
// for (i = 0; i < Object.keys(response).length; i++) {
|
||||
// var tablecontent = tablecontent + '<tr><td class="tg-mk6l">' + response[i]['date'] + '</td><td class="tg-mk6l">' + response[i]['command'] + '</td></tr>';
|
||||
// }
|
||||
// document.getElementById('log').innerHTML = tablecontent;
|
||||
// }
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title> PiSwitch Dashboard</title>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="assets/js/pagefunctions.js"></script>
|
||||
<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>
|
||||
<script type="text/javascript" src="assets/js/locationpicker.js"></script>
|
||||
<script type="text/javascript" src="assets/js/forms.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="assets/css/style.css">
|
||||
|
||||
<body onload="getstatus_init();">
|
||||
<div id="background"></div>
|
||||
<div id="content" class="flexparent_row flex_center_top">
|
||||
<div id="container" class="flexparent_row flex_center_top switchedgecolor">
|
||||
<h1 id="pagetitle" class="centeredtext"></h1>
|
||||
<h2 id="subtitle" class="centeredtext"></h2>
|
||||
|
||||
<div id="switchdiv" class="flexbtn switchedgecolor threewide">
|
||||
<img id="switchbtn" src="assets/img/power-button-grey.svg" class="imgbtn" width="150" height="150"
|
||||
alt="powerbtn" onclick="toggleswitch();">
|
||||
</div>
|
||||
|
||||
<div id="astraldiv" class="flexbtn astraledgecolor threewide">
|
||||
<img id="astralbtn" src="assets/img/power-button-grey.svg" class="imgbtn" width="150" height="150"
|
||||
alt="astralbtn" onclick="toggleastral();">
|
||||
</div>
|
||||
|
||||
<div id="conndiv" class="flexbtn connedgecolor threewide">
|
||||
<img id="connbtn" src="assets/img/power-button-red.svg" class="imgbtn" width="150" height="150"
|
||||
alt="connbtn">
|
||||
</div>
|
||||
|
||||
<div id="locationdiv" class="flexbtn astraledgecolor onewide">
|
||||
<div class="fullwide">
|
||||
<div class="onethird leftaligned">
|
||||
<form id="locationform" action="https://api.dennisvandermeulen.nl/raspapi/updatelocation"
|
||||
method="post">
|
||||
<label class="form">Location Name
|
||||
<input type="text" id="loc_name" name="loc_name" class="form astraledgecolor" required>
|
||||
</label>
|
||||
<label class="form">Region Name
|
||||
<input type="text" id="loc_region" name="loc_region" class="form astraledgecolor" required>
|
||||
</label>
|
||||
<input type="hidden" name="id" value="1">
|
||||
<input type="hidden" id="loc_lat" name="loc_lat" required>
|
||||
<input type="hidden" id="loc_lon" name="loc_lon" required>
|
||||
<input class="srvkey" type="hidden" name="apikey">
|
||||
<input type="submit" class="form blueedgecolor"
|
||||
value="Update Location">
|
||||
</form>
|
||||
</div>
|
||||
<div class="twothird leftaligned">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="ontimediv" class="flexbtn astraledgecolor threewide">
|
||||
<form class="form" action="https://api.dennisvandermeulen.nl/raspapi/status"
|
||||
method="post">
|
||||
<label class="form">Change Turn On Time
|
||||
<input id="turnontime" type="time" class="form astraledgecolor" name="value">
|
||||
</label>
|
||||
<input type="hidden" name="key" value="on_time">
|
||||
<input type="hidden" name="id" value="1">
|
||||
<input class="srvkey" type="hidden" name="apikey">
|
||||
<input type="submit" class="form astraledgecolor" value="Change Turn on time">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="offtimediv" class="flexbtn astraledgecolor threewide">
|
||||
<form class="form" action="https://api.dennisvandermeulen.nl/raspapi/status"
|
||||
method="post">
|
||||
<label class="form">Change Turn Off Time
|
||||
<input id="turnofftime" type="time" class="form astraledgecolor" name="value">
|
||||
</label>
|
||||
<input type="hidden" name="key" value="off_time">
|
||||
<input type="hidden" name="id" value="1">
|
||||
<input class="srvkey" type="hidden" name="apikey">
|
||||
<input type="submit" class="form astraledgecolor" value="Change Turn off time">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue