Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tweaks to the Web interface #108

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Tweaks to the Web interface #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
15e5120
Update Bootstrap to v5.0.2
jorys-paulin Jun 25, 2021
7fca6ad
Added footer to HTML pages
jorys-paulin Jun 25, 2021
66ec727
Update the PIN page
jorys-paulin Jun 25, 2021
43df48b
Update the password page
jorys-paulin Jun 27, 2021
ed4643e
Update index page
jorys-paulin Jun 27, 2021
18915c9
Update clients page
jorys-paulin Jun 27, 2021
53d4778
Merge branch 'master' of https://github.com/loki-47-6F-64/sunshine in…
jorys-paulin Jun 30, 2021
a7eb1f0
Update config page
jorys-paulin Jul 1, 2021
30e2524
Update parts of the apps page
jorys-paulin Jul 1, 2021
74e7dbd
Update apps page
jorys-paulin Jul 18, 2021
a7c22ac
Merge branch 'master' of https://github.com/loki-47-6F-64/sunshine in…
jorys-paulin Jul 18, 2021
8c99f57
Update parts of apps page
jorys-paulin Jul 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
184 changes: 97 additions & 87 deletions assets/web/apps.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,95 +1,110 @@
<div id="app" class="container">
<div class="my-4">
<main role="main" id="app">
<div class="container py-3">
<h1>Applications</h1>
<div>Applications are refreshed only when Client is restarted</div>
<p class="mb-0">Create, edit and delete applications from this page. Changes are applied immediately, but you may need to restart Moonlight to see the changes.</p>
</div>
<div class="card p-4">
<div class="container py-3" v-if="!showEditForm">
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Actions</th>
<th class="col-md-8">Application</th>
<th class="col-md-4">Quick 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 class="col-md-8 align-middle">{{app.name}}</td>
<td class="col-md-4">
<div class="d-flex gap-3">
<button class="btn btn-sm w-100 btn-outline-primary" title="Edit this application" @click="editApp(i)">Edit</button>
<button class="btn btn-sm w-100 btn-outline-danger" title="Delete this application" @click="showDeleteForm(i)">Delete</button>
</div>
</td>
</tr>
</tbody>
</table>
<p>
<button type="button" class="btn btn-primary" @click="newApp" v-bind:disabled="isLoading">Create new application</button>
</p>
</div>
<div class="edit-form card mt-2" v-if="showEditForm">
<div class="p-4">
<!--name-->
<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>
<!--output-->
<div class="mb-3">
<label for="appOutput" class="form-label">Output</label>
<input type="text" class="form-control monospace" 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>
<!--prep-cmd-->
<div class="mb-3 d-flex flex-column">
<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 v-if="editForm['prep-cmd'].length > 0">
<thead>
<th class="precmd-head">Do</th>
<th class="precmd-head">Undo</th>
<th style="width: 48px;"></th>
</thead>
<tbody>
<tr v-for="(c,i) in editForm['prep-cmd']">
<td><input type="text" class="form-control monospace" v-model="c.do"></td>
<td><input type="text" class="form-control monospace" 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="mt-2 btn btn-success" style="margin: 0 auto;" @click="addPrepCmd">&plus; Add</button>
</div>
<!--detatched-->
<div class="mb-3">
<label for="appName" class="form-label">Detached Commands</label>
<div v-for="(c,i) in editForm.detached" class="d-flex justify-content-between my-2">
<pre>{{c}}</pre>
<button class="btn btn-danger mx-2" @click="editForm.detached.splice(i,1)">&times;</button>
</div>
<div class="d-flex justify-content-between">
<input type="text" class="form-control monospace" v-model="detachedCmd">
<button class="btn btn-success mx-2" @click="editForm.detached.push(detachedCmd);detachedCmd = '';">+</button>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding a :disabled="detatchedCmd.length == 0" in the button would avoid adding empty detatched commands

</div>
<div class="form-text">A list of commands to be run and forgotten about</div>
</div>
<!--command-->
<div class="mb-3">
<label for="appCmd" class="form-label">Command</label>
<input type="text" class="form-control monospace" 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>
<!--buttons-->
<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 class="container py-3" v-else>
<!--name-->
<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>
<!--output-->
<div class="mb-3">
<label for="appOutput" class="form-label">Output</label>
<input type="text" class="form-control monospace" 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>
<!--prep-cmd-->
<div class="mb-3 d-flex flex-column">
<label for="" 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 class="table mb-3">
<thead>
<tr>
<th class="col">Do command</th>
<th class="col">Undo command</th>
<th class="col-md-3">Quick actions</th>
</tr>
</thead>
<tbody>
<tr v-for="(c,i) in editForm['prep-cmd']">
<td class="col"><input type="text" class="form-control" placeholder="Do command" v-model="c.do"></td>
<td class="col"><input type="text" class="form-control" placeholder="Undo command" v-model="c.undo"></td>
<td class="col-md-3">
<button class="btn w-100 btn-outline-danger" @click="editForm['prep-cmd'].splice(i,1)">Delete</button>
</td>
</tr>
</tbody>
</table>
<button class="btn w-100 btn-success" @click="addPrepCmd">Add commands</button>
</div>
<!--detatched-->
<div class="mb-3">
<label for="">Detached commands</label>
<p class="form-text">These commands are executed when the app starts but are immediately forgotten by Sunshine, so when they exit it won't terminate the stream</p>
<table class="table">
<thead>
<tr>
<th>Command</th>
<th class="col-md-3">Quick actions</th>
</tr>
</thead>
<tbody>
<tr v-for="(c,i) in editForm.detached">
<td class="align-middle"><pre class="mb-0">{{c}}</pre></td>
<td><button class="btn w-100 btn-outline-danger" @click="editForm.detached.splice(i,1)">Delete</button></td>
</tr>
<tr>
<td><input type="text" class="form-control" v-model="detachedCmd" placeholder="steam steam://open/bigpicture"></td>
<td><button class="btn w-100 btn-success" @click="editForm.detached.push(detachedCmd);detachedCmd = '';">Add command</button></td>
</tr>
</tbody>
</table>
</div>
<!--command-->
<div class="mb-3">
<label for="appCmd" class="form-label">Command</label>
<input type="text" class="form-control monospace" 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>
<!--buttons-->
<div class="d-grid gap-2 d-md-block">
<button @click="showEditForm = false" class="btn btn-secondary">Cancel</button>
<button class="btn btn-primary" @click="save" v-bind:disabled="isLoading">Save application</button>
</div>
</div>
<div class="mt-2" v-else>
<button class="btn btn-primary" @click="newApp">+ Add New</button>
</div>
</div>
</main>

<script>
new Vue({
Expand All @@ -98,14 +113,17 @@ <h1>Applications</h1>
return {
apps: [],
showEditForm: false,
isLoading: false,
editForm: null,
detachedCmd: '',
}
},
created() {
this.isLoading = true;
fetch("/api/apps").then(r => r.json()).then((r) => {
console.log(r);
this.apps = r.apps;
this.isLoading = false;
})
},
methods: {
Expand Down Expand Up @@ -143,20 +161,12 @@ <h1>Applications</h1>
});
},
save() {
this.isLoading = true;
fetch("/api/apps", { method: "POST", body: JSON.stringify(this.editForm) }).then((r) => {
if (r.status == 200) document.location.reload();
this.isLoading = false;
});
}
}
})
</script>

<style>
.precmd-head {
width: 200px;
}

.monospace {
font-family: monospace;
}
</style>
</script>
17 changes: 14 additions & 3 deletions assets/web/clients.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
<div id="content" class="container">
<h1>Clients</h1>
</div>
<main role="main">
<div class="container-parent bg-light">
<div class="container py-3">
<h1 class="mb-0">Clients</h1>
</div>
</div>
<div class="container-parent">
<div class="container py-3">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, perspiciatis possimus cupiditate repellat
ducimus, accusantium, voluptatem recusandae ipsa non commodi aliquam fugit reprehenderit nostrum soluta
tenetur molestias corporis quia! Debitis!</p>
</div>
</div>
</main>
Loading