web client: Finished Quasar reqork of USB gadget (including Notifications + Modal), ToDo: UMS config

dist/www/index.html

@@ -56,12 +56,12 @@
             <q-page padding>
                 <router-view></router-view>
 
-                <modal v-if="!$store.state.isConnected">
+                <q-modal v-model="!$store.state.isConnected" minimized no-route-dismiss no-esc-dismiss no-backdrop-dismiss>
-                    <h3 slot="header">No connection to server</h3>
+                    <div style="padding: 50px">
-                    <p slot="body">Trying to reconnect ... (attempt {{ $store.state.failedConnectionAttempts }})</p>
+                        <div class="q-display-1 q-mb-md">No connection to server</div>
-                    <p slot="footer"></p>
+                        <p>Trying to reconnect ... (attempt {{ $store.state.failedConnectionAttempts }})</p>
-                </modal>
+                    </div>
-
+                </q-modal>
 
             </q-page>
 

web_client/hvueCompUSBSettings.go

@@ -63,14 +63,23 @@ func newCompUSBSettingsData(vm *hvue.VM) interface{} {
 
 const (
 	compUSBSettingsTemplate = `
-<q-page class="row justify gutter-sm">
+<q-page>
-<div>
+<q-card inline class="q-ma-sm">
-	<q-btn :loading="deploying" color="primary" @click="ApplyGadgetSettings" label="deploy"></q-btn>
+	<q-card-title>
-	<q-btn color="secondary" @click="UpdateFromDeployedGadgetSettings" label="reset"></q-btn>
+    	USB Gadget Settings
-	<br><br>
+	</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>	
+	</q-list>	
-</div>
+</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>
 `
 )

web_client/main.go

@@ -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>"),

web_client/mvuexGlobalState.go

@@ -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)
 
 	}()
 

web_client/quasarHelper.go

@@ -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)
+}
+