mirror of
https://github.com/oopuuu/zTC1.git
synced 2025-12-12 13:08:13 +08:00
767 lines
30 KiB
HTML
767 lines
30 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
|
<title>TC1 Material</title>
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<link rel="icon" sizes="192x192" href="http://119.23.191.79/tc1/images/android-desktop.png">
|
|
<!-- Add to homescreen for Safari on iOS -->
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
|
|
<link rel="apple-touch-icon-precomposed" href="http://119.23.191.79/tc1/images/ios-desktop.png">
|
|
<!-- Tile icon for Win8 (144x144 + tile color) -->
|
|
<meta name="msapplication-TileImage" content="http://119.23.191.79/tc1/images/touch/ms-touch-icon-144x144-precomposed.png">
|
|
<meta name="msapplication-TileColor" content="#3372DF">
|
|
<link rel="shortcut icon" href="http://119.23.191.79/tc1/images/favicon.png">
|
|
<link rel="stylesheet" href="assets/css_pack.css">
|
|
</head>
|
|
<body>
|
|
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
|
|
<header class="demo-header mdl-layout__header">
|
|
<div class="mdl-layout__header-row">
|
|
<span class="mdl-layout-title">TC1</span>
|
|
<div class="mdl-layout-spacer"></div>
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
|
|
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
|
|
<i class="material-icons">icon-search</i>
|
|
</label>
|
|
<div class="mdl-textfield__expandable-holder">
|
|
<input class="mdl-textfield__input" type="text" id="search">
|
|
<label class="mdl-textfield__label" for="search">Enter your query...</label>
|
|
</div>
|
|
</div>
|
|
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn">
|
|
<i class="material-icons">icon-more_vert</i>
|
|
</button>
|
|
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn">
|
|
<li class="mdl-menu__item">About</li>
|
|
<li class="mdl-menu__item">Contact</li>
|
|
<li class="mdl-menu__item">Legal information</li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
<div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
|
|
<header class="demo-drawer-header">
|
|
<img src="http://119.23.191.79/tc1/images/user.jpg" class="demo-avatar">
|
|
<div class="demo-avatar-dropdown">
|
|
<span>hello@example.com</span>
|
|
<div class="mdl-layout-spacer"></div>
|
|
<button id="accbtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
|
|
<i class="material-icons" role="presentation">icon-arrow_drop_down</i>
|
|
<span class="visuallyhidden">Accounts</span>
|
|
</button>
|
|
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="accbtn">
|
|
<li class="mdl-menu__item">hello@example.com</li>
|
|
<li class="mdl-menu__item">info@example.com</li>
|
|
<li class="mdl-menu__item"><i class="material-icons">icon-add</i>Add another account...</li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
<nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800">
|
|
<a class="mdl-navigation__link mdl-nav-active" href="javascript:ShowPage(1);"><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">icon-home</i>Home</a>
|
|
<a class="mdl-navigation__link" href="javascript:ShowPage(2);"><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">icon-settings</i>Config</a>
|
|
<a class="mdl-navigation__link" href="javascript:ShowPage(3);"><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">icon-access_alarm</i>Timed Task</a>
|
|
<a class="mdl-navigation__link" href="javascript:ShowPage(4);"><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">icon-info</i>System Status</a>
|
|
<a class="mdl-navigation__link" href="javascript:ShowPage(5);"><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">icon-cloud_download</i>OTA</a>
|
|
<a class="mdl-navigation__link" href="javascript:ShowPage(6);"><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">icon-notes</i>System Log</a>
|
|
<a class="mdl-navigation__link" href="javascript:ShowPage(7);"><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">icon-help</i>Abot</a>
|
|
</nav>
|
|
</div>
|
|
<main class="mdl-layout__content">
|
|
<div class="mdl-grid demo-content">
|
|
|
|
|
|
<div class="page page1 demo-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing">
|
|
<div class="demo-options mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--3-col-tablet mdl-cell--12-col-desktop">
|
|
<div class="mdl-card__supporting-text">
|
|
|
|
<h3>Power Control</h3>
|
|
<!--
|
|
<span class="mdl-list__item-secondary-action">
|
|
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-0">
|
|
<input type="checkbox" id="list-switch-0" class="mdl-switch__input" checked />
|
|
</label>
|
|
</span>
|
|
-->
|
|
<ul id="socket_ul" class="demo-list-control mdl-list">
|
|
<li class="mdl-list__item">
|
|
<span class="mdl-list__item-primary-content">
|
|
Socket-1
|
|
</span>
|
|
<span class="mdl-list__item-secondary-action">
|
|
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-1">
|
|
<input type="checkbox" id="list-switch-1" class="mdl-switch__input" checked />
|
|
</label>
|
|
</span>
|
|
</li>
|
|
<li class="mdl-list__item">
|
|
<span class="mdl-list__item-primary-content">
|
|
Socket-2
|
|
</span>
|
|
<span class="mdl-list__item-secondary-action">
|
|
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-2">
|
|
<input type="checkbox" id="list-switch-2" class="mdl-switch__input" checked />
|
|
</label>
|
|
</span>
|
|
</li>
|
|
<li class="mdl-list__item">
|
|
<span class="mdl-list__item-primary-content">
|
|
Socket-3
|
|
</span>
|
|
<span class="mdl-list__item-secondary-action">
|
|
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-3">
|
|
<input type="checkbox" id="list-switch-3" class="mdl-switch__input" checked />
|
|
</label>
|
|
</span>
|
|
</li>
|
|
<li class="mdl-list__item">
|
|
<span class="mdl-list__item-primary-content">
|
|
Socket-4
|
|
</span>
|
|
<span class="mdl-list__item-secondary-action">
|
|
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-4">
|
|
<input type="checkbox" id="list-switch-4" class="mdl-switch__input" checked />
|
|
</label>
|
|
</span>
|
|
</li>
|
|
<li class="mdl-list__item">
|
|
<span class="mdl-list__item-primary-content">
|
|
Socket-5
|
|
</span>
|
|
<span class="mdl-list__item-secondary-action">
|
|
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-5">
|
|
<input type="checkbox" id="list-switch-5" class="mdl-switch__input" checked />
|
|
</label>
|
|
</span>
|
|
</li>
|
|
<li class="mdl-list__item">
|
|
<span class="mdl-list__item-primary-content">
|
|
Socket-6
|
|
</span>
|
|
<span class="mdl-list__item-secondary-action">
|
|
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-6">
|
|
<input type="checkbox" id="list-switch-6" class="mdl-switch__input" checked />
|
|
</label>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="ct-chart-par" class="page page1 mdl-card__supporting-text mdl-shadow--2dp mdl-cell mdl-cell--6-col"
|
|
style="height:300px;overflow-x:scroll;overflow-y:hidden;">
|
|
<div id="ct-chart" class="ct-chart ct-perfect-fourth" style="height:280px;"></div>
|
|
</div>
|
|
|
|
<div class="page page2 mdl-cell mdl-cell--5-col demo-card-square mdl-card mdl-shadow--2dp" style="overflow: unset;">
|
|
<div class="mdl-card__title mdl-card--expand">
|
|
<h2 class="mdl-card__title-text">Network Config</h2>
|
|
</div>
|
|
<div class="mdl-card__supporting-text" style="overflow: unset;">
|
|
<form action="#">
|
|
<div id="div_wifi_sel" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fix-height">
|
|
<input id="wifi_sel" type="text" value="" class="mdl-textfield__input" readonly>
|
|
<input type="hidden" value="" name="wifi_sel">
|
|
<i class="mdl-icon-toggle__label material-icons">icon-keyboard_arrow_down</i>
|
|
<label for="wifi_sel" class="mdl-textfield__label">SSID</label>
|
|
<ul id="ssid_sel_list" for="wifi_sel" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
|
|
</ul>
|
|
</div>
|
|
<div id="div_custom_ssid" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" hidden>
|
|
<input id="custom_ssid" class="mdl-textfield__input" type="text">
|
|
<label class="mdl-textfield__label" for="custom_ssid">SSID</label>
|
|
</div>
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
|
<input id="custom_password" class="mdl-textfield__input" type="password">
|
|
<label class="mdl-textfield__label" for="custom_password">Password</label>
|
|
</div>
|
|
<div>
|
|
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="custom_ap">
|
|
<input type="radio" id="custom_ap" class="mdl-radio__button" name="options" value="1">
|
|
<span class="mdl-radio__label">AP</span>
|
|
</label>
|
|
<label class="station-radio mdl-radio mdl-js-radio mdl-js-ripple-effect" for="custom_station">
|
|
<input type="radio" id="custom_station" class="mdl-radio__button" name="options" value="2" checked>
|
|
<span class="mdl-radio__label">Station</span>
|
|
</label>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="mdl-card__actions mdl-card--border">
|
|
<a id="wifi_submit" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
|
Submit
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page page2 mdl-cell mdl-cell--5-col demo-card-square mdl-card mdl-shadow--2dp" style="z-index: unset;">
|
|
<div class="mdl-card__title mdl-card--expand">
|
|
<h2 class="mdl-card__title-text">MQTT Config</h2>
|
|
</div>
|
|
<div class="mdl-card__supporting-text">
|
|
<form action="#">
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
|
<input class="mdl-textfield__input" type="text" id="mqtt_addr">
|
|
<label class="mdl-textfield__label" for="mqtt_addr">MQTT Addr</label>
|
|
</div>
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
|
<input class="mdl-textfield__input" type="text" id="mqtt_port">
|
|
<label class="mdl-textfield__label" for="mqtt_port">MQTT Port</label>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="mdl-card__actions mdl-card--border">
|
|
<a id="mqtt_submit" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
|
Submit
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page page3 mdl-cell mdl-cell--5-col demo-card-event mdl-card mdl-shadow--2dp">
|
|
<table id="timed_task_tb" class="mdl-data-table mdl-js-data-table">
|
|
<tr>
|
|
<th>Time</th>
|
|
<th>Socket</th>
|
|
<th>On</th>
|
|
<th>Option</th>
|
|
</tr>
|
|
<tr>
|
|
<td>02-15 07:11:08</td>
|
|
<td>1</td>
|
|
<td>0</td>
|
|
<td><a>Delete</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>2020-02-15<br>07:11:08</td>
|
|
<td>1</td>
|
|
<td>0</td>
|
|
<td><a>Delete</a></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="page page3 over-unset mdl-cell mdl-cell--5-col demo-card-square mdl-card mdl-shadow--2dp" style="z-index: unset;">
|
|
<div class="mdl-card__title mdl-card--expand">
|
|
<h2 class="mdl-card__title-text">Add Task</h2>
|
|
</div>
|
|
<div class="over-unset mdl-card__supporting-text">
|
|
<form action="#">
|
|
<div class="mdl-textfield mdl-js-textfield">
|
|
<input class="mdl-textfield__input" type="datetime-local" id="task_time">
|
|
<label class="mdl-textfield__label" for="sample1"></label>
|
|
</div>
|
|
<!-- Simple Select with arrow -->
|
|
<div class="mdl-textfield mdl-js-textfield getmdl-select">
|
|
<input type="text" value="" class="mdl-textfield__input" readonly>
|
|
<input type="hidden" value="" id="task_skt_idx" name="task_skt_idx">
|
|
<i class="mdl-icon-toggle__label material-icons">icon-keyboard_arrow_down</i>
|
|
<label for="task_skt_idx" class="mdl-textfield__label">Socket</label>
|
|
<ul for="task_skt_idx" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
|
|
<li class="mdl-menu__item" data-val="1">Socket-1</li>
|
|
<li class="mdl-menu__item" data-val="2">Socket-2</li>
|
|
<li class="mdl-menu__item" data-val="3">Socket-3</li>
|
|
<li class="mdl-menu__item" data-val="4">Socket-4</li>
|
|
<li class="mdl-menu__item" data-val="5">Socket-5</li>
|
|
<li class="mdl-menu__item" data-val="6">Socket-6</li>
|
|
</ul>
|
|
</div>
|
|
<div class="mdl-textfield mdl-js-textfield">
|
|
<span>On or Off: </span>
|
|
<span class="on-off mdl-list__item-secondary-action">
|
|
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="task_on">
|
|
<input type="checkbox" id="task_on" class="mdl-switch__input" checked />
|
|
</label>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="mdl-card__actions mdl-card--border">
|
|
<a href="javascript:AddTimedTask();" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
|
Submit
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="page page4 mdl-cell mdl-cell--12-col demo-card-event mdl-card mdl-shadow--2dp">
|
|
<table class="mdl-data-table mdl-js-data-table">
|
|
<tr>
|
|
<th>Version</th>
|
|
<th id="info_version">v1.0.33</th>
|
|
</tr>
|
|
<tr>
|
|
<td>IP</td>
|
|
<td id="info_ip">192.168.33.222</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Mask</td>
|
|
<td id="info_mask">255.255.255.0</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Gateway</td>
|
|
<td id="info_gateway">192.168.33.1</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Uptime</td>
|
|
<td id="uptime">10:13:43</td>
|
|
</tr>
|
|
</table>
|
|
<div class="mdl-card__actions mdl-card--border">
|
|
<div class="mdl-layout-spacer"></div>
|
|
<i class="material-icons">icon-event</i>
|
|
<!-- <span>2020-02-22</span> -->
|
|
<a class="mdl-button">
|
|
2020-02-22
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page page5 mdl-cell mdl-cell--12-col demo-card-square mdl-card mdl-shadow--2dp">
|
|
<div class="mdl-card__title mdl-card--expand">
|
|
<h2 class="mdl-card__title-text">OTA</h2>
|
|
</div>
|
|
<div class="mdl-card__supporting-text">
|
|
<form action="#">
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
|
<input class="mdl-textfield__input" type="text" id="ota_url" value="http://119.23.191.79/tc1/tc1ota.bin">
|
|
<label class="mdl-textfield__label" for="ota_url">OTA Url</label>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="mdl-card__actions mdl-card--border">
|
|
<a href="javascript:OtaStart();" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
|
Submit
|
|
</a>
|
|
</div>
|
|
<div id="ota_status" class="mdl-progress mdl-js-progress"></div>
|
|
</div>
|
|
|
|
<div class="page page6 mdl-cell mdl-cell--12-col demo-card-square mdl-card mdl-shadow--2dp">
|
|
<div class="mdl-card__title mdl-card--expand">
|
|
<h2 class="mdl-card__title-text">System Log</h2>
|
|
</div>
|
|
<div class="sys-log mdl-card__supporting-text">
|
|
<pre id="sys_log"></pre>
|
|
</div>
|
|
<div class="mdl-card__actions mdl-card--border">
|
|
<a href="javascript:GetSysLog();" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
|
Refresh
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page page7 mdl-cell mdl-cell--12-col demo-card-square mdl-card mdl-shadow--2dp">
|
|
<div class="mdl-card__title mdl-card--expand">
|
|
<h2 class="mdl-card__title-text">About</h2>
|
|
</div>
|
|
<div class="sys-log mdl-card__supporting-text">
|
|
<p>
|
|
<a href="https://github.com/zogodo/zTC1" target="_blank">github/zogodo/zTC1</a>
|
|
</p>
|
|
<p><a href="https://github.com/a2633063/zTC1" target="_blank">github/a2633063/zTC1</a>
|
|
<br>受该项目启发而写, 但基本未保留原项目代码.</p>
|
|
<p>
|
|
<a href="https://github.com/MXCHIP/mico-os" target="_blank">mico-os</a>
|
|
</p>
|
|
<p>
|
|
<a href="https://getmdl.io/index.html" target="_blank">Material Design Lite</a>
|
|
</p>
|
|
<p>
|
|
<a href="https://jquery.com/" target="_blank">jQuery</a>
|
|
</p>
|
|
<p>
|
|
<a href="https://gionkunz.github.io/chartist-js/index.html" target="_blank">Chartist</a>
|
|
</p>
|
|
<p>
|
|
<a href="https://creativeit.github.io/getmdl-select/" target="_blank">getmdl-select</a>
|
|
</p>
|
|
<p>
|
|
<a href="https://material.io/resources/icons/" target="_blank">Material Icons</a>
|
|
</p>
|
|
<p>
|
|
<a href="https://fonts.google.com/specimen/Roboto" target="_blank">Roboto</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- <button id="demo-show-toast" class="mdl-button mdl-js-button mdl-button--raised" type="button">Show Toast</button> -->
|
|
<div id="demo-toast-example" class="mdl-js-snackbar mdl-snackbar">
|
|
<div class="mdl-snackbar__text"></div>
|
|
<button class="mdl-snackbar__action" type="button"></button>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="assets/js_pack.js"></script>
|
|
<script>
|
|
//弹框-start
|
|
var snackbarContainer = document.querySelector('#demo-toast-example');
|
|
function ShowToast(mess) {
|
|
var data = {message: mess};
|
|
snackbarContainer.MaterialSnackbar.showSnackbar(data);
|
|
}
|
|
//弹框-end
|
|
$(document).ready(function() {
|
|
componentHandler.upgradeAllRegistered();
|
|
//Material加载完成
|
|
});
|
|
|
|
//Ajax-start
|
|
function AjaxErr(re) {
|
|
ShowToast("Ajax err: " + re.status);
|
|
}
|
|
function Ajax(url, onsuccess, type, data) {
|
|
$.ajax({
|
|
url: url,
|
|
type: type,
|
|
data: data,
|
|
success: function(re) {
|
|
onsuccess(re.replace(/'/g, '"'));
|
|
},
|
|
error: AjaxErr
|
|
});
|
|
}
|
|
function HttpGet(url, onsuccess) {
|
|
Ajax(url, onsuccess, "GET", null);
|
|
}
|
|
function HttpPost(url, onsuccess, data) {
|
|
Ajax(url, onsuccess, "POST", data);
|
|
}
|
|
function HttpDel(url, onsuccess, data) {
|
|
Ajax(url, onsuccess, "DELETE", data);
|
|
}
|
|
//Ajax-end
|
|
|
|
var info_station_name;
|
|
var info_wifi_password;
|
|
var mqtt_addr;
|
|
var mqtt_port;
|
|
|
|
HttpGet("/status", function (re) {
|
|
var status = JSON.parse(re);
|
|
var status_arr = status.sockets.split(",");
|
|
for (var i = 0; i < status_arr.length; i++) {
|
|
//checkboxs[i].checked = status_arr[i] == "1";
|
|
if (status_arr[i] == "1") {
|
|
switch_lables[i].MaterialSwitch.on();
|
|
} else {
|
|
switch_lables[i].MaterialSwitch.off();
|
|
}
|
|
}
|
|
|
|
if(status.mode == 1) {
|
|
$("#custom_station").click();
|
|
info_station_name = status.station_ssid;
|
|
info_wifi_password = status.station_pwd;
|
|
} else {
|
|
$("#custom_ap").click();
|
|
$("#custom_ssid")[0].parentElement.MaterialTextfield.change(status.ap_ssid);
|
|
info_wifi_password = status.ap_pwd;
|
|
}
|
|
|
|
mqtt_addr = status.mqtt_addr;
|
|
mqtt_port = status.mqtt_port;
|
|
$("#info_version").html(status.version);
|
|
$("#info_ip").html(status.ip);
|
|
$("#info_mask").html(status.mask);
|
|
$("#info_gateway").html(status.gateway);
|
|
$("#uptime").html(status.up_time);
|
|
});
|
|
|
|
//Menu-start
|
|
var chart_par = document.getElementById("ct-chart-par");
|
|
chart_par.scrollTo(chart_par.scrollWidth, 0);
|
|
|
|
var ssid_slt = document.getElementById("ssid_sel_list");
|
|
|
|
var rescan_timer;
|
|
|
|
function ShowPage(id) {
|
|
$(".page").hide();
|
|
$(".page"+id).show();
|
|
$(".is-small-screen >> .mdl-layout__drawer-button").click()
|
|
|
|
chart_par.scrollTo(chart_par.scrollWidth, 0);
|
|
|
|
$(".mdl-navigation__link").removeClass("mdl-nav-active");
|
|
$(".mdl-navigation__link:eq("+(id-1)+")").addClass("mdl-nav-active");
|
|
|
|
if(id == 2) {
|
|
Rescan();
|
|
$("#custom_password")[0].parentElement.MaterialTextfield.change(info_wifi_password);
|
|
$("#mqtt_addr")[0].parentElement.MaterialTextfield.change(mqtt_addr);
|
|
$("#mqtt_port")[0].parentElement.MaterialTextfield.change(mqtt_port);
|
|
} else {
|
|
window.clearTimeout(rescan_timer);
|
|
}
|
|
}
|
|
ShowPage(1);
|
|
//Menu-end
|
|
|
|
//Socket-start
|
|
var socket_ul = document.getElementById("socket_ul");
|
|
var checkboxs = socket_ul.getElementsByClassName("mdl-switch__input");
|
|
var switch_lables = socket_ul.getElementsByClassName("mdl-switch");
|
|
$(".mdl-switch__input").on("click", function() {
|
|
var sockets_st = "";
|
|
for (var i = 0; i < checkboxs.length; i++) {
|
|
sockets_st += (checkboxs[i].checked ? "1," : "0,");
|
|
}
|
|
HttpPost("/socket", function (re) {
|
|
}, sockets_st);
|
|
});
|
|
//Socket-end
|
|
|
|
//Config-start
|
|
$("#wifi_sel").on("change", function() {
|
|
var div_custom = $("#div_custom_ssid")[0];
|
|
var wifi_sel_id = $("input[name='wifi_sel']")[0];
|
|
var wifi_sel_name = $("#wifi_sel")[0];
|
|
var custom_ssid = $("#custom_ssid")[0];
|
|
if (wifi_sel_id.value == "0") {
|
|
div_custom.hidden = false;
|
|
custom_ssid.parentElement.MaterialTextfield.change("");
|
|
} else {
|
|
div_custom.hidden = true;
|
|
custom_ssid.parentElement.MaterialTextfield.change(wifi_sel_name.value);
|
|
}
|
|
});
|
|
|
|
$("#custom_ap").on("change", function(){
|
|
$("#div_custom_ssid")[0].hidden = false;
|
|
$("#div_wifi_sel")[0].hidden = true;
|
|
});
|
|
$("#custom_station").on("change", function(){
|
|
$("#div_custom_ssid")[0].hidden = true;
|
|
$("#div_wifi_sel")[0].hidden = false;
|
|
});
|
|
|
|
function Rescan() {
|
|
HttpPost("/wifi/scan", function (re) {
|
|
if (re == "OK") {
|
|
window.setTimeout(GetScanResult, 1000);
|
|
} else {
|
|
ShowToast(re);
|
|
}
|
|
});
|
|
}
|
|
|
|
function GetScanResult() {
|
|
HttpGet("/wifi/scan", function (re) {
|
|
if (re != "NO") {
|
|
var wifi_sel_name = $("#wifi_sel").val();
|
|
if(!wifi_sel_name) {
|
|
wifi_sel_name = info_station_name;
|
|
}
|
|
var wifi_sel_id = $("input[name='wifi_sel']").val();
|
|
var ret = JSON.parse(re.replace(/'/g, '"')); //TODO: Fix this later
|
|
if(wifi_sel_id === "0") {
|
|
var html = "<li class='mdl-menu__item' data-val='0' data-selected='true'>Manual</li>";
|
|
} else {
|
|
var html = "<li class='mdl-menu__item' data-val='0'>Manual</li>";
|
|
}
|
|
for (var i = 0; i < ret.ssids.length; i++) {
|
|
if(wifi_sel_name == ret.ssids[i]) {
|
|
html += "<li class='mdl-menu__item' data-val='"+(i+1)+"' data-selected='true'>"+ret.ssids[i]+"</li>";
|
|
} else {
|
|
html += "<li class='mdl-menu__item' data-val='"+(i+1)+"'>"+ret.ssids[i]+"</li>";
|
|
}
|
|
}
|
|
ssid_slt.innerHTML = html;
|
|
getmdlSelect.init(".getmdl-select");
|
|
rescan_timer = window.setTimeout(Rescan, 20000);
|
|
return;
|
|
}
|
|
window.setTimeout(GetScanResult, 1000);
|
|
});
|
|
}
|
|
|
|
$("#mqtt_submit").on("click", function() {
|
|
var mqtt_addr = $("#mqtt_addr").val();
|
|
var mqtt_port = $("#mqtt_port").val();
|
|
var params = mqtt_addr + " " + mqtt_port;
|
|
HttpPost("/mqtt/config", function (re) {
|
|
ShowToast(re);
|
|
}, params);
|
|
});
|
|
|
|
//Quotation Marks
|
|
function ContainQM(str) {
|
|
if (str == ""
|
|
|| str.indexOf("'") >= 0
|
|
|| str.indexOf('"') >= 0
|
|
|| str.indexOf(' ') >= 0
|
|
|| str.length > 32) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
var qm_mess = "Sorry, can't use ' or \" or space or empty.\n\nAlso, length <= 32."
|
|
var le_mess = "Sorry, length < 8."
|
|
|
|
$("#wifi_submit").on("click", function() {
|
|
var mode = $("#custom_station").prop("checked") ? 1 : 0;
|
|
var ssid = $("#custom_ssid").val();
|
|
var passwd = $("#custom_password").val();
|
|
if (ContainQM(ssid) || ContainQM(passwd)) {
|
|
alert(qm_mess);
|
|
return;
|
|
}
|
|
if (passwd.length < 8) {
|
|
alert(le_mess);
|
|
return;
|
|
}
|
|
var params = mode + " " + ssid + " " + passwd;
|
|
HttpPost("/wifi/config", function (re) {
|
|
ShowToast(re);
|
|
}, params);
|
|
});
|
|
|
|
//图表-start
|
|
var data = { series: [ [] ] };
|
|
var t = new Chartist.Line('.ct-chart', data, {showArea: true, axisY: {position: 'end'}});
|
|
var power_idx = 0;
|
|
var chart_wth = 0;
|
|
function GetPowerRecord() {
|
|
HttpPost("/power", function (re) {
|
|
re = re.replace(/'/g, '"');
|
|
var power = JSON.parse(re);
|
|
power_idx = power.idx + 1;
|
|
|
|
var x = chart_par.scrollWidth - chart_par.offsetWidth - chart_par.scrollLeft;
|
|
|
|
power.powers.forEach(element => {
|
|
data.series[0].push(element/10);
|
|
});
|
|
chart_wth += power.powers.length;
|
|
$("#ct-chart").width(chart_wth * 10);
|
|
t.update(data);
|
|
if (power.powers.length != 0 && x < 100) {
|
|
chart_par.scrollTo(chart_par.scrollWidth, 0);
|
|
}
|
|
$("#uptime").html(power.up_time);
|
|
|
|
var status_arr = power.sockets.split(",");
|
|
for (var i = 0; i < status_arr.length; i++) {
|
|
//checkboxs[i].checked = status_arr[i] == "1";
|
|
if (status_arr[i] == "1") {
|
|
switch_lables[i].MaterialSwitch.on();
|
|
} else {
|
|
switch_lables[i].MaterialSwitch.off();
|
|
}
|
|
}
|
|
|
|
window.setTimeout(GetPowerRecord, 3000);
|
|
}, power_idx.toString());
|
|
}
|
|
$(document).ready(function(){
|
|
GetPowerRecord();
|
|
})
|
|
//图表-end
|
|
|
|
//定时任务-start
|
|
function GetTimedTask() {
|
|
HttpGet("/task", function (re) {
|
|
var tb_html = "\
|
|
<tr>\
|
|
<th>Time</th>\
|
|
<th>Socket</th>\
|
|
<th>On</th>\
|
|
<th>Option</th>\
|
|
</tr>";
|
|
console.log(re);
|
|
var tasks = JSON.parse(re);
|
|
if (tasks.length == 0) {
|
|
tb_html += "<tr><td colspan='4'>No Timed Task</td></tr>";
|
|
}
|
|
for (var i = 0; i < tasks.length; i++) {
|
|
tb_html += "\
|
|
<tr>\
|
|
<td>" + tasks[i].prs_time + "</td>\
|
|
<td>" + tasks[i].socket_idx + "</td>\
|
|
<td>" + tasks[i].on + "</td>\
|
|
<td><a href='javascript:DelTimedTask(" + tasks[i].timestamp + ");'>Delete</a></td>\
|
|
</tr>";
|
|
}
|
|
document.getElementById("timed_task_tb").innerHTML = tb_html;
|
|
});
|
|
}
|
|
GetTimedTask();
|
|
|
|
function AddTimedTask() {
|
|
var tim = document.getElementById("task_time").value;
|
|
var idx = document.getElementById("task_skt_idx").value;
|
|
var on = document.getElementById("task_on").checked;
|
|
|
|
if (tim == null || tim == "" || tim.length < 10) {
|
|
alert("task time invalid!");
|
|
return;
|
|
}
|
|
var prs_time = Math.round(new Date(tim) / 1000);
|
|
//prs_time = prs_time + parseInt(sec);
|
|
on = on ? "1" : "0";
|
|
var cmd = prs_time + " " + idx + " " + on;
|
|
if (cmd.length >= 16) {
|
|
alert("CMD ERROR!");
|
|
}
|
|
HttpPost("/task", function (re) {
|
|
GetTimedTask();
|
|
}, cmd);
|
|
}
|
|
function DelTimedTask(timestamp) {
|
|
HttpDel("/task/"+timestamp, function (re) {
|
|
ShowToast("Delete timed task OK!");
|
|
GetTimedTask();
|
|
}, timestamp);
|
|
}
|
|
//定时任务-end
|
|
|
|
//OTA-start
|
|
function OtaStart() {
|
|
var ota_url = document.getElementById("ota_url").value;
|
|
HttpPost("/ota", function (re) {
|
|
OtaStatus();
|
|
}, ota_url);
|
|
}
|
|
var ota_status = document.querySelector('#ota_status');
|
|
ota_status.addEventListener('mdl-componentupgraded', function() {
|
|
this.MaterialProgress.setProgress(0);
|
|
});
|
|
function OtaStatus() {
|
|
HttpGet("/ota", function (re) {
|
|
var percent = parseInt(re);
|
|
//console.log(re + " " + parseInt(re));
|
|
ota_status.MaterialProgress.setProgress(percent);
|
|
if (percent < 0) {
|
|
location.reload();
|
|
}
|
|
window.setTimeout(OtaStatus, 1000);
|
|
});
|
|
}
|
|
//OTA-end
|
|
|
|
//日志-start
|
|
var sys_log = document.getElementById("sys_log");
|
|
var log_div = document.getElementsByClassName("sys-log")[0];
|
|
function GetSysLog() {
|
|
HttpGet("/log", function (re) {
|
|
sys_log.innerHTML = re;
|
|
log_div.scrollTo(0, log_div.scrollHeight);
|
|
});
|
|
}
|
|
GetSysLog();
|
|
//日志-end
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|