platypush-app/app/src/main/assets/web/index.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>