mirror of
https://github.com/RoganDawes/P4wnP1_aloa.git
synced 2025-03-17 21:31:56 +01:00
web client: Finished Quasar reqork of USB gadget (including Notifications + Modal), ToDo: UMS config
This commit is contained in:
MaMe82
parent
4f17688a51
commit
4d818a3ba6
12
dist/www/index.html
vendored
12
dist/www/index.html
vendored
@ -56,12 +56,12 @@
|
||||
<q-page padding>
|
||||
<router-view></router-view>
|
||||
|
||||
<modal v-if="!$store.state.isConnected">
|
||||
<h3 slot="header">No connection to server</h3>
|
||||
<p slot="body">Trying to reconnect ... (attempt {{ $store.state.failedConnectionAttempts }})</p>
|
||||
<p slot="footer"></p>
|
||||
</modal>
|
||||
|
||||
<q-modal v-model="!$store.state.isConnected" minimized no-route-dismiss no-esc-dismiss no-backdrop-dismiss>
|
||||
<div style="padding: 50px">
|
||||
<div class="q-display-1 q-mb-md">No connection to server</div>
|
||||
<p>Trying to reconnect ... (attempt {{ $store.state.failedConnectionAttempts }})</p>
|
||||
</div>
|
||||
</q-modal>
|
||||
|
||||
</q-page>
|
||||
|
||||
|
||||
@ -63,14 +63,23 @@ func newCompUSBSettingsData(vm *hvue.VM) interface{} {
|
||||
|
||||
const (
|
||||
compUSBSettingsTemplate = `
|
||||
<q-page class="row justify gutter-sm">
|
||||
<div>
|
||||
<q-btn :loading="deploying" color="primary" @click="ApplyGadgetSettings" label="deploy"></q-btn>
|
||||
<q-btn color="secondary" @click="UpdateFromDeployedGadgetSettings" label="reset"></q-btn>
|
||||
<br><br>
|
||||
|
||||
<q-page>
|
||||
<q-card inline class="q-ma-sm">
|
||||
<q-card-title>
|
||||
USB Gadget Settings
|
||||
</q-card-title>
|
||||
<q-card-actions>
|
||||
<q-btn :loading="deploying" color="primary" @click="ApplyGadgetSettings" label="deploy"></q-btn>
|
||||
<q-btn color="secondary" @click="UpdateFromDeployedGadgetSettings" label="reset"></q-btn>
|
||||
|
||||
</q-card-actions>
|
||||
|
||||
<q-alert v-show="deploying" type="warning">If you're connected via Ethernet over USB, you will loose connection during deployment (deadline exceeded error)"</q-alert>
|
||||
|
||||
<q-list link>
|
||||
<q-list-header>Generic Gadget Settings</q-list-header>
|
||||
<q-item-separator />
|
||||
|
||||
<q-list-header>Generic</q-list-header>
|
||||
<q-item tag="label">
|
||||
<q-item-side>
|
||||
<q-toggle v-model="currentGadgetSettings.Enabled"></q-toggle>
|
||||
@ -128,7 +137,7 @@ const (
|
||||
|
||||
<q-item-separator />
|
||||
|
||||
<q-list-header>Gadget functions</q-list-header>
|
||||
<q-list-header>Functions</q-list-header>
|
||||
<q-item tag="label">
|
||||
<q-item-side>
|
||||
<q-toggle v-model="currentGadgetSettings.Use_CDC_ECM"></q-toggle>
|
||||
@ -138,6 +147,29 @@ const (
|
||||
<q-item-tile sublabel>Ethernet over USB for Linux, Unix and OSX</q-item-tile>
|
||||
</q-item-main>
|
||||
</q-item>
|
||||
|
||||
|
||||
<q-collapsible icon="settings_ethernet" label="MAC addresses for CDC ECM" v-show="currentGadgetSettings.Use_CDC_ECM" indent>
|
||||
<q-item tag="label" indent>
|
||||
<q-item-main>
|
||||
<q-item-tile label>Host Address</q-item-tile>
|
||||
<q-item-tile sublabel>MAC of USB adapter on remote host (format: AA:BB:CC:DD:EE:FF)</q-item-tile>
|
||||
<q-item-tile>
|
||||
<q-input v-model="currentGadgetSettings.CdcEcmSettings.HostAddr" inverted></q-input>
|
||||
</q-item-tile>
|
||||
</q-item-main>
|
||||
</q-item>
|
||||
<q-item tag="label" indent>
|
||||
<q-item-main>
|
||||
<q-item-tile label>Device Address</q-item-tile>
|
||||
<q-item-tile sublabel>MAC address on P4wnP1's end (format: AA:BB:CC:DD:EE:FF)</q-item-tile>
|
||||
<q-item-tile>
|
||||
<q-input v-model="currentGadgetSettings.CdcEcmSettings.DevAddr" inverted></q-input>
|
||||
</q-item-tile>
|
||||
</q-item-main>
|
||||
</q-item>
|
||||
</q-collapsible>
|
||||
|
||||
<q-item tag="label">
|
||||
<q-item-side>
|
||||
<q-toggle v-model="currentGadgetSettings.Use_RNDIS"></q-toggle>
|
||||
@ -147,6 +179,29 @@ const (
|
||||
<q-item-tile sublabel>Ethernet over USB for Windows (and some Linux kernels)</q-item-tile>
|
||||
</q-item-main>
|
||||
</q-item>
|
||||
|
||||
<q-collapsible icon="settings_ethernet" label="MAC addresses for RNDIS" v-show="currentGadgetSettings.Use_RNDIS" indent>
|
||||
<q-item tag="label" ident>
|
||||
<q-item-main>
|
||||
<q-item-tile label>Host Address</q-item-tile>
|
||||
<q-item-tile sublabel>MAC of USB adapter on remote host - could get overwritten by host (format: AA:BB:CC:DD:EE:FF)</q-item-tile>
|
||||
<q-item-tile>
|
||||
<q-input v-model="currentGadgetSettings.RndisSettings.HostAddr" inverted></q-input>
|
||||
</q-item-tile>
|
||||
</q-item-main>
|
||||
</q-item>
|
||||
<q-item tag="label" ident>
|
||||
<q-item-main>
|
||||
<q-item-tile label>Device Address</q-item-tile>
|
||||
<q-item-tile sublabel>MAC address on P4wnP1's end (format: AA:BB:CC:DD:EE:FF)</q-item-tile>
|
||||
<q-item-tile>
|
||||
<q-input v-model="currentGadgetSettings.RndisSettings.DevAddr" inverted></q-input>
|
||||
</q-item-tile>
|
||||
</q-item-main>
|
||||
</q-item>
|
||||
</q-collapsible>
|
||||
|
||||
|
||||
<q-item tag="label">
|
||||
<q-item-side>
|
||||
<q-toggle v-model="currentGadgetSettings.Use_HID_KEYBOARD"></q-toggle>
|
||||
@ -192,57 +247,11 @@ const (
|
||||
<q-item-tile sublabel>Emulates USB flash drive or CD-ROM</q-item-tile>
|
||||
</q-item-main>
|
||||
</q-item>
|
||||
<q-list>
|
||||
</div>
|
||||
</q-list>
|
||||
</q-card>
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
<table cellspacing="1">
|
||||
<tr>
|
||||
<td>CDC ECM</td>
|
||||
<td>
|
||||
<toggle-switch v-model="currentGadgetSettings.Use_CDC_ECM"></toggle-switch>
|
||||
<a @click="cdcEcmDetails = !cdcEcmDetails" :class="{ 'toggle-collapse-closed': cdcEcmDetails, 'toggle-collapse-opened': !cdcEcmDetails } "> </a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="cdcEcmDetails">
|
||||
<td colspan="2"><ethernet-addresses v-bind:settings="currentGadgetSettings.CdcEcmSettings" @hostAddrChange="currentGadgetSettings.CdcEcmSettings.HostAddr=$event" @devAddrChange="currentGadgetSettings.CdcEcmSettings.DevAddr=$event"></ethernet-addresses></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>RNDIS</td>
|
||||
<td>
|
||||
<toggle-switch v-model="currentGadgetSettings.Use_RNDIS"></toggle-switch>
|
||||
<a @click="rndisDetails = !rndisDetails" :class="{ 'toggle-collapse-closed': rndisDetails, 'toggle-collapse-opened': !rndisDetails } "></a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr v-if="rndisDetails">
|
||||
<td colspan="2"><ethernet-addresses v-bind:settings="currentGadgetSettings.RndisSettings" @hostAddrChange="currentGadgetSettings.RndisSettings.HostAddr=$event" @devAddrChange="currentGadgetSettings.RndisSettings.DevAddr=$event"></ethernet-addresses></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>HID Keyboard</td>
|
||||
<td><toggle-switch v-model="currentGadgetSettings.Use_HID_KEYBOARD"></toggle-switch></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HID Mouse</td>
|
||||
<td><toggle-switch v-model="currentGadgetSettings.Use_HID_MOUSE"></toggle-switch></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HID Raw</td>
|
||||
<td><toggle-switch v-model="currentGadgetSettings.Use_HID_RAW"></toggle-switch></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serial</td>
|
||||
<td><toggle-switch v-model="currentGadgetSettings.Use_SERIAL"></toggle-switch></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mass Storage</td>
|
||||
<td><toggle-switch v-model="currentGadgetSettings.Use_UMS"></toggle-switch></td>
|
||||
</tr>
|
||||
</table>
|
||||
-->
|
||||
</q-page>
|
||||
`
|
||||
)
|
||||
|
||||
@ -57,6 +57,7 @@ func main() {
|
||||
|
||||
router := NewVueRouter(
|
||||
VueRouterRoute("/usb","", "<usb-settings></usb-settings>"),
|
||||
VueRouterRoute("/","", "<usb-settings></usb-settings>"),
|
||||
VueRouterRoute("/hid","", "<hid-script></hid-script>"),
|
||||
VueRouterRoute("/hidjobs","", "<hidjobs></hidjobs>"),
|
||||
VueRouterRoute("/logger","", "<logger :max-entries='7'></logger>"),
|
||||
|
||||
@ -130,6 +130,7 @@ func actionUpdateRunningHidJobs(store *mvuex.Store, context *mvuex.ActionContext
|
||||
|
||||
func actionDeployCurrentGadgetSettings(store *mvuex.Store, context *mvuex.ActionContext, state *GlobalState) {
|
||||
go func() {
|
||||
|
||||
// ToDo: Indicate deployment process via global state
|
||||
state.CurrentlyDeployingGadgetSettings = true
|
||||
defer func() {state.CurrentlyDeployingGadgetSettings = false}()
|
||||
@ -142,7 +143,14 @@ func actionDeployCurrentGadgetSettings(store *mvuex.Store, context *mvuex.Action
|
||||
if err != nil {
|
||||
|
||||
//ToDo: use global store to return something, or allow actions to return promises (latter is too much JavaScript)
|
||||
Alert(err.Error())
|
||||
//Alert(err.Error())
|
||||
notification := &QuasarNotification{Object: O()}
|
||||
notification.Message = "Error in pre-check of new USB gadget settings"
|
||||
notification.Detail = err.Error()
|
||||
notification.Position = QUASAR_NOTIFICATION_POSITION_TOP
|
||||
notification.Type = QUASAR_NOTIFICATION_TYPE_NEGATIVE
|
||||
notification.Timeout = 5000
|
||||
QuasarNotify(notification)
|
||||
return
|
||||
}
|
||||
|
||||
@ -150,12 +158,25 @@ func actionDeployCurrentGadgetSettings(store *mvuex.Store, context *mvuex.Action
|
||||
_,err = RpcClient.RpcDeployRemoteGadgetSettings(time.Second*10)
|
||||
if err != nil {
|
||||
//ToDo: use global store to return something, or allow actions to return promises (latter is too much JavaScript)
|
||||
Alert(err.Error())
|
||||
//Alert(err.Error())
|
||||
notification := &QuasarNotification{Object: O()}
|
||||
notification.Message = "Error while deploying new USB gadget settings"
|
||||
notification.Detail = err.Error()
|
||||
notification.Position = QUASAR_NOTIFICATION_POSITION_TOP
|
||||
notification.Type = QUASAR_NOTIFICATION_TYPE_NEGATIVE
|
||||
notification.Timeout = 5000
|
||||
QuasarNotify(notification)
|
||||
return
|
||||
}
|
||||
|
||||
//ToDo: If we're here, we succeeded and should indicate this via global state
|
||||
Alert("GadgetSettings deployed successfully")
|
||||
//Alert("GadgetSettings deployed successfully")
|
||||
notification := &QuasarNotification{Object: O()}
|
||||
notification.Message = "New Gadget Settings deployed successfully"
|
||||
notification.Position = QUASAR_NOTIFICATION_POSITION_TOP
|
||||
notification.Type = QUASAR_NOTIFICATION_TYPE_POSITIVE
|
||||
notification.Timeout = 2000
|
||||
QuasarNotify(notification)
|
||||
|
||||
}()
|
||||
|
||||
|
||||
59
web_client/quasarHelper.go
Normal file
59
web_client/quasarHelper.go
Normal file
@ -0,0 +1,59 @@
|
||||
package main
|
||||
|
||||
import "github.com/gopherjs/gopherjs/js"
|
||||
|
||||
var GlobalQuasar = QuasarGetQuasar()
|
||||
|
||||
const (
|
||||
QUASAR_NOTIFICATION_TYPE_POSITIVE = "positive"
|
||||
QUASAR_NOTIFICATION_TYPE_NEGATIVE = "negative"
|
||||
QUASAR_NOTIFICATION_TYPE_WARNING = "warning"
|
||||
QUASAR_NOTIFICATION_TYPE_INFO = "info"
|
||||
|
||||
QUASAR_NOTIFICATION_POSITION_TOP = "top"
|
||||
QUASAR_NOTIFICATION_POSITION_TOP_LEFT = "top-left"
|
||||
QUASAR_NOTIFICATION_POSITION_TOP_RIGHT = "top-right"
|
||||
QUASAR_NOTIFICATION_POSITION_LEFT = "left"
|
||||
QUASAR_NOTIFICATION_POSITION_CENTER = "center"
|
||||
QUASAR_NOTIFICATION_POSITION_RIGHT = "right"
|
||||
QUASAR_NOTIFICATION_POSITION_BOTTOM = "bottom"
|
||||
QUASAR_NOTIFICATION_POSITION_BOTTOM_LEFT = "bottom-left"
|
||||
QUASAR_NOTIFICATION_POSITION_BOTTOM_RIGHT = "bottom-right"
|
||||
)
|
||||
|
||||
type Quasar struct {
|
||||
*js.Object
|
||||
Version string `js:"version"`
|
||||
Theme string `js:"theme"`
|
||||
Plugins map[string]*js.Object `js:"plugins"`
|
||||
}
|
||||
|
||||
type QuasarNotification struct {
|
||||
*js.Object
|
||||
Message string `js:"message"`
|
||||
Detail string `js:"detail"`
|
||||
Type string `js:"type"`
|
||||
Color string `js:"color"`
|
||||
TextColor string `js:"textColor"`
|
||||
Icon string `js:"icon"`
|
||||
Position string `js:"position"`
|
||||
Timeout uint `js:"timeout"`
|
||||
}
|
||||
|
||||
func QuasarGetQuasar() *Quasar {
|
||||
q := js.Global.Get("Quasar")
|
||||
return &Quasar{Object: q}
|
||||
}
|
||||
|
||||
func QuasarNotify(notification *QuasarNotification) {
|
||||
/*
|
||||
println("Quasar Notify")
|
||||
println("Quasar:", GlobalQuasar)
|
||||
println("Quasar global get:", QuasarGetQuasar().Plugins)
|
||||
for name, plugin := range GlobalQuasar.Plugins {
|
||||
println(name,plugin)
|
||||
}
|
||||
*/
|
||||
GlobalQuasar.Plugins["Notify"].Call("create", notification)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user