Rebuilt the network view in Svelte
This commit is contained in:
David Carley
@@ -1,35 +1,9 @@
|
||||
//-/////////////////////////////////////////////////////////////////////////////
|
||||
//- //
|
||||
//- This file is part of the Buildbotics firmware. //
|
||||
//- //
|
||||
//- Copyright (c) 2015 - 2018, Buildbotics LLC //
|
||||
//- All rights reserved. //
|
||||
//- //
|
||||
//- This file ("the software") is free software: you can redistribute it //
|
||||
//- and/or modify it under the terms of the GNU General Public License, //
|
||||
//- version 2 as published by the Free Software Foundation. You should //
|
||||
//- have received a copy of the GNU General Public License, version 2 //
|
||||
//- along with the software. If not, see <http://www.gnu.org/licenses/>. //
|
||||
//- //
|
||||
//- The software is distributed in the hope that it will be useful, but //
|
||||
//- WITHOUT ANY WARRANTY; without even the implied warranty of //
|
||||
//- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU //
|
||||
//- Lesser General Public License for more details. //
|
||||
//- //
|
||||
//- You should have received a copy of the GNU Lesser General Public //
|
||||
//- License along with the software. If not, see //
|
||||
//- <http://www.gnu.org/licenses/>. //
|
||||
//- //
|
||||
//- For information regarding this software email: //
|
||||
//- "Joseph Coffland" <joseph@buildbotics.com> //
|
||||
//- //
|
||||
//-/////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
doctype html
|
||||
html(lang="en")
|
||||
head
|
||||
meta(charset="utf-8")
|
||||
meta(name="viewport", content="width=device-width, initial-scale=1.0")
|
||||
link(rel="preload" href="/fonts/material-symbols-outlined.woff2" as="font" type="font/woff2" crossorigin)
|
||||
|
||||
title Onefinity CNC - Web interface
|
||||
|
||||
@@ -39,12 +13,16 @@ html(lang="en")
|
||||
style: include ../static/css/font-awesome.min.css
|
||||
style: include ../static/css/Audiowide.css
|
||||
style: include ../static/css/clusterize.css
|
||||
style: include ../svelte-components/node_modules/svelte-material-ui/bare.css
|
||||
style: include ../../build/http/svelte-components/smui.css
|
||||
style: include ../../build/http/svelte-components/style.css
|
||||
style: include ../../build/http/svelte-components/material-symbols-outlined.css
|
||||
style: include:stylus ../stylus/style.styl
|
||||
|
||||
|
||||
body(v-cloak)
|
||||
#overlay(v-if="status != 'connected'")
|
||||
span {{status}}
|
||||
|
||||
#layout
|
||||
a#menuLink.menu-link(href="#menu"): span
|
||||
|
||||
@@ -100,36 +78,34 @@ html(lang="en")
|
||||
|
||||
#main
|
||||
.header
|
||||
.header-content
|
||||
.banner
|
||||
img(src="/images/onefinity_logo.png")
|
||||
.title
|
||||
.fa.fa-thermometer-full(class="error",
|
||||
v-if="80 <= state.rpi_temp",
|
||||
title="Raspberry Pi temperature too high.")
|
||||
.subtitle
|
||||
| CNC Controller #[b {{state.demo ? 'Demo ' : ''}}]
|
||||
| v{{config.full_version}}
|
||||
a.upgrade-version(v-if="show_upgrade()", href="#admin-general")
|
||||
| Upgrade to v{{latestVersion}}
|
||||
.fa.fa-check(v-if="!show_upgrade() && latestVersion",
|
||||
title="Firmware up to date" style="font-size: inherit")
|
||||
.p {{get_ip_address()}} {{get_ssid()}}
|
||||
.brand
|
||||
img(src="/images/onefinity_logo.png")
|
||||
.version
|
||||
| v{{config.full_version}}
|
||||
a.upgrade-link(v-if="show_upgrade()", href="#admin-general")
|
||||
| Upgrade to v{{latestVersion}}
|
||||
.upgrade-attention(v-if="show_upgrade()")
|
||||
| !
|
||||
|
||||
.estop(:class="{active: state.es}")
|
||||
estop(@click="estop")
|
||||
.pi-temp-warning
|
||||
.fa.fa-thermometer-full(class="error",
|
||||
v-if="80 <= state.rpi_temp",
|
||||
title="Raspberry Pi temperature too high.")
|
||||
|
||||
.video(title="Plug camera into USB.\n" +
|
||||
"Left click to toggle video size.\n" +
|
||||
"Right click to toggle crosshair.", @click="toggle_video",
|
||||
@contextmenu="toggle_crosshair", :class="video_size")
|
||||
.crosshair(v-if="crosshair")
|
||||
.vertical
|
||||
.horizontal
|
||||
.box
|
||||
img(src="/api/video")
|
||||
.whitespace
|
||||
|
||||
.clear
|
||||
.video(title="Plug camera into USB.\n" +
|
||||
"Left click to toggle video size.\n" +
|
||||
"Right click to toggle crosshair.", @click="toggle_video",
|
||||
@contextmenu="toggle_crosshair", :class="video_size")
|
||||
.crosshair(v-if="crosshair")
|
||||
.vertical
|
||||
.horizontal
|
||||
.box
|
||||
img(src="/api/video")
|
||||
|
||||
.estop(:class="{active: state.es}")
|
||||
estop(@click="estop")
|
||||
|
||||
.content(class="{{currentView}}-view")
|
||||
component(:is="currentView + '-view'", :index="index",
|
||||
@@ -211,4 +187,5 @@ html(lang="en")
|
||||
script: include ../static/js/clusterize.min.js
|
||||
script: include ../static/js/three.min.js
|
||||
script: include:browserify ../js/main.js
|
||||
script: include ../../build/http/svelte-components/index.js
|
||||
script: include ../static/js/ui.js
|
||||
|
||||
@@ -1,130 +1,3 @@
|
||||
//-/////////////////////////////////////////////////////////////////////////////
|
||||
//- //
|
||||
//- This file is part of the Buildbotics firmware. //
|
||||
//- //
|
||||
//- Copyright (c) 2015 - 2018, Buildbotics LLC //
|
||||
//- All rights reserved. //
|
||||
//- //
|
||||
//- This file ("the software") is free software: you can redistribute it //
|
||||
//- and/or modify it under the terms of the GNU General Public License, //
|
||||
//- version 2 as published by the Free Software Foundation. You should //
|
||||
//- have received a copy of the GNU General Public License, version 2 //
|
||||
//- along with the software. If not, see <http://www.gnu.org/licenses/>. //
|
||||
//- //
|
||||
//- The software is distributed in the hope that it will be useful, but //
|
||||
//- WITHOUT ANY WARRANTY; without even the implied warranty of //
|
||||
//- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU //
|
||||
//- Lesser General Public License for more details. //
|
||||
//- //
|
||||
//- You should have received a copy of the GNU Lesser General Public //
|
||||
//- License along with the software. If not, see //
|
||||
//- <http://www.gnu.org/licenses/>. //
|
||||
//- //
|
||||
//- For information regarding this software email: //
|
||||
//- "Joseph Coffland" <joseph@buildbotics.com> //
|
||||
//- //
|
||||
//-/////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
script#admin-network-view-template(type="text/x-template")
|
||||
#admin-network
|
||||
h2 Hostname
|
||||
.pure-form.pure-form-aligned
|
||||
.pure-control-group
|
||||
label(for="hostname") Hostname
|
||||
input(name="hostname", v-model="hostname", @keyup.enter="set_hostname")
|
||||
button.pure-button.pure-button-primary(@click="set_hostname") Set
|
||||
|
||||
message(:show.sync="hostnameSet")
|
||||
h3(slot="header") Hostname Set
|
||||
div(slot="body")
|
||||
p Hostname was successfuly set to #[strong {{hostname}}].
|
||||
p Rebooting to apply changes.
|
||||
p Redirecting to new hostname in {{redirectTimeout}} seconds.
|
||||
div(slot="footer")
|
||||
|
||||
h2 Remote SSH User
|
||||
.pure-form.pure-form-aligned
|
||||
.pure-control-group
|
||||
label(for="username") Username
|
||||
input(name="username", v-model="username", @keyup.enter="set_username")
|
||||
button.pure-button.pure-button-primary(@click="set_username") Set
|
||||
|
||||
.pure-form.pure-form-aligned
|
||||
.pure-control-group
|
||||
label(for="current") Current Password
|
||||
input(name="current", v-model="current", type="password")
|
||||
.pure-control-group
|
||||
label(for="pass1") New Password
|
||||
input(name="pass1", v-model="password", type="password")
|
||||
.pure-control-group
|
||||
label(for="pass2") New Password
|
||||
input(name="pass2", v-model="password2", type="password")
|
||||
button.pure-button.pure-button-primary(@click="set_password") Set
|
||||
|
||||
message(:show.sync="passwordSet")
|
||||
h3(slot="header") Password Set
|
||||
p(slot="body")
|
||||
|
||||
message(:show.sync="usernameSet")
|
||||
h3(slot="header") Username Set
|
||||
p(slot="body")
|
||||
|
||||
h2 Wifi Setup
|
||||
.pure-form.pure-form-aligned
|
||||
.pure-control-group
|
||||
label(for="wifi_mode") Mode
|
||||
select(name="wifi_mode", v-model="wifi_mode",
|
||||
title="Select client or access point mode")
|
||||
option(value="disabled") Disabled
|
||||
option(value="client") Client
|
||||
option(value="ap") Access Point
|
||||
button.pure-button.pure-button-primary(@click="wifiConfirm = true",
|
||||
v-if="wifi_mode == 'disabled'") Set
|
||||
|
||||
.pure-control-group(v-if="wifi_mode == 'ap'")
|
||||
label(for="wifi_ch") Channel
|
||||
select(name="wifi_ch", v-model="wifi_ch")
|
||||
each ch in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
|
||||
option(value=ch)= ch
|
||||
|
||||
.pure-control-group(v-if="wifi_mode != 'disabled'")
|
||||
label(for="ssid") Network (SSID)
|
||||
input(name="ssid", v-model="wifi_ssid")
|
||||
|
||||
.pure-control-group(v-if="wifi_mode != 'disabled'")
|
||||
label(for="wifi_pass") Password
|
||||
input(name="wifi_pass", v-model="wifi_pass", type="password")
|
||||
button.pure-button.pure-button-primary(@click="wifiConfirm = true") Set
|
||||
|
||||
p(v-if="wifi_mode != 'disabled'").
|
||||
WARNING: WiFi may be unreliable in an electrically noisy environment
|
||||
such as a machine shop.
|
||||
|
||||
message.wifi-confirm(:show.sync="wifiConfirm")
|
||||
h3(slot="header") Configure Wifi and reboot?
|
||||
div(slot="body")
|
||||
p
|
||||
| After configuring the Wifi settings the controller will
|
||||
| automatically reboot.
|
||||
table
|
||||
tr
|
||||
th Mode
|
||||
td {{wifi_mode}}
|
||||
tr(v-if="wifi_mode == 'ap'")
|
||||
th Channel
|
||||
td {{wifi_ch}}
|
||||
tr(v-if="wifi_mode != 'disabled'")
|
||||
th SSID
|
||||
td {{wifi_ssid}}
|
||||
tr(v-if="wifi_mode != 'disabled'")
|
||||
th Auth
|
||||
td {{wifi_pass ? 'WPA2' : 'Open'}}
|
||||
|
||||
div(slot="footer")
|
||||
button.pure-button(@click="wifiConfirm = false") Cancel
|
||||
button.pure-button.button-success(@click="config_wifi") OK
|
||||
|
||||
message(:show.sync="rebooting")
|
||||
h3(slot="header") Rebooting
|
||||
p(slot="body") Please wait...
|
||||
div(slot="footer")
|
||||
#svelte-root
|
||||
|
||||
Reference in New Issue
Block a user