Browse Source
Major overhaul
Major overhaul
refactored frontend source files added frontend build script minor code optimizationsdevelopment
Rohan Sircar
4 years ago
73 changed files with 1336 additions and 40 deletions
-
3.gitignore
-
BINdata/NotoSansBold15.vlw
-
BINdata/NotoSansBold36.vlw
-
BINdata/Nunito-Light20.vlw
-
BINdata/Nunito-Light28.vlw
-
BINdata/Nunito-Light32.vlw
-
BINdata/Nunito-Regular20.vlw
-
BINdata/WebSocket.js.gz
-
BINdata/colors.css.gz
-
BINdata/edit.html.gz
-
BINdata/favicon.ico.gz
-
BINdata/index.html.gz
-
BINdata/ledcontrol.html.gz
-
BINdata/loadMenu.js.gz
-
BINdata/main.css.gz
-
BINdata/main.js.gz
-
BINdata/manifest.json.gz
-
BINdata/manualMode-ajax.html.gz
-
BINdata/manualMode.html.gz
-
BINdata/menu.html.gz
-
BINdata/nunito-regular-webfont.woff
-
BINdata/nunito-regular-webfont.woff2
-
BINdata/settings-ajax.html.gz
-
BINdata/settings-success.html.gz
-
BINdata/settings.html.gz
-
BINdata/settings.js.gz
-
7data/settingsFile1.txt
-
7data/settingsFile2.txt
-
7data/settingsFile3.txt
-
BINdata/success.html.gz
-
BINdata/temperatures.txt.gz
-
BINdata/uploadButtonStyle.js.gz
-
19frontend-build.sh
-
159frontend/src/colors.css
-
0frontend/src/combinedSettingsFile.txt
-
61frontend/src/edit.html
-
109frontend/src/index.html
-
39frontend/src/ledcontrol.html
-
3frontend/src/loadMenu.js
-
29frontend/src/main.css
-
177frontend/src/main.js
-
186frontend/src/main_bak.css
-
11frontend/src/manifest.json
-
122frontend/src/manualMode-ajax.html
-
78frontend/src/manualMode.html
-
0frontend/src/manualMode.txt
-
26frontend/src/menu.html
-
88frontend/src/settings-ajax.html
-
23frontend/src/settings-success.html
-
88frontend/src/settings.html
-
39frontend/src/settings.js
-
7frontend/src/settingsFile1.txt
-
7frontend/src/settingsFile2.txt
-
7frontend/src/settingsFile3.txt
-
23frontend/src/success.html
-
6frontend/src/temperatures.txt
-
8frontend/src/uploadButtonStyle.js
-
10include.js
-
6platformio.ini
-
21src/main.cpp
-
BINwebsite-zipped_bak/index.html.gz
-
BINwebsite-zipped_bak/ledcontrol.html.gz
-
BINwebsite-zipped_bak/main.css.gz
-
BINwebsite-zipped_bak/manifest.json.gz
-
BINwebsite-zipped_bak/manualMode-ajax.html.gz
-
BINwebsite-zipped_bak/manualMode.html.gz
-
BINwebsite-zipped_bak/menu.html.gz
-
BINwebsite-zipped_bak/nunito-regular-webfont.woff.gz
-
BINwebsite-zipped_bak/nunito-regular-webfont.woff2.gz
-
BINwebsite-zipped_bak/settings-ajax.html.gz
-
BINwebsite-zipped_bak/settings-success.html.gz
-
BINwebsite-zipped_bak/settings.html.gz
-
BINwebsite-zipped_bak/success.html.gz
@ -1,7 +0,0 @@ |
|||||
{ |
|
||||
"shour1": 16, |
|
||||
"fadePeriod1": 30, |
|
||||
"smin1": 0, |
|
||||
"ehour": 22, |
|
||||
"emin": 0 |
|
||||
} |
|
@ -1,7 +0,0 @@ |
|||||
{ |
|
||||
"shour2": 16, |
|
||||
"fadePeriod2": 30, |
|
||||
"smin2": 0, |
|
||||
"ehour": 22, |
|
||||
"emin": 0 |
|
||||
} |
|
@ -1,7 +0,0 @@ |
|||||
{ |
|
||||
"shour3": 16, |
|
||||
"fadePeriod3": 30, |
|
||||
"smin3": 0, |
|
||||
"ehour": 22, |
|
||||
"emin": 0 |
|
||||
} |
|
@ -0,0 +1,19 @@ |
|||||
|
#!/usr/bin/env bash |
||||
|
|
||||
|
rm -r frontend/target/ |
||||
|
rm -r data/ |
||||
|
|
||||
|
rsync -avz --progress frontend/src/** frontend/target/ |
||||
|
cd frontend/target/ |
||||
|
|
||||
|
find . \( \ |
||||
|
-name '*.css' \ |
||||
|
-o -name '*.html' \ |
||||
|
-o -name '*.js' \ |
||||
|
-o -name '*.jpg' \ |
||||
|
-o -name '*.png' \ |
||||
|
-o -name '*.ico' \ |
||||
|
\) -exec pigz --force --verbose {} \; |
||||
|
|
||||
|
cd ../.. |
||||
|
rsync -avz --progress frontend/target/** data/ |
@ -0,0 +1,159 @@ |
|||||
|
/*------------------------------------ |
||||
|
- COLOR ternary |
||||
|
------------------------------------*/ |
||||
|
|
||||
|
.alert-ternary { |
||||
|
color: #001b1e; |
||||
|
background-color: #65edff; |
||||
|
border-color: #51eaff; |
||||
|
} |
||||
|
|
||||
|
.alert-ternary hr { |
||||
|
border-top-color: #38e7ff; |
||||
|
} |
||||
|
|
||||
|
.alert-ternary .alert-link { |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.badge-ternary { |
||||
|
color: #fff; |
||||
|
background-color: #008799; |
||||
|
} |
||||
|
|
||||
|
.badge-ternary[href]:hover, |
||||
|
.badge-ternary[href]:focus { |
||||
|
color: #fff; |
||||
|
background-color: #005965; |
||||
|
} |
||||
|
|
||||
|
.bg-ternary { |
||||
|
background-color: #008799 !important; |
||||
|
} |
||||
|
|
||||
|
a.bg-ternary:hover, |
||||
|
a.bg-ternary:focus, |
||||
|
button.bg-ternary:hover, |
||||
|
button.bg-ternary:focus { |
||||
|
background-color: #005965 !important; |
||||
|
} |
||||
|
|
||||
|
.border-ternary { |
||||
|
border-color: #008799 !important; |
||||
|
} |
||||
|
|
||||
|
.btn-ternary { |
||||
|
color: #fff; |
||||
|
background-color: #008799; |
||||
|
border-color: #008799; |
||||
|
} |
||||
|
|
||||
|
.btn-ternary:hover { |
||||
|
color: #fff; |
||||
|
background-color: #006775; |
||||
|
border-color: #005965; |
||||
|
} |
||||
|
|
||||
|
.btn-ternary:focus, |
||||
|
.btn-ternary.focus { |
||||
|
box-shadow: 0 0 0 0.2rem rgba(0, 135, 153, 0.5); |
||||
|
} |
||||
|
|
||||
|
.btn-ternary.disabled, |
||||
|
.btn-ternary:disabled { |
||||
|
color: #fff; |
||||
|
background-color: #008799; |
||||
|
border-color: #008799; |
||||
|
} |
||||
|
|
||||
|
.btn-ternary:not(:disabled):not(.disabled):active, |
||||
|
.btn-ternary:not(:disabled):not(.disabled).active, |
||||
|
.show>.btn-ternary.dropdown-toggle { |
||||
|
color: #fff; |
||||
|
background-color: #005965; |
||||
|
border-color: #004c56; |
||||
|
} |
||||
|
|
||||
|
.btn-ternary:not(:disabled):not(.disabled):active:focus, |
||||
|
.btn-ternary:not(:disabled):not(.disabled).active:focus, |
||||
|
.show>.btn-ternary.dropdown-toggle:focus { |
||||
|
box-shadow: 0 0 0 0.2rem rgba(0, 135, 153, 0.5); |
||||
|
} |
||||
|
|
||||
|
.btn-outline-ternary { |
||||
|
color: #008799; |
||||
|
background-color: transparent; |
||||
|
border-color: #008799; |
||||
|
} |
||||
|
|
||||
|
.btn-outline-ternary:hover { |
||||
|
color: #fff; |
||||
|
background-color: #008799; |
||||
|
border-color: #008799; |
||||
|
} |
||||
|
|
||||
|
.btn-outline-ternary:focus, |
||||
|
.btn-outline-ternary.focus { |
||||
|
box-shadow: 0 0 0 0.2rem rgba(0, 135, 153, 0.5); |
||||
|
} |
||||
|
|
||||
|
.btn-outline-ternary.disabled, |
||||
|
.btn-outline-ternary:disabled { |
||||
|
color: #008799; |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
|
||||
|
.btn-outline-ternary:not(:disabled):not(.disabled):active, |
||||
|
.btn-outline-ternary:not(:disabled):not(.disabled).active, |
||||
|
.show>.btn-outline-ternary.dropdown-toggle { |
||||
|
color: #fff; |
||||
|
background-color: #008799; |
||||
|
border-color: #008799; |
||||
|
} |
||||
|
|
||||
|
.btn-outline-ternary:not(:disabled):not(.disabled):active:focus, |
||||
|
.btn-outline-ternary:not(:disabled):not(.disabled).active:focus, |
||||
|
.show>.btn-outline-ternary.dropdown-toggle:focus { |
||||
|
box-shadow: 0 0 0 0.2rem rgba(0, 135, 153, 0.5); |
||||
|
} |
||||
|
|
||||
|
.list-group-item-ternary { |
||||
|
color: #001b1e; |
||||
|
background-color: #51eaff; |
||||
|
} |
||||
|
|
||||
|
.list-group-item-ternary.list-group-item-action:hover, |
||||
|
.list-group-item-ternary.list-group-item-action:focus { |
||||
|
color: #001b1e; |
||||
|
background-color: #38e7ff; |
||||
|
} |
||||
|
|
||||
|
.list-group-item-ternary.list-group-item-action.active { |
||||
|
color: #fff; |
||||
|
background-color: #001b1e; |
||||
|
border-color: #001b1e; |
||||
|
} |
||||
|
|
||||
|
.table-ternary, |
||||
|
.table-ternary>th, |
||||
|
.table-ternary>td { |
||||
|
background-color: #51eaff; |
||||
|
} |
||||
|
|
||||
|
.table-hover .table-ternary:hover { |
||||
|
background-color: #38e7ff; |
||||
|
} |
||||
|
|
||||
|
.table-hover .table-ternary:hover>td, |
||||
|
.table-hover .table-ternary:hover>th { |
||||
|
background-color: #38e7ff; |
||||
|
} |
||||
|
|
||||
|
.text-ternary { |
||||
|
color: #008799 !important; |
||||
|
} |
||||
|
|
||||
|
a.text-ternary:hover, |
||||
|
a.text-ternary:focus { |
||||
|
color: #005965 !important; |
||||
|
} |
@ -0,0 +1,61 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
|
||||
|
<head> |
||||
|
<title>ESP8266 SPIFFS File Upload</title> |
||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> |
||||
|
<link rel="icon" type="image/png" sizes="144x144" href="/favicon-144x144.png"> |
||||
|
<link rel="icon" type="image/png" sizes="48x48" href="/favicon.ico"> |
||||
|
<link rel="manifest" href="manifest.json"> |
||||
|
<meta name="theme-color" content="#00878f"> |
||||
|
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'> |
||||
|
<meta charset="utf-8"> |
||||
|
|
||||
|
<script src="loadMenu.js" defer></script> |
||||
|
|
||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> |
||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/esm/popper.js" type="module"></script> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/sprintf/1.1.2/sprintf.min.js"></script> |
||||
|
|
||||
|
<link href='main.css' rel='stylesheet' type='text/css'> |
||||
|
<link rel="stylesheet" href="colors.css"> |
||||
|
|
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-filestyle/2.1.0/bootstrap-filestyle.min.js"></script> |
||||
|
<script src="uploadButtonStyle.js" defer></script> |
||||
|
|
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<div id="navigation"></div> |
||||
|
<div class="container shadow-lg"> |
||||
|
<section class="py-5 mt-3"> |
||||
|
<div class="container"> |
||||
|
<div class="row"> |
||||
|
<div class="col"> |
||||
|
<h1 class="display-4 text-ternary">ESP8266 SPIFFS File Upload</h1> |
||||
|
|
||||
|
<div class="row"> |
||||
|
<div class="col-md-6 offset-md-3"> |
||||
|
<p>Select a new file to upload to the ESP8266. Existing files will be replaced.</p> |
||||
|
<form method="POST" enctype="multipart/form-data"> |
||||
|
<div class="form-group"> |
||||
|
<input class="filestyle" data-btnClass="btn-ternary" type="file" data-dragdrop="true" name="data" id="upload-button" required> |
||||
|
<p class="form-text text-muted">You can drag and drop files as well</p> |
||||
|
</div> |
||||
|
<div class="form-group text-center"> |
||||
|
<input class="btn btn-ternary" type="submit" value="Upload"> |
||||
|
</div> |
||||
|
</form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
</div> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
@ -0,0 +1,109 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
|
||||
|
<head> |
||||
|
<title>Home</title> |
||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> |
||||
|
<link rel="icon" type="image/png" sizes="144x144" href="/favicon-144x144.png"> |
||||
|
<link rel="icon" type="image/png" sizes="48x48" href="/favicon.ico"> |
||||
|
<link rel="manifest" href="manifest.json"> |
||||
|
<meta name="theme-color" content="#00878f"> |
||||
|
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'> |
||||
|
<meta charset="utf-8"> |
||||
|
|
||||
|
<script src="loadMenu.js" defer></script> |
||||
|
<script src="main.js" defer></script> |
||||
|
|
||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> |
||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/esm/popper.js" type="module"></script> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/sprintf/1.1.2/sprintf.min.js"></script> |
||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css"> |
||||
|
<link href='main.css' rel='stylesheet' type='text/css'> |
||||
|
<link rel="stylesheet" href="colors.css"> |
||||
|
|
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
|
||||
|
<!-- <iframe src="menu.html" width="90%"></iframe> --> |
||||
|
<div id="navigation"></div> |
||||
|
<div class="container"> |
||||
|
<div class="shadow-lg p-3 mb-5 bg-white rounded"> |
||||
|
<header> |
||||
|
<div class="container"> |
||||
|
<div class="row"> |
||||
|
<div class="col"> |
||||
|
<div class="pt-5 mt-3"> |
||||
|
<h2 class="display-4 text-ternary text-center"> Welcome </h2> |
||||
|
<p class="text-center">Welcome to the planted aquarium controller.</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</header> |
||||
|
<section> |
||||
|
<div class="container bg-ternary shadow-sm p-3 mb-2 rounded"> |
||||
|
<div class="row mb-3"> |
||||
|
<div class="col"> |
||||
|
<h2 class="text-white text-center display-4">Settings at a glance</h2> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="row" id="content-row"> |
||||
|
<div class="col-md"> |
||||
|
|
||||
|
<section id="mySection "></section> |
||||
|
<div class="card mb-3 text-center card-form rounded mx-auto shadow-sm "> |
||||
|
<h2 class="card-header text-center text-ternary">Ballast #1</h2> |
||||
|
<div class="card-body rounded"> |
||||
|
<div class="card-text" id="ballast1"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-md"> |
||||
|
<div class="card mb-3 text-center card-form rounded mx-auto shadow-sm"> |
||||
|
<h2 class="card-header text-center text-ternary">Ballast #2</h2> |
||||
|
<div class="card-body rounded"> |
||||
|
<div class="card-text" id="ballast2"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-md"> |
||||
|
<div class="card mb-3 text-center card-form rounded mx-auto shadow-sm"> |
||||
|
<h2 class="card-header text-center text-ternary">Ballast #3</h2> |
||||
|
<div class="card-body rounded"> |
||||
|
<div class="card-text" id="ballast3"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
<section> |
||||
|
<div class="container"> |
||||
|
<div class="row"> |
||||
|
<div class="col"> |
||||
|
<div class="pretty p-switch "> |
||||
|
<input type="checkbox" id="temperatures-switch" /> |
||||
|
<div class="state p-primary"> |
||||
|
<label>Show temperature readings</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
<p id="temperature"></p> |
||||
|
<noscript>No javascript</noscript> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</body> |
||||
|
|
||||
|
</html> |
@ -0,0 +1,39 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<title>LED Control</title> |
||||
|
<link href='main.css' rel='stylesheet' type='text/css'> |
||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> |
||||
|
<link rel="icon" type="image/png" sizes="144x144" href="/favicon-144x144.png"> |
||||
|
<link rel="icon" type="image/png" sizes="48x48" href="/favicon.ico"> |
||||
|
<link rel="manifest" href="/manifest.json"> |
||||
|
<meta name="theme-color" content="#00878f"> |
||||
|
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'> |
||||
|
<script src="WebSocket.js" type="text/javascript"></script> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<center> |
||||
|
<header> |
||||
|
<h1>LED Control</h1> |
||||
|
</header> |
||||
|
<div> |
||||
|
<table> |
||||
|
<tr> |
||||
|
<td style="width:14.4px; text-align: right">R: </td> |
||||
|
<td><input class="enabled" id="r" type="range" min="0" max="1023" step="1" oninput="sendRGB();" value="0"></td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td style="width:14.4px; text-align: right">G: </td> |
||||
|
<td><input class="enabled" id="g" type="range" min="0" max="1023" step="1" oninput="sendRGB();" value="0"></td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td style="width:14.4px; text-align: right">B: </td> |
||||
|
<td><input class="enabled" id="b" type="range" min="0" max="1023" step="1" oninput="sendRGB();" value="0"></td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
<p style="margin:8px 0px"><button id="rainbow" class="button" style="background-color:#999" onclick="rainbowEffect();">Rainbow</button></p> |
||||
|
</div> |
||||
|
</center> |
||||
|
</body> |
||||
|
</html> |
@ -0,0 +1,3 @@ |
|||||
|
$(document).ready(function() { |
||||
|
$('#navigation').load('menu.html'); |
||||
|
}); |
@ -0,0 +1,29 @@ |
|||||
|
/* .navbar-light .nav-item.active .nav-link, |
||||
|
.navbar-light .nav-item:focus .nav-link, |
||||
|
.navbar-light .nav-item:hover .nav-link { |
||||
|
color: #ffffff; |
||||
|
} */ |
||||
|
|
||||
|
.navbar-dark .navbar-nav .nav-link { |
||||
|
color: rgba(255, 255, 255, .5); |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* #form-section { |
||||
|
width: 30%; |
||||
|
margin: auto; |
||||
|
} |
||||
|
|
||||
|
#manual-card { |
||||
|
width: 40%; |
||||
|
} */ |
||||
|
|
||||
|
@media only screen and (max-width: 900px) { |
||||
|
/* #form-section { |
||||
|
width: 90%; |
||||
|
} |
||||
|
#manual-card { |
||||
|
width: 90%; |
||||
|
} */ |
||||
|
} |
@ -0,0 +1,177 @@ |
|||||
|
function incHeight() { |
||||
|
var el = document.getElementById('mySection'); |
||||
|
var height = el.offsetHeight; |
||||
|
console.log("Height = " + height); |
||||
|
var newHeight = height + 250; |
||||
|
el.style.height = newHeight + 'px'; |
||||
|
} |
||||
|
|
||||
|
var header = document.querySelector('header'); |
||||
|
var section = document.querySelector('section'); |
||||
|
|
||||
|
function handleErrors(response) { |
||||
|
if (!response.ok) { |
||||
|
throw Error(response.statusText); |
||||
|
} |
||||
|
return response; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
async function getData() { |
||||
|
//await the response of the fetch call
|
||||
|
let response = await fetch('combinedSettingsFile.txt'); |
||||
|
//proceed once the first promise is resolved.
|
||||
|
let data = await response.json() |
||||
|
//proceed only when the second promise is resolved
|
||||
|
return data; |
||||
|
} |
||||
|
|
||||
|
async function getTemperatures() { |
||||
|
//await the response of the fetch call
|
||||
|
let response = await fetch('temperatures.txt'); |
||||
|
//proceed once the first promise is resolved.
|
||||
|
let data = await response.json() |
||||
|
//proceed only when the second promise is resolved
|
||||
|
return data; |
||||
|
} |
||||
|
async function getTemperatures2() { |
||||
|
//await the response of the fetch call
|
||||
|
let response = await fetch('api/get/temperatures'); |
||||
|
//proceed once the first promise is resolved.
|
||||
|
let data = await response.json() |
||||
|
//proceed only when the second promise is resolved
|
||||
|
return data; |
||||
|
} |
||||
|
getTemperatures() |
||||
|
.then(data => { |
||||
|
data.temperatures.forEach(function(temperature) { |
||||
|
console.log(temperature); |
||||
|
}) |
||||
|
}) |
||||
|
|
||||
|
// .then(result => {
|
||||
|
// //Here body is not ready yet, throw promise
|
||||
|
// if (!result.ok) throw result;
|
||||
|
// return result.json();
|
||||
|
// })
|
||||
|
// .then(result => {
|
||||
|
// //Successful request processing
|
||||
|
// console.log(result);
|
||||
|
// }).catch(error => {
|
||||
|
// //Here is still promise
|
||||
|
// console.log(error);
|
||||
|
// error.json().then((body) => {
|
||||
|
// //Here is already the payload from API
|
||||
|
// console.log(body);
|
||||
|
// });
|
||||
|
// })
|
||||
|
|
||||
|
setInterval(function() { |
||||
|
let temperaturesSwitch = document.getElementById('temperatures-switch'); |
||||
|
if (temperaturesSwitch.checked) { |
||||
|
// getTemperatures2()
|
||||
|
fetch('api/get/temperatures') |
||||
|
// .then(handleErrors)
|
||||
|
.then(result => { |
||||
|
//Here body is not ready yet, throw promise
|
||||
|
if (!result.ok) throw result; |
||||
|
return result.json(); |
||||
|
}) |
||||
|
.then(data => { |
||||
|
let p = document.getElementById('temperature'); |
||||
|
if (data.status == 'failed') { |
||||
|
let errorMessage = sprintf('status = %s reason = %s', data.status, data.message) |
||||
|
p.textContent = errorMessage; |
||||
|
console.log(errorMessage); |
||||
|
} else { |
||||
|
|
||||
|
p.textContent = ""; |
||||
|
data.temperatures.forEach(function(temperature) { |
||||
|
|
||||
|
console.log("Temperature = " + temperature); |
||||
|
temp = sprintf("%05.2f", temperature); |
||||
|
p.textContent += temp + ' '; |
||||
|
|
||||
|
}) |
||||
|
// let temp = sprintf("%.2f", 36.72);
|
||||
|
// p.textContent += temp + ' ';
|
||||
|
} |
||||
|
}) |
||||
|
.catch(error => { |
||||
|
//Here is still promise
|
||||
|
// console.log(error);
|
||||
|
// if (error.status == 404) {
|
||||
|
// console.log('error = ' + 404);
|
||||
|
// }
|
||||
|
// else {
|
||||
|
// error.json().then((body) => {
|
||||
|
//Here is already the payload from API
|
||||
|
// let errorMessage = sprintf('status = %s reason = %s', body.status, body.message)
|
||||
|
// console.log(errorMessage);
|
||||
|
// });
|
||||
|
// }
|
||||
|
let p = document.getElementById('temperature'); |
||||
|
p.textContent = 'Network Error'; |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
2000 |
||||
|
); |
||||
|
|
||||
|
//call getData function
|
||||
|
getData() |
||||
|
//.then(data => console.log(data))//log the data
|
||||
|
.then(function showSettings(data) { |
||||
|
var ballasts = data['settings']; |
||||
|
console.log(ballasts); |
||||
|
for (let i = 0; i < 3; i++) { |
||||
|
// var myArticle = document.createElement('article');
|
||||
|
// var myH2 = document.createElement('h3');
|
||||
|
// var myPara1 = document.createElement('p');
|
||||
|
// var myPara2 = document.createElement('p');
|
||||
|
// var myPara3 = document.createElement('p');
|
||||
|
// var myPara4 = document.createElement('p');
|
||||
|
// var myPara5 = document.createElement('p');
|
||||
|
// // var myList = document.createElement('ul');
|
||||
|
|
||||
|
// myH2.textContent = 'Ballast' + ' #' + (i + 1);
|
||||
|
// myPara1.textContent = 'Start Hour: ' + ballasts[i].shour;
|
||||
|
// myPara2.textContent = 'Start Minute: ' + ballasts[i].smin;
|
||||
|
// myPara3.textContent = 'Fade Period: ' + ballasts[i].fadePeriod;
|
||||
|
// myPara4.textContent = 'End Hour: ' + ballasts[i].ehour;
|
||||
|
// myPara5.textContent = 'End Minute: ' + ballasts[i].emin;
|
||||
|
// console.log(ballasts[i].shour);
|
||||
|
// myArticle.appendChild(myH2);
|
||||
|
// myArticle.appendChild(myPara1);
|
||||
|
// myArticle.appendChild(myPara2);
|
||||
|
// myArticle.appendChild(myPara3);
|
||||
|
// myArticle.appendChild(myPara4);
|
||||
|
// myArticle.appendChild(myPara5);
|
||||
|
// // myArticle.appendChild(myList);
|
||||
|
// section.appendChild(myArticle);
|
||||
|
let myDiv = document.getElementById('ballast' + (i + 1)); |
||||
|
// let myH2 = document.createElement('h3');
|
||||
|
let myPara1 = document.createElement('p'); |
||||
|
let myPara2 = document.createElement('p'); |
||||
|
let myPara3 = document.createElement('p'); |
||||
|
let myPara4 = document.createElement('p'); |
||||
|
let myPara5 = document.createElement('p'); |
||||
|
|
||||
|
// myH2.textContent = 'Ballast' + ' #' + (i + 1);
|
||||
|
myPara1.textContent = 'Start Hour: ' + ballasts[i].shour; |
||||
|
myPara2.textContent = 'Start Minute: ' + ballasts[i].smin; |
||||
|
myPara3.textContent = 'Fade Period: ' + ballasts[i].fadePeriod; |
||||
|
myPara4.textContent = 'End Hour: ' + ballasts[i].ehour; |
||||
|
myPara5.textContent = 'End Minute: ' + ballasts[i].emin; |
||||
|
|
||||
|
// myDiv.appendChild(myH2);
|
||||
|
myDiv.appendChild(myPara1); |
||||
|
myDiv.appendChild(myPara2); |
||||
|
myDiv.appendChild(myPara3); |
||||
|
myDiv.appendChild(myPara4); |
||||
|
myDiv.appendChild(myPara5); |
||||
|
} |
||||
|
return data; |
||||
|
}) |
||||
|
.then(data => console.log(data)) |
||||
|
// .then(incHeight());
|
@ -0,0 +1,186 @@ |
|||||
|
.nav-pills .nav-link.active, |
||||
|
.nav-pills .show>.nav-link { |
||||
|
color: #fff; |
||||
|
background-color: #00878F; |
||||
|
} |
||||
|
|
||||
|
@font-face { |
||||
|
font-family: 'nunitoregular'; |
||||
|
src: url('nunito-regular-webfont.woff2') format('woff2'), url('nunito-regular-webfont.woff') format('woff'); |
||||
|
font-weight: normal; |
||||
|
font-style: normal; |
||||
|
} |
||||
|
|
||||
|
iframe { |
||||
|
border: none; |
||||
|
align-self: center; |
||||
|
align-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
center { |
||||
|
width: 70%; |
||||
|
max-width: 100%; |
||||
|
margin: 0px auto; |
||||
|
font-family: 'Roboto', sans-serif; |
||||
|
color: #444; |
||||
|
} |
||||
|
|
||||
|
header { |
||||
|
background-color: #00878F; |
||||
|
color: white; |
||||
|
padding: 6px; |
||||
|
font-family: 'Roboto', sans-serif; |
||||
|
box-shadow: 1px 1px 5px #555555; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
h1 { |
||||
|
margin: 0px; |
||||
|
font-family: 'Roboto', sans-serif; |
||||
|
font-size: 32; |
||||
|
} |
||||
|
|
||||
|
h2 { |
||||
|
color: #00878f; |
||||
|
} |
||||
|
|
||||
|
h3 { |
||||
|
color: #00878f; |
||||
|
} |
||||
|
|
||||
|
.shadow { |
||||
|
box-shadow: 1px 1px 5px #555555; |
||||
|
/* height: 500px; */ |
||||
|
} |
||||
|
|
||||
|
.navmenu { |
||||
|
margin-top: 10px; |
||||
|
margin-left: 0px; |
||||
|
} |
||||
|
|
||||
|
.navm { |
||||
|
margin: 2px; |
||||
|
} |
||||
|
|
||||
|
radio { |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
margin: 10px 10px 10px 10px |
||||
|
} |
||||
|
|
||||
|
table { |
||||
|
margin: 5px 24px 5px 12px; |
||||
|
border: #000000 |
||||
|
} |
||||
|
|
||||
|
.tbl { |
||||
|
margin-top: 10px; |
||||
|
margin-bottom: 5px; |
||||
|
border: #000000 |
||||
|
} |
||||
|
|
||||
|
td { |
||||
|
color: #555; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* tr { |
||||
|
width: 100%; |
||||
|
} */ |
||||
|
|
||||
|
.button { |
||||
|
text-decoration: none; |
||||
|
border: none; |
||||
|
color: white; |
||||
|
background-color: #00878F; |
||||
|
padding: 6px 24px; |
||||
|
font-size: 16px; |
||||
|
cursor: pointer; |
||||
|
box-shadow: 1px 1px 6px #555; |
||||
|
outline: none; |
||||
|
margin: 12px auto 0px auto; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
.button:hover { |
||||
|
box-shadow: 1px 1px 3px #444; |
||||
|
} |
||||
|
|
||||
|
hr { |
||||
|
width: 97%; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
|
||||
|
input[type=range] { |
||||
|
-webkit-appearance: none; |
||||
|
outline: none; |
||||
|
width: auto; |
||||
|
margin: 6px; |
||||
|
} |
||||
|
|
||||
|
input { |
||||
|
width: 95px; |
||||
|
height: 20px; |
||||
|
} |
||||
|
|
||||
|
input[type=range]::-webkit-slider-thumb { |
||||
|
-webkit-appearance: none; |
||||
|
border: 0px; |
||||
|
height: 15px; |
||||
|
width: 15px; |
||||
|
margin-top: -6px; |
||||
|
border-radius: 7.5px; |
||||
|
} |
||||
|
|
||||
|
input.disabled[type=range]::-webkit-slider-thumb { |
||||
|
background: #999; |
||||
|
} |
||||
|
|
||||
|
input.enabled[type=range]::-webkit-slider-thumb { |
||||
|
background: #00878F; |
||||
|
cursor: pointer; |
||||
|
box-shadow: 1px 1px 2px #777, 0px 0px 1px #777; |
||||
|
} |
||||
|
|
||||
|
input[type=range]::-webkit-slider-runnable-track { |
||||
|
width: inherit; |
||||
|
height: 4px; |
||||
|
background: #ccc; |
||||
|
border-radius: 1px; |
||||
|
} |
||||
|
|
||||
|
input.enabled[type=range]::-webkit-slider-runnable-track { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
font-family: 'Nunito', sans-serif; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* section styles */ |
||||
|
|
||||
|
section article { |
||||
|
width: 33%; |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
section p { |
||||
|
margin: 5px 0; |
||||
|
} |
||||
|
|
||||
|
section ul { |
||||
|
margin-top: 0; |
||||
|
} |
||||
|
|
||||
|
@media screen and (max-width: 900px) { |
||||
|
center { |
||||
|
width: 90%; |
||||
|
} |
||||
|
.content { |
||||
|
height: 600px; |
||||
|
} |
||||
|
} |
@ -0,0 +1,11 @@ |
|||||
|
{ |
||||
|
"name": "LED Control", |
||||
|
"icons": [ |
||||
|
{ |
||||
|
"src": "\/favicon-144x144.png", |
||||
|
"sizes": "144x144", |
||||
|
"type": "image\/png", |
||||
|
"density": "3.0" |
||||
|
} |
||||
|
] |
||||
|
} |
@ -0,0 +1,122 @@ |
|||||
|
<!-- <!DOCTYPE html> --> |
||||
|
<html> |
||||
|
|
||||
|
<head> |
||||
|
<title>Manual Mode</title> |
||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> |
||||
|
<link rel="icon" type="image/png" sizes="144x144" href="/favicon-144x144.png"> |
||||
|
<link rel="icon" type="image/png" sizes="48x48" href="/favicon.ico"> |
||||
|
<link rel="manifest" href="manifest.json"> |
||||
|
<meta name="theme-color" content="#00878f"> |
||||
|
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'> |
||||
|
<meta charset="utf-8"> |
||||
|
|
||||
|
|
||||
|
<script src="loadMenu.js" defer></script> |
||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> |
||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/esm/popper.js" type="module"></script> |
||||
|
|
||||
|
<link href='main.css' rel='stylesheet' type='text/css'> |
||||
|
<link rel="stylesheet" href="colors.css"> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<div id="navigation"></div> |
||||
|
<div class="container"> |
||||
|
<div class="shadow-lg p-3 mb-5 bg-white rounded"> |
||||
|
<header> |
||||
|
<div class="container"> |
||||
|
<div class="row"> |
||||
|
<div class="col"> |
||||
|
<div class="mt-3 pt-5"> |
||||
|
<h2 class="display-4 text-center"> |
||||
|
Manual Settings |
||||
|
</h2> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</header> |
||||
|
|
||||
|
<section> |
||||
|
<div class="container"> |
||||
|
<div class="row"> |
||||
|
<div class="col-lg-6 offset-lg-3"> |
||||
|
<div class="card text-white bg-ternary mb-3 card-form rounded mx-auto" id="manual-card"> |
||||
|
<div class="card-body"> |
||||
|
<div class="card-text text-center"> |
||||
|
<form id="manual-form"> |
||||
|
<div class="mb-4 mt-2"> |
||||
|
<div class="form-check form-check-inline"> |
||||
|
<input class="form-check-input" id="yes" type="radio" name="manual" value="True"> |
||||
|
<label class="form-check-label" for="yes">Yes</label> |
||||
|
</div> |
||||
|
<div class="form-check form-check-inline"> |
||||
|
<input class="form-check-input" id="no" type="radio" name="manual" value="False" checked> |
||||
|
<label class="form-check-label" for="no">No</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
<button class="form-control" class="button">Submit</button> |
||||
|
</div> |
||||
|
</form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<script type="text/javascript"> |
||||
|
var myForm = document.getElementById('manual-form'); |
||||
|
myForm.addEventListener('submit', function(e) { |
||||
|
e.preventDefault(); |
||||
|
//var data = JSON.stringify(formData(myForm)); |
||||
|
loadJSON(formData(myForm)); |
||||
|
}) |
||||
|
|
||||
|
function formData(form) { |
||||
|
// var el = form.querySelectorAll('input[type="text"]'); |
||||
|
// var manualRadios = document.getElementsByName('manual').value; |
||||
|
var manualValue = document.querySelector('input[name="manual"]:checked').value;; |
||||
|
|
||||
|
var myData = ''; |
||||
|
myData += 'manual' + '=' + manualValue; |
||||
|
// for (var x = 0; x < el.length; x++) { |
||||
|
// var name = el[x].name; |
||||
|
// var value = el[x].value; |
||||
|
// //myData[name] = value; |
||||
|
// myData += name + '=' + value + '&' |
||||
|
// } |
||||
|
// return myData.slice(0, -1); |
||||
|
return myData; |
||||
|
} |
||||
|
|
||||
|
function loadJSON(data) { |
||||
|
const url = 'manualMode.html'; |
||||
|
console.log(data) |
||||
|
const myData = data |
||||
|
fetch(url, { |
||||
|
method: 'post', |
||||
|
headers: { |
||||
|
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8" |
||||
|
}, |
||||
|
body: myData |
||||
|
}) |
||||
|
// .then(function (response) { |
||||
|
// return response.json() |
||||
|
// }).then(function (data) { |
||||
|
// console.log(data) |
||||
|
// }) |
||||
|
.catch(error => console.log(error)) |
||||
|
} |
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
@ -0,0 +1,78 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
|
||||
|
<head> |
||||
|
<title>Manual Mode</title> |
||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> |
||||
|
<link rel="icon" type="image/png" sizes="144x144" href="/favicon-144x144.png"> |
||||
|
<link rel="icon" type="image/png" sizes="48x48" href="/favicon.ico"> |
||||
|
<link rel="manifest" href="/manifest.json"> |
||||
|
<meta name="theme-color" content="#00878f"> |
||||
|
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'> |
||||
|
<!-- <script src="include.js" type="text/javascript"></script> --> |
||||
|
<meta charset="utf-8"> |
||||
|
|
||||
|
<!-- <script src="jquery-3.4.1.min.js"></script> --> |
||||
|
<script src="loadMenu.js" defer></script> |
||||
|
<link href='main.css' rel='stylesheet' type='text/css'> |
||||
|
<!-- <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> --> |
||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> |
||||
|
<link rel="stylesheet" href="colors.css"> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
||||
|
<!-- <link rel="stylesheet" href="bootstrap.min.css"> --> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> |
||||
|
<!-- <script src="bootstrap.min.js"></script> --> |
||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"> |
||||
|
<link href='main.css' rel='stylesheet' type='text/css'> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/esm/popper.js" type="module"></script> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<div id="navigation"></div> |
||||
|
<center> |
||||
|
<header> |
||||
|
<h1> Manual Mode </h1> |
||||
|
</header> |
||||
|
|
||||
|
</center> |
||||
|
|
||||
|
|
||||
|
<form action="manualMode.html" method="GET"> |
||||
|
<center> |
||||
|
|
||||
|
<div class="shadow"> |
||||
|
<!-- <iframe src="menu.html" width="90%"></iframe> --> |
||||
|
|
||||
|
<table class="tbl"> |
||||
|
<tr> |
||||
|
<td colspan="3"> |
||||
|
<label>Manual mode?</label> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td> |
||||
|
<input type="radio" name="manual" value="True"> Yes |
||||
|
</td> |
||||
|
<td> |
||||
|
<input type="radio" name="manual" value="False" checked> No |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td colspan="2"> |
||||
|
<p style="margin:8px 0px" align="center"><button class="button">Submit</button></p> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
|
||||
|
<!-- <div class="content"> |
||||
|
<label>Manual mode?</label> |
||||
|
<input type="radio" name="manual" value="True"> Yes |
||||
|
<input type="radio" name="manual" value="False" checked> No <br> |
||||
|
<p style="margin:8px 0px"><button class="button">Submit</button></p><br> |
||||
|
</div> --> |
||||
|
</div> |
||||
|
</center> |
||||
|
</form> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
@ -0,0 +1,26 @@ |
|||||
|
<nav class="navbar navbar-expand-md bg-ternary navbar-dark fixed-top"> |
||||
|
<div class="container"> |
||||
|
<a href="home.html" class="navbar-brand">Aquarium Controller</a> |
||||
|
<div class="navbar-header"> |
||||
|
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"> |
||||
|
<i class="fas fa-chevron-down"></i> |
||||
|
</button> |
||||
|
</div> |
||||
|
<div class="collapse navbar-collapse" id="navbarCollapse"> |
||||
|
<ul class="navbar-nav ml-auto"> |
||||
|
<li class="nav-item"> |
||||
|
<a href="index.html" class="nav-link">Home</a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a href="settings-ajax.html" class="nav-link">Settings</a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a href="manualMode-ajax.html" class="nav-link">Manual Mode</a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a href="edit.html" class="nav-link">Edit</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
</nav> |
@ -0,0 +1,88 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
|
||||
|
<head> |
||||
|
<title>Settings</title> |
||||
|
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png"> |
||||
|
<link rel="icon" type="image/png" sizes="144x144" href="favicon-144x144.png"> |
||||
|
<link rel="icon" type="image/png" sizes="48x48" href="favicon.ico"> |
||||
|
<link rel="manifest" href="manifest.json"> |
||||
|
<meta name="theme-color" content="#00878f"> |
||||
|
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'> |
||||
|
<meta charset="utf-8"> |
||||
|
|
||||
|
|
||||
|
<script src="loadMenu.js" defer></script> |
||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> |
||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"> |
||||
|
<link href='main.css' rel='stylesheet' type='text/css'> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/esm/popper.js" type="module"></script> |
||||
|
|
||||
|
<script src="settings.js" defer></script> |
||||
|
<link rel="stylesheet" href="colors.css"> |
||||
|
|
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<div id="navigation"></div> |
||||
|
|
||||
|
<section id="form-section"> |
||||
|
<div class="container"> |
||||
|
<div class="row"> |
||||
|
<div class="col-lg-6 offset-lg-3"> |
||||
|
<div class="py-5 mt-3"> |
||||
|
<!-- <div class="bg-ternary rounded"> --> |
||||
|
<div class="card text-white bg-ternary card-form rounded mx-auto shadow-lg p-3 mb-5"> |
||||
|
|
||||
|
<h2 class="card-header text-center">Change Settings</h2> |
||||
|
<div class="card-body rounded"> |
||||
|
<form id="myForm"> |
||||
|
<div class="form-group"> |
||||
|
<label>Select Ballast:</label> |
||||
|
<select class="form-control" id="myBallasts" name="ballast"> |
||||
|
<option value = "1">Ballast #1</option> |
||||
|
<option value = "2">Ballast #2</option> |
||||
|
<option value = "3">Ballast #3</option> |
||||
|
</select> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
<label for="">Enter start hour:</label> |
||||
|
<input class="form-control" type="text" name="shour" placeholder="Hour" required> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
<label for="">Enter start minute:</label> |
||||
|
<input class="form-control" type="text" name="smin" placeholder="Minute" required> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
<label for="">Enter amount of time to fade in:</label> |
||||
|
<input class="form-control" type="text" name="fadePeriod" placeholder="Fade Period" required> |
||||
|
<small class="form-text text-white">Must be a whole number</small> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
<label for="">Enter end hour:</label> |
||||
|
<input class="form-control" type="text" name="ehour" placeholder="Hour" required> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
<label for="">Enter start minute:</label> |
||||
|
<input class="form-control" type="text" name="emin" placeholder="Minute" required> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
<button class="button form-control">Submit</button> |
||||
|
</div> |
||||
|
</form> |
||||
|
</div> |
||||
|
<!-- </div> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<script type="text/javascript"> |
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
@ -0,0 +1,23 @@ |
|||||
|
<html> |
||||
|
<head> |
||||
|
<title>Settings update successful</title> |
||||
|
<link href='main.css' rel='stylesheet' type='text/css'> |
||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> |
||||
|
<link rel="icon" type="image/png" sizes="144x144" href="/favicon-144x144.png"> |
||||
|
<link rel="icon" type="image/png" sizes="48x48" href="/favicon.ico"> |
||||
|
<link rel="manifest" href="/manifest.json"> |
||||
|
<meta name="theme-color" content="#00878f"> |
||||
|
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'> |
||||
|
</head> |
||||
|
<body> |
||||
|
<center> |
||||
|
<header> |
||||
|
<h1>Success</h1> |
||||
|
</header> |
||||
|
<div> |
||||
|
<p>Settings changed successfully.</p> |
||||
|
<a class="button" href="/">Back</a> |
||||
|
</div> |
||||
|
</center> |
||||
|
</body> |
||||
|
</html> |
@ -0,0 +1,88 @@ |
|||||
|
<!-- <!DOCTYPE html> --> |
||||
|
<html> |
||||
|
<head> |
||||
|
<title>Settings</title> |
||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> |
||||
|
<link rel="icon" type="image/png" sizes="144x144" href="/favicon-144x144.png"> |
||||
|
<link rel="icon" type="image/png" sizes="48x48" href="/favicon.ico"> |
||||
|
<link rel="manifest" href="/manifest.json"> |
||||
|
<meta name="theme-color" content="#00878f"> |
||||
|
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'> |
||||
|
<!-- <script src="include.js" type="text/javascript"></script> --> |
||||
|
<meta charset="utf-8"> |
||||
|
<!-- <script src="jquery-3.4.1.min.js"></script> --> |
||||
|
<link href='main.css' rel='stylesheet' type='text/css'> |
||||
|
<!-- <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> --> |
||||
|
</head> |
||||
|
<body> |
||||
|
|
||||
|
<center><header><h1> Settings page </h1></header></center> |
||||
|
<form action="/settings.html" method="POST"> |
||||
|
<center> |
||||
|
<div class="shadow"> |
||||
|
<iframe src="menu.html" width="90%"></iframe> |
||||
|
<div data-include="menu"></div> |
||||
|
<table class="tbl" cellspacing="2" cellpadding = "2"> |
||||
|
<tr> |
||||
|
<td> |
||||
|
<label>Select Ballast:</label> |
||||
|
</td> |
||||
|
<td> |
||||
|
<select id = "myList" name="ballast"> |
||||
|
<option value = "1">Ballast #1</option> |
||||
|
<option value = "2">Ballast #2</option> |
||||
|
<option value = "3">Ballast #3</option> |
||||
|
</select> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td> |
||||
|
Enter start hour:</br> |
||||
|
</td> |
||||
|
<td> |
||||
|
<input type="text" name="shour" placeholder="Hour" required></br> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td> |
||||
|
Enter start minute:</br> |
||||
|
</td> |
||||
|
<td> |
||||
|
<input type="text" name="smin" placeholder="Minute" required></br> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td> |
||||
|
Enter amount of time to fade in(in mins)(cannot be decimal):</br> |
||||
|
</td> |
||||
|
<td> |
||||
|
<input type="text" name="fadePeriod" placeholder="Fade Period" required></br> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td> |
||||
|
Enter end hour:</br> |
||||
|
</td> |
||||
|
<td> |
||||
|
<input type="text" name="ehour" placeholder="Hour" required></br> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td> |
||||
|
Enter start minute:</br> |
||||
|
</td> |
||||
|
<td> |
||||
|
<input type="text" name="emin" placeholder="Minute" required></br> |
||||
|
<td> |
||||
|
</tr> |
||||
|
<tr align = "center"> |
||||
|
<td colspan="3"> |
||||
|
<p style="margin:8px 0px"><button class="button">Submit</button></p> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</div> |
||||
|
</center> |
||||
|
</form> |
||||
|
</body> |
||||
|
</html> |
@ -0,0 +1,39 @@ |
|||||
|
var myForm = document.getElementById('myForm') |
||||
|
myForm.addEventListener('submit', function(e) { |
||||
|
e.preventDefault(); |
||||
|
//var data = JSON.stringify(formData(myForm));
|
||||
|
loadJSON(formData(myForm)) |
||||
|
}) |
||||
|
|
||||
|
function formData(form) { |
||||
|
let el = form.querySelectorAll('input[type="text"]'); |
||||
|
let ballast = document.getElementById('myBallasts').value; |
||||
|
let myData = ''; |
||||
|
myData += 'ballast' + '=' + ballast + '&'; |
||||
|
for (var x = 0; x < el.length; x++) { |
||||
|
let name = el[x].name; |
||||
|
let value = el[x].value; |
||||
|
//myData[name] = value;
|
||||
|
myData += name + '=' + value + '&' |
||||
|
} |
||||
|
return myData.slice(0, -1); |
||||
|
} |
||||
|
|
||||
|
function loadJSON(data) { |
||||
|
const url = '/settings.html'; |
||||
|
console.log(data) |
||||
|
const myData = data |
||||
|
fetch(url, { |
||||
|
method: 'post', |
||||
|
headers: { |
||||
|
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8" |
||||
|
}, |
||||
|
body: myData |
||||
|
}) |
||||
|
// .then(function (response) {
|
||||
|
// return response.json()
|
||||
|
// }).then(function (data) {
|
||||
|
// console.log(data)
|
||||
|
// })
|
||||
|
.catch(error => console.log(error)) |
||||
|
} |
@ -0,0 +1,7 @@ |
|||||
|
{ |
||||
|
"shour": 16, |
||||
|
"fadePeriod": 30, |
||||
|
"smin": 0, |
||||
|
"ehour": 22, |
||||
|
"emin": 0 |
||||
|
} |
@ -0,0 +1,7 @@ |
|||||
|
{ |
||||
|
"shour": 16, |
||||
|
"fadePeriod": 30, |
||||
|
"smin": 0, |
||||
|
"ehour": 22, |
||||
|
"emin": 0 |
||||
|
} |
@ -0,0 +1,7 @@ |
|||||
|
{ |
||||
|
"shour": 16, |
||||
|
"fadePeriod": 30, |
||||
|
"smin": 0, |
||||
|
"ehour": 22, |
||||
|
"emin": 0 |
||||
|
} |
@ -0,0 +1,23 @@ |
|||||
|
<html> |
||||
|
<head> |
||||
|
<title>HTML Upload successful</title> |
||||
|
<link href='main.css' rel='stylesheet' type='text/css'> |
||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> |
||||
|
<link rel="icon" type="image/png" sizes="144x144" href="/favicon-144x144.png"> |
||||
|
<link rel="icon" type="image/png" sizes="48x48" href="/favicon.ico"> |
||||
|
<link rel="manifest" href="/manifest.json"> |
||||
|
<meta name="theme-color" content="#00878f"> |
||||
|
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'> |
||||
|
</head> |
||||
|
<body> |
||||
|
<center> |
||||
|
<header> |
||||
|
<h1>HTML Uploader</h1> |
||||
|
</header> |
||||
|
<div> |
||||
|
<p>The upload was successful.</p> |
||||
|
<a class="button" href="/">Back</a> |
||||
|
</div> |
||||
|
</center> |
||||
|
</body> |
||||
|
</html> |
@ -0,0 +1,6 @@ |
|||||
|
{ |
||||
|
"temperatures": [ |
||||
|
48, |
||||
|
2 |
||||
|
] |
||||
|
} |
@ -0,0 +1,8 @@ |
|||||
|
$('#upload-button').filestyle({ |
||||
|
|
||||
|
buttonName: 'btn-success', |
||||
|
|
||||
|
buttonText: ' File selection', |
||||
|
btnClass: "btn-ternary", |
||||
|
dragDrop: true |
||||
|
}); |
@ -1,10 +0,0 @@ |
|||||
$(function(){ |
|
||||
var includes = $('[data-include]'); |
|
||||
jQuery.each(includes, function(){ |
|
||||
var file = '/' + $(this).data('include') + '.html'; |
|
||||
$(this).load(file); |
|
||||
}); |
|
||||
}); |
|
||||
// $(document).ready(function(){
|
|
||||
// $( "#header" ).load( "/menu.html" );
|
|
||||
// });
|
|
Write
Preview
Loading…
Cancel
Save
Reference in new issue