platypush-app/views/index.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>