96 lines
3.2 KiB
HTML
96 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Platypush</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script type="text/javascript" src="../assets/js/vue.min.js"></script>
|
|
<script type="text/javascript" src="../assets/js/androidjs.js"></script>
|
|
<link rel="stylesheet" href="../assets/css/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<div class="services">
|
|
<div class="no-items" v-if="loading || !Object.keys(services).length">
|
|
<div class="loading" v-if="loading">Loading...</div>
|
|
<div class="empty" v-else>No Platypush web services found on the network</div>
|
|
</div>
|
|
|
|
<div class="service" v-for="service in services" :key="service.fqdn" @click="onClick(service)">
|
|
<span class="name" v-text="service.name"></span>
|
|
on
|
|
<span class="address" v-text="service.addresses[0]"></span>:<span class="port" v-text="service.port"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="add-modal-container" @click="addModalVisible = false" v-if="addModalVisible">
|
|
<div class="add-modal-background"></div>
|
|
<div class="add-modal" @click="$event.stopPropagation()">
|
|
<div class="header">
|
|
Connect to a Platypush web service
|
|
</div>
|
|
|
|
<div class="body">
|
|
<form @submit.prevent="onConnect">
|
|
<label>
|
|
<input type="text" placeholder="IP or hostname" v-model="addModalHost">
|
|
</label>
|
|
|
|
<label>
|
|
<input type="number" placeholder="Port" v-model="addModalPort">
|
|
</label>
|
|
|
|
<input type="submit" value="Connect">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="add-btn" @click="addModalVisible = true"></div>
|
|
</div>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data: function() {
|
|
return {
|
|
loading: false,
|
|
services: {},
|
|
addModalVisible: false,
|
|
addModalHost: undefined,
|
|
addModalPort: 8008,
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
refresh: function() {
|
|
front.send('get-services')
|
|
},
|
|
|
|
onClick: function(service) {
|
|
window.location.href = `http://${service.addresses[0]}:${service.port}/`
|
|
},
|
|
|
|
onConnect: function() {
|
|
window.location.href = `http://${this.addModalHost}:${this.addModalPort}/`
|
|
},
|
|
},
|
|
|
|
mounted: function() {
|
|
const self = this
|
|
this.loading = true
|
|
|
|
front.on('services', function(service) {
|
|
self.loading = false
|
|
Vue.set(self.services, service.fqdn, service)
|
|
})
|
|
|
|
this.refresh()
|
|
window.setInterval(this.refresh, 5000)
|
|
window.setTimeout(() => self.loading = false, 10000)
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|