168 lines
4.7 KiB
JavaScript
168 lines
4.7 KiB
JavaScript
new Vue({
|
|
el: '#app',
|
|
data: function() {
|
|
return {
|
|
loading: false,
|
|
splash: false,
|
|
services: {
|
|
scanned: [],
|
|
saved: [],
|
|
},
|
|
addModal: {
|
|
visible: false,
|
|
host: undefined,
|
|
port: 8008,
|
|
name: undefined,
|
|
save: false,
|
|
},
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
servicesByName: function() {
|
|
return Object.values(this.services).reduce((obj, services) =>
|
|
services.reduce((obj2, srv) => {
|
|
obj2[srv.name] = srv
|
|
return obj2
|
|
}, obj), {})
|
|
},
|
|
|
|
servicesByHostAndPort: function() {
|
|
return Object.values(this.services).reduce((obj, services) =>
|
|
services.reduce((obj2, srv) => {
|
|
obj2[`${srv.host}:${srv.port}`] = srv
|
|
return obj2
|
|
}, obj), {})
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
refresh: function() {
|
|
this.services.scanned = [
|
|
...this.services.scanned,
|
|
...JSON.parse(app.pollServices()).filter((srv) => !(srv.name in this.servicesByName)),
|
|
]
|
|
},
|
|
|
|
onServiceClick: function(service) {
|
|
this.connect(service.host, service.port)
|
|
},
|
|
|
|
onServiceConnect: function() {
|
|
if (!this.addModal.host?.length) {
|
|
app.alert('Please specify a host name or IP address')
|
|
return
|
|
}
|
|
|
|
if (this.addModal.save) {
|
|
if (!this.saveService(this.addModal.host, this.addModal.port, this.addModal.name || ''))
|
|
return
|
|
}
|
|
|
|
this.connect(this.addModal.host, this.addModal.port)
|
|
},
|
|
|
|
saveService: function(host, port, name) {
|
|
name = this.addModal.name.trim()
|
|
if (!name.length) {
|
|
app.alert('Please specify a name')
|
|
return false
|
|
}
|
|
|
|
let overwrite = false
|
|
if (name in this.servicesByName) {
|
|
if (!confirm(`A service named ${name} already exists. ` +
|
|
`Do you want to overwrite it?`))
|
|
return false
|
|
|
|
overwrite = true
|
|
} else if (`${host}:${port}` in this.servicesByHostAndPort) {
|
|
if (!confirm(`A service on ${host}:${port} already exists. ` +
|
|
`Do you want to overwrite it?`))
|
|
return false
|
|
|
|
overwrite = true
|
|
}
|
|
|
|
this.loading = true
|
|
try {
|
|
const rs = app.saveService(host, port, name, overwrite)
|
|
if (rs?.error)
|
|
throw rs.error
|
|
|
|
this.loadServices()
|
|
return true
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
|
|
removeService: function(savedIndex, event) {
|
|
event.stopPropagation()
|
|
const srv = this.services.saved[savedIndex]
|
|
if (!(srv && confirm('Are you sure that you want to remove this service?')))
|
|
return false
|
|
|
|
this.loading = true
|
|
try {
|
|
const rs = app.removeService(srv.host, srv.port, srv.name)
|
|
if (rs?.error)
|
|
throw rs.error
|
|
|
|
this.loadServices()
|
|
return true
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
|
|
connect: function(host, port) {
|
|
this.loading = true
|
|
app.stopServicesPoll()
|
|
window.location.href = `http://${host}:${port}/`
|
|
},
|
|
|
|
splashScreen: function(duration) {
|
|
const self = this
|
|
this.splash = true
|
|
setTimeout(() => {
|
|
self.splash = false
|
|
}, duration)
|
|
},
|
|
|
|
resetAddModal: function() {
|
|
this.addModal = {
|
|
host: undefined,
|
|
port: 8008,
|
|
name: undefined,
|
|
save: false,
|
|
}
|
|
},
|
|
|
|
loadServices: function() {
|
|
this.services = {
|
|
...this.services,
|
|
...JSON.parse(app.loadServices())
|
|
}
|
|
},
|
|
},
|
|
|
|
mounted: function() {
|
|
this.splashScreen(1500)
|
|
|
|
this.$watch(() => this.addModal.visible, (newValue) => {
|
|
if (!newValue)
|
|
this.resetAddModal()
|
|
})
|
|
|
|
this.$watch(() => this.addModal.save, (newValue) => {
|
|
if (newValue)
|
|
this.addModal.name = this.addModal.host
|
|
})
|
|
|
|
this.loadServices()
|
|
app.startServicesPoll()
|
|
setInterval(this.refresh, 500)
|
|
}
|
|
})
|