Fixed icon style and added splash screen
|
|
@ -127,3 +127,16 @@ html, body {
|
||||||
.add-modal form input[type=submit] {
|
.add-modal form input[type=submit] {
|
||||||
font-size: 1.05em;
|
font-size: 1.05em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.splash {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
position: absolute;
|
||||||
|
background: white;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 1.2em;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
|
||||||
1
app/src/main/assets/web/img/icon.png
Symbolic link
|
|
@ -0,0 +1 @@
|
||||||
|
../../../res/mipmap-xxxhdpi/ic_launcher.png
|
||||||
|
|
@ -9,6 +9,15 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
|
<div class="splash" v-if="splash">
|
||||||
|
<div class="icon">
|
||||||
|
<img src="img/icon.png">
|
||||||
|
</div>
|
||||||
|
<div class="app-name">
|
||||||
|
Platypush
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="services">
|
<div class="services">
|
||||||
<div class="no-items" v-if="loading || !Object.keys(services).length">
|
<div class="no-items" v-if="loading || !Object.keys(services).length">
|
||||||
<div class="loading" v-if="loading">Loading...</div>
|
<div class="loading" v-if="loading">Loading...</div>
|
||||||
|
|
@ -48,47 +57,7 @@
|
||||||
<div class="add-btn" @click="addModalVisible = true"></div>
|
<div class="add-btn" @click="addModalVisible = true"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script type="text/javascript" src="js/main.js"></script>
|
||||||
new Vue({
|
|
||||||
el: '#app',
|
|
||||||
data: function() {
|
|
||||||
return {
|
|
||||||
loading: false,
|
|
||||||
services: {},
|
|
||||||
addModalVisible: false,
|
|
||||||
addModalHost: undefined,
|
|
||||||
addModalPort: 8008,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
refresh: function() {
|
|
||||||
this.services = {
|
|
||||||
...this.services,
|
|
||||||
...JSON.parse(app.pollServices()),
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onClick: function(service) {
|
|
||||||
this.loadService(service.host, service.port)
|
|
||||||
},
|
|
||||||
|
|
||||||
onConnect: function() {
|
|
||||||
this.loadService(this.addModalHost, this.addModalPort)
|
|
||||||
},
|
|
||||||
|
|
||||||
loadService: function(host, port) {
|
|
||||||
this.loading = true
|
|
||||||
app.stopServicesPoll()
|
|
||||||
window.location.href = `http://${host}:${port}/`
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted: function() {
|
|
||||||
app.startServicesPoll()
|
|
||||||
window.setInterval(this.refresh, 2000)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
50
app/src/main/assets/web/js/main.js
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
new Vue({
|
||||||
|
el: '#app',
|
||||||
|
data: function() {
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
splash: false,
|
||||||
|
services: {},
|
||||||
|
addModalVisible: false,
|
||||||
|
addModalHost: undefined,
|
||||||
|
addModalPort: 8008,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
refresh: function() {
|
||||||
|
this.services = {
|
||||||
|
...this.services,
|
||||||
|
...JSON.parse(app.pollServices()),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onClick: function(service) {
|
||||||
|
this.loadService(service.host, service.port)
|
||||||
|
},
|
||||||
|
|
||||||
|
onConnect: function() {
|
||||||
|
this.loadService(this.addModalHost, this.addModalPort)
|
||||||
|
},
|
||||||
|
|
||||||
|
loadService: function(host, port) {
|
||||||
|
this.loading = true
|
||||||
|
app.stopServicesPoll()
|
||||||
|
window.location.href = `http://${host}:${port}/`
|
||||||
|
},
|
||||||
|
|
||||||
|
splashScreen: function(duration) {
|
||||||
|
var self = this
|
||||||
|
this.splash = true
|
||||||
|
window.setTimeout(() => {
|
||||||
|
self.splash = false
|
||||||
|
}, duration)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted: function() {
|
||||||
|
this.splashScreen(3000)
|
||||||
|
app.startServicesPoll()
|
||||||
|
window.setInterval(this.refresh, 500)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 6 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 29 KiB |