highperfocused/P4wnP1_aloa
1
0
Fork 0
mirror of https://github.com/RoganDawes/P4wnP1_aloa.git synced 2025-03-17 13:21:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

webclient: reworked info view for HID jobs

Browse Source
This commit is contained in:
MaMe82 2018-11-23 17:19:44 +01:00
parent ffca3c079f
commit 78b7a786cd
3 changed files with 165 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
web_client/hvueCompHIDJobs.go
View File

@ -35,6 +35,14 @@ func InitCompHIDJobs() {
hvue.NewComponent(
"hid-job-overview-item",
hvue.Template(compHIDJobOverViewItemTemplate),
hvue.DataFunc(func(vm *hvue.VM) interface{} {
data := &struct {
*js.Object
ShowDetails bool `js:"ShowDetails"`
}{Object: O()}
data.ShowDetails = false
return data
}),
hvue.Method("cancel", func(vm *hvue.VM) {
job := &jsHidJobState{Object:vm.Get("job")}
println("Aborting job :", job.Id)
@ -91,6 +99,61 @@ func InitCompHIDJobs() {
hvue.PropObj("job", hvue.Required),
)
hvue.NewComponent(
"job-detail-modal",
hvue.Template(templateHIDJobDetails),
hvue.ComputedWithGetSet(
"visible",
func(vm *hvue.VM) interface{} {
return vm.Get("value")
},
func(vm *hvue.VM, newValue *js.Object) {
vm.Call("$emit", "input", newValue)
},
),
hvue.PropObj(
"value",
hvue.Required,
hvue.Types(hvue.PBoolean),
),
hvue.PropObj(
"job",
hvue.Required,
),
hvue.Computed("jobstate",
func(vm *hvue.VM) interface{} {
//fetch job and cast back to jobstate
job := &jsHidJobState{Object:vm.Get("job")}
switch {
case job.HasFailed && !job.HasSucceeded:
return "FAILED"
case job.HasSucceeded && !job.HasFailed:
return "SUCCEEDED"
case !(job.HasFailed || job.HasSucceeded):
return "RUNNING"
default:
return "UNKNOWN_STATE"
}
}),
hvue.Computed("jobcolor",
func(vm *hvue.VM) interface{} {
//fetch job and cast back to jobstate
job := &jsHidJobState{Object:vm.Get("job")}
switch {
case job.HasFailed && !job.HasSucceeded:
return "negative"
case job.HasSucceeded && !job.HasFailed:
return "positive"
case !(job.HasFailed || job.HasSucceeded):
return "warning"
default:
return "info"
}
}),
)
}
const (
@ -109,32 +172,115 @@ ScriptSource string `js:"textSource"`
}
*/
templateHIDJobDetails = `
<q-modal v-model="visible">
<q-modal-layout>
<q-toolbar slot="header">
<q-toolbar-title>
HIDScript job details
</q-toolbar-title>
</q-toolbar>
<div class="row gutter-sm">
<div class="col-3">
<q-item tag="label">
<q-item-main>
<q-item-tile label>Job ID</q-item-tile>
<q-item-tile>
<q-input readonly v-model="job.id" inverted></q-input>
</q-item-tile>
</q-item-main>
</q-item>
</div>
<div class="col-3">
<q-item tag="label">
<q-item-main>
<q-item-tile label>VM ID</q-item-tile>
<q-item-tile>
<q-input readonly v-model="job.vmId" inverted></q-input>
</q-item-tile>
</q-item-main>
</q-item>
</div>
<div class="col-6">
<q-item tag="label">
<q-item-main>
<q-item-tile label>Sate</q-item-tile>
<q-item-tile>
<q-input readonly :color="jobcolor" v-model="jobstate" inverted></q-input>
</q-item-tile>
</q-item-main>
</q-item>
</div>
<div class="col-12">
<q-item tag="label">
<q-item-main>
<q-item-tile label>HIDScript result</q-item-tile>
<q-item-tile>
<q-input readonly :color="jobcolor" v-model="job.textResult" inverted></q-input>
</q-item-tile>
</q-item-main>
</q-item>
</div>
<div class="col-12">
<q-item tag="label">
<q-item-main>
<q-item-tile label>HIDScript source</q-item-tile>
<q-item-tile>
<q-input readonly type="textarea" v-model="job.textSource" inverted></q-input>
</q-item-tile>
</q-item-main>
</q-item>
</div>
<div class="col-12">
<q-item tag="label">
<q-item-main>
<q-item-tile>
<q-btn color="secondary" v-close-overlay label="close" />
</q-item-tile>
</q-item-main>
</q-item>
</div>
</div>
</q-modal-layout>
</q-modal>
`
compHIDJobOverViewItemTemplate = `
<q-item highlight>
<job-detail-modal v-model="ShowDetails" :job="job"></job-detail-modal>
<q-item-side :icon="jobicon" :color="jobcolor" />
<q-item-main>
<q-item-tile label>Job {{ job.id }}</q-item-tile>
<q-item-tile sublabel>State {{ jobstate }} </q-item-tile>
</q-item-main>
<q-item-side right v-if="job.hasSucceeded || job.hasFailed">
<q-btn flat round dense icon="more_horiz">
<q-popover>
{{ job.textResult }}
</q-popover>
<q-tooltip>
show job result
</q-tooltip>
</q-btn>
</q-item-side>
<q-item-side right v-if="!job.hasSucceeded && !job.hasFailed">
<q-btn flat round dense color="negative" icon="cancel" @click="cancel">
<q-tooltip>
cancel HIDScript job {{ job.id }}
</q-tooltip>
</q-btn>
<q-item-side right>
<div class="row no-wrap">
<div v-if="!job.hasSucceeded && !job.hasFailed">
<q-btn flat round dense color="negative" icon="cancel" @click="cancel">
<q-tooltip>
cancel HIDScript job {{ job.id }}
</q-tooltip>
</q-btn>
</div>
<div>
<q-btn flat round dense icon="info" @click="ShowDetails=true">
<q-tooltip>
show HIDScript job details
</q-tooltip>
</q-btn>
</div>
</div>
</q-item-side>
</q-item>
`

6
web_client/main.go
View File

@ -45,14 +45,10 @@ func Router(router *js.Object) hvue.ComponentOption {
func main() {
println(GetBaseURL())
//println(GetBaseURL())
store := InitGlobalState() //sets Vuex store in JS window.store
// RpcClient.StartListening() //Start event listening after global state is initiated (contains the event handlers)
// ToDo: delete because debug
// RpcClient.GetAllDeployedEthernetInterfaceSettings(time.Second*10)
router := NewVueRouter(
"/usb",

3
web_client/vueRouter.go
View File

@ -3,7 +3,6 @@ package main
import (
"github.com/gopherjs/gopherjs/js"
"github.com/mame82/hvue"
)
//Very simple vue-router binding, support only Component templates for routes
@ -37,6 +36,8 @@ func VueRouterRoute(path, name, template string) VueRouterOption {
}
}
func NewVueRouter(defaultRoute string, opts ...VueRouterOption) *js.Object {
c := &VueRouterConfig{Object:O()}
c.Routes = js.Global.Get("Array").New()