P4wnP1_aloa/web_client/hvueCompHIDJobs.go

// +build js

package main

import (
	"github.com/gopherjs/gopherjs/js"
	"github.com/mame82/hvue"
)

type CompHIDJobsData struct {
	*js.Object
}

func newCompHIDJobsData(vm *hvue.VM) interface{} {

	cc := &CompHIDJobsData{
		Object: js.Global.Get("Object").New(),
	}

	return cc
}

func InitCompHIDJobs() {
	hvue.NewComponent(
		"hid-job-overview",
		hvue.Template(compHIDJobOverviewTemplate),
		hvue.DataFunc(newCompHIDJobsData),
		hvue.Computed("jobs",
			func(vm *hvue.VM) interface{} {
				//return vm.Get("$store").Get("state").Get("hidJobList").Get("jobs")
				return vm.Get("$store").Get("getters").Get("hidjobs")
			}),
	)

	hvue.NewComponent(
		"hid-job-overview-item",
		hvue.Template(compHIDJobOverViewItemTemplate),
		hvue.Method("cancel", func(vm *hvue.VM) {
			job := &jsHidJobState{Object:vm.Get("job")}
			println("Aborting job :", job.Id)
			vm.Get("$store").Call("dispatch", VUEX_ACTION_CANCEL_HID_JOB, job.Id)
		}),
		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"

				}
			}),
		hvue.Computed("jobicon",
			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 "error"
				case job.HasSucceeded && !job.HasFailed:
					return "check_circle"
				case !(job.HasFailed || job.HasSucceeded):
					return "sync"
				default:
					return "help"

				}
			}),
		hvue.PropObj("job", hvue.Required),
	)

}

const (
	/*
// HIDJobList
type jsHidJobState struct {
*js.Object
Id             int64  `js:"id"`
VmId           int64  `js:"vmId"`
HasFailed      bool   `js:"hasFailed"`
HasSucceeded   bool   `js:"hasSucceeded"`
LastMessage    string `js:"lastMessage"`
TextResult     string `js:"textResult"`
LastUpdateTime string `js:"lastUpdateTime"` //JSON timestamp from server
ScriptSource   string `js:"textSource"`
}
 */


	compHIDJobOverViewItemTemplate = `
<q-item highlight>
	<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-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-popover>
				cancel HIDScript job {{ job.id }}
			</q-popover>
		</q-btn>
	</q-item-side>
</q-item>
`



//{ "evtype": 0, "vmId": 2, "jobId": 3, "hasError": false, "result": "null", "error": "", "message": "Script started", "time": "2018-07-30 04:56:42.297533 +0000 UTC m=+7625.097825001" }
compHIDJobOverviewTemplate = `
	<q-card class="full-height">
		<q-list>
			<q-list-header>Running</q-list-header>
			<hid-job-overview-item v-for="job in $store.getters.hidjobsRunning" :job="job" :key="job.id"></hid-job-overview-item>
		</q-list>
		<q-list>
			<q-collapsible  opened icon-toggle>
				<template slot="header">
					<q-item-main label="Succeeded" :sublabel="'(' + $store.getters.hidjobsSucceeded.length + ' successful jobs)'"/>
					<q-item-side v-if="$store.getters.hidjobsSucceeded.length > 0" right>
						<q-btn icon="delete" color="red" @click="$store.dispatch('removeSucceededHidJobs')" round inverted flat />
					</q-item-side>
				</template>
				<hid-job-overview-item v-for="job in $store.getters.hidjobsSucceeded" :job="job" :key="job.id"></hid-job-overview-item>
			</q-collapsible>
		</q-list>
		<q-list>
			<q-collapsible  opened icon-toggle>
				<template slot="header">
					<q-item-main label="Failed" :sublabel="'(' + $store.getters.hidjobsFailed.length + ' failed jobs)'"/>
					<q-item-side v-if="$store.getters.hidjobsFailed.length > 0" right>
						<q-btn icon="delete" color="red" @click="$store.dispatch('removeFailedHidJobs')" round inverted flat />
					</q-item-side>
				</template>
				<hid-job-overview-item v-for="job in $store.getters.hidjobsFailed" :job="job" :key="job.id"></hid-job-overview-item>
			</q-collapsible>
		</q-list>
	</q-card>

`
)