izackp/Apollo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Started Work on Web UI

Browse Source
This commit is contained in:
Elia Zammuto
2021-05-09 18:55:34 +02:00
parent 661c8260e5
commit 4fe90dcbd6
12 changed files with 498 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
assets/web/apps.html Normal file
View File

@@ -0,0 +1,124 @@
<div id="app" class="container">
<h1>Applications</h1>
<div>Applications are refreshed only when Client is restarted</div>
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="(app,i) in apps" :key="i">
<td>{{app.name}}</td>
<td><button class="btn btn-primary" @click="editApp(i)">Edit</button>
<button class="btn btn-danger" @click="showDeleteForm(i)">Delete</button></td>
</tr>
</tbody>
</table>
<div class="edit-form" v-if="showEditForm">
<div class="mb-3">
<label for="appName" class="form-label">Application Name</label>
<input type="text" class="form-control" id="appName" aria-describedby="appNameHelp" v-model="editForm.name">
<div id="appNameHelp" class="form-text">Application Name, as shown on Moonlight</div>
</div>
<div class="mb-3">
<label for="appName" class="form-label">Output</label>
<input type="text" class="form-control" id="appOutput" aria-describedby="appOutputHelp" v-model="editForm.output">
<div id="appOutputHelp" class="form-text">The file where the output of the command is stored, if it is not specified, the output is ignored</div>
</div>
<div class="mb-3">
<label for="appName" class="form-label">Command Preparations</label>
<div class="form-text">A list of commands to be run before/after the application. <br> If any of the prep-commands fail, starting the application is aborted</div>
<table>
<thead>
<th class="precmd-head">Do</th>
<th class="precmd-head">Undo</th>
<th></th>
</thead>
<tbody>
<tr v-for="(c,i) in editForm['prep-cmd']">
<td><input type="text" class="form-control" v-model="c.do"></td>
<td><input type="text" class="form-control" v-model="c.undo"></td>
<td><button class="btn btn-danger" @click="editForm['prep-cmd'].splice(i,1)">&times;</button></td>
</tr>
</tbody>
</table>
<button class="btn btn-success" @click="addPrepCmd">&plus;</button>
</div>
<div class="mb-3">
<label for="appCmd" class="form-label">Command</label>
<input type="text" class="form-control" id="appCmd" aria-describedby="appCmdHelp" v-model="editForm.cmd">
<div id="appCmdHelp" class="form-text">The main application, if it is not specified, a processs is started that sleeps indefinitely</div>
</div>
<div class="d-flex">
<button @click="showEditForm = false" class="btn btn-secondary m-2">Cancel</button>
<button class="btn btn-primary m-2" @click="save">Save</button>
</div>
</div>
<button class="btn btn-primary" v-else @click="newApp">+ Add New</button>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
apps: [],
showEditForm: false,
editForm: null,
}
},
created() {
fetch("/api/apps").then(r => r.json()).then((r) => {
console.log(r);
this.apps = r.apps;
})
},
methods: {
newApp(){
this.editForm = {
name: '',
output: '',
cmd: [],
index: -1,
"prep-cmd": []
};
this.editForm.index = -1;
this.showEditForm = true;
},
editApp(id){
this.editForm = JSON.parse(JSON.stringify(this.apps[id]));
this.$set(this.editForm,"index",id);
if(this.editForm["prep-cmd"] === undefined)this.$set(this.editForm,"prep-cmd",[]);
this.showEditForm = true;
},
showDeleteForm(id){
let resp = confirm("Are you sure to delete " + this.apps[id].name + "?");
if(resp){
fetch("/api/apps/" + id,{method: "DELETE"}).then((r)=>{
if(r.status == 200)document.location.reload();
});
}
},
addPrepCmd(){
this.editForm['prep-cmd'].push({
do: '',
undo: '',
});
},
save(){
console.log("AAAAAAA")
fetch("/api/apps",{method: "POST",body: JSON.stringify(this.editForm)}).then((r)=>{
if(r.status == 200)document.location.reload();
});
}
}
})
</script>
<style>
.precmd-head {
width: 200px;
}
</style>

3
assets/web/clients.html Normal file
View File

@@ -0,0 +1,3 @@
<div id="content" class="container">
<h1>Clients</h1>
</div>

4
assets/web/config.html Normal file
View File

@@ -0,0 +1,4 @@
<div id="content" class="container">
<h1>Hello, Sunshine!</h1>
<p>Placeholer for config page</p>
</div>

45
assets/web/header.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sunshine</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #ffc400;">
<div class="container-fluid">
<span class="navbar-brand">Sunshine</span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/pin">PIN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/apps">Applications</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/clients">Clients</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/config">Configuration</a>
</li>
</ul>
</div>
</nav>

4
assets/web/index.html Normal file
View File

@@ -0,0 +1,4 @@
<div id="content" class="container">
<h1>Hello, Sunshine!</h1>
<p>Sunshine is a Gamestream host for Moonlight</p>
</div>

22
assets/web/pin.html Normal file
View File

@@ -0,0 +1,22 @@
<div id="content" class="container">
<form action="" class="form" id="form">
<input type="number" placeholder="PIN" id="pin-input">
<button class="btn btn-primary">Send</button>
<div id="status"></div>
</form>
</div>
<script>
document.querySelector("#form").addEventListener("submit", (e) => {
e.preventDefault();
let pin = document.querySelector("#pin-input").value;
document.querySelector("#status").innerHTML = "";
fetch("/pin/" + pin).then((response)=>{
if(response.status == 200){
document.querySelector("#status").innerHTML = `<div class="alert alert-success" role="alert">Success! Please check Moonlight to continue</div>`;
} else if(response.status == 418){
document.querySelector("#status").innerHTML = `<div class="alert alert-danger" role="alert">PIN does not match, please check if it's typed correctly</div>`;
}
})
})
</script>