102 lines
3.5 KiB
HTML
102 lines
3.5 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="js/vue.min.js"></script>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<div class="splash" v-if="splash">
|
|
<div class="icon">
|
|
<img src="img/icon.png" alt="">
|
|
</div>
|
|
<div class="app-name">
|
|
Platypush
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loading" v-if="loading">
|
|
<div class="icon">
|
|
<div v-for="n in 4" :key="n"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="services">
|
|
<div class="saved" v-if="services.saved?.length">
|
|
<h3>Saved services</h3>
|
|
|
|
<div class="service" v-for="(service, i) in services.saved" :key="i"
|
|
@click="onServiceClick(service)">
|
|
<span class="name" v-text="service.name" v-if="service.name"></span>
|
|
<span v-if="service.name"> on </span>
|
|
<span class="address" v-text="service.host"></span>:<span class="port" v-text="service.port"></span>
|
|
<span class="remove" @click="removeService(i, $event)">
|
|
<img src="img/trash.png" alt="Remove">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="scanned">
|
|
<h3>Scanned services</h3>
|
|
|
|
<div class="no-items" v-if="!services.scanned?.length">
|
|
<div class="empty">No Platypush web services found on the network</div>
|
|
</div>
|
|
|
|
<div class="service" v-for="(service, i) in services.scanned" :key="i"
|
|
@click="onServiceClick(service)">
|
|
<span class="name" v-text="service.name" v-if="service.name"></span>
|
|
<span v-if="service.name"> on </span>
|
|
<span class="address" v-text="service.host"></span>:<span class="port" v-text="service.port"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="add-modal-container" @click="addModal.visible = false" v-if="addModal.visible">
|
|
<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="onServiceConnect">
|
|
<label>
|
|
<input type="text" placeholder="IP or hostname" v-model="addModal.host">
|
|
</label>
|
|
|
|
<label>
|
|
<input type="number" placeholder="Port" v-model="addModal.port">
|
|
</label>
|
|
|
|
<label v-if="addModal.save">
|
|
<input type="text" placeholder="Name" v-model="addModal.name">
|
|
</label>
|
|
|
|
<div class="buttons">
|
|
<div class="button">
|
|
<input type="submit" value="Connect">
|
|
</div>
|
|
<div class="button">
|
|
<label>
|
|
Remember this host
|
|
<input type="checkbox" v-model="addModal.save">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="add-btn" @click="addModal.visible = true"></div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="js/main.js"></script>
|
|
|
|
</body>
|
|
</html>
|