76 lines
1.9 KiB
HTML
76 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta name="theme-color" content="#000000">
|
|
<title>Mist Connections</title>
|
|
<script src="https://unpkg.com/vue@3"></script>
|
|
<script src="https://unpkg.com/axios@0.27.2"></script>
|
|
<link rel="stylesheet" href="style.css">
|
|
<style>
|
|
ul li {
|
|
list-style: none;
|
|
}
|
|
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 3.0s ease;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(30px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- <img class="fogwrapper" src="background.jpg"> -->
|
|
<ul>
|
|
<transition-group name="fade" tag="li">
|
|
<li v-for="node in nodes" v-if="nodes.length">
|
|
<a :href="'http://' + node.addr + ':1312'">{{ node.mistyID }}</a>
|
|
</li>
|
|
</transition-group>
|
|
</ul>
|
|
</div>
|
|
<div class="fog-background">
|
|
<div id="foglayer_01" class="fog">
|
|
<div class="image01"></div>
|
|
<div class="image02"></div>
|
|
</div>
|
|
<div id="foglayer_02" class="fog">
|
|
<div class="image01"></div>
|
|
<div class="image02"></div>
|
|
</div>
|
|
<div id="foglayer_03" class="fog">
|
|
<div class="image01"></div>
|
|
<div class="image02"></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
var app = Vue.createApp({
|
|
data() {
|
|
return {
|
|
nodes: []
|
|
}
|
|
},
|
|
methods: {
|
|
pollNodes() {
|
|
axios
|
|
.get('/api/nodes')
|
|
.then(response => (this.nodes = response.data))
|
|
}
|
|
},
|
|
mounted() {
|
|
this.pollNodes()
|
|
setInterval(() => { this.pollNodes(); }, 1000);
|
|
},
|
|
})
|
|
app.mount("#app")
|
|
</script>
|
|
</html>
|