Skip to content

Commit

Permalink
Move Paired Client UI to Troubleshooting page
Browse files Browse the repository at this point in the history
  • Loading branch information
@xanderfrangos
xanderfrangos committed Jan 26, 2024
1 parent 0e1c02b commit 3f4fc1c
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 61 deletions.
46 changes: 0 additions & 46 deletions src_assets/common/assets/web/pin.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,6 @@ <h1 class="my-4 text-center">PIN Pairing</h1>
</div>
<div id="status"></div>
</form>
<div id="client-management" class="m-auto mt-5" style="max-width: 900px;">
<div class="container">
<div class="d-flex justify-content-end align-items-center mb-2">
<h2 class="text-center me-auto">Paired Clients</h2>
<div id="client-refresh" class="btn btn-sm d-flex align-items-center me-1"><i class="fas fa-fw fa-refresh me-1"></i> Refresh</div>
</div>
<div id="apply-alert" class="alert alert-success d-flex align-items-center" style="display: none !important;">
<div class="me-2"><b>Success!</b> Click 'Apply' to restart Sunshine and apply changes. This will terminate any running sessions.</div>
<button class="btn btn-success ms-auto apply">Apply</button>
</div>
<ul id="client-list" class="list-group"></ul>
</div>
</div>
</div>
</body>

Expand Down Expand Up @@ -68,39 +55,6 @@ <h2 class="text-center me-auto">Paired Clients</h2>
"#status"
).innerHTML = `<div class="alert alert-danger" role="alert">Pairing Failed: Check if the PIN is typed correctly</div>`;
}
refreshClients();
});
});

const clientList = document.querySelector("#client-list");

function refreshClients() {
fetch("/api/clients/list")
.then((response) => response.json())
.then((response) => {
clientList.innerHTML = "";
if (response.status === 'true' && response.named_certs && response.named_certs.length) {
for (const named_cert of response.named_certs) {
clientList.innerHTML += `<div class="list-group-item d-flex"><div class="p-2 flex-grow-1">${named_cert.name != "" ? named_cert.name : "Unknown"}</div><div class="unpair p-2 ms-auto btn btn-danger" data-uniqueid="${named_cert.uniqueID}">Remove</div></div>`;
}
} else {
clientList.innerHTML = `<p class="p-2 text-center mt-2">There are no paired clients.</p>`;
}
for (const unpairOption of clientList.querySelectorAll(".unpair")) {
unpairOption.addEventListener("click", () => {
fetch("/api/clients/unpair-single", { method: "POST", body: JSON.stringify({ uniqueid: unpairOption.dataset.uniqueid }) }).then(() => {
document.querySelector("#apply-alert").style.setProperty('display', 'flex', 'important');
refreshClients();
});
});
}
});
}
refreshClients();

document.querySelector("#client-refresh").addEventListener("click", refreshClients);
document.querySelector("#apply-alert .apply").addEventListener("click", () => {
document.querySelector("#apply-alert").style.setProperty('display', 'none', 'important');
fetch("/api/restart", { method: "POST" });
});
</script>
73 changes: 58 additions & 15 deletions src_assets/common/assets/web/troubleshooting.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,23 +82,38 @@ <h2 id="restart">Restart Sunshine</h2>
</div>
</div>
<!-- Unpair all Clients -->
<div class="card p-2 my-4">
<div class="card my-4">
<div class="card-body">
<h2 id="unpair">Unpair All Clients</h2>
<br>
<p>Remove all your paired devices</p>
<div class="alert alert-success" v-if="unpairAllStatus === true">
Unpair Successful!
</div>
<div class="alert alert-danger" v-if="unpairAllStatus === false">
Error while unpairing
</div>
<div>
<button class="btn btn-danger" :disabled="unpairAllPressed" @click="unpairAll">
Unpair All
</button>
<div class="p-2">
<div class="d-flex justify-content-end align-items-center">
<h2 class="text-center me-auto">Unpair Clients</h2>
<button class="btn btn-danger" :disabled="unpairAllPressed" @click="unpairAll">
Unpair All
</button>
</div>
<div id="apply-alert" class="alert alert-success d-flex align-items-center mt-3" :style="{ 'display': (showApplyMessage ? 'flex !important': 'none !important') }">
<div class="me-2"><b>Success!</b> Click 'Apply' to restart Sunshine and apply changes. This will terminate any running sessions.</div>
<button class="btn btn-success ms-auto apply" @click="clickedApplyBanner">Apply</button>
</div>
<div class="alert alert-success" v-if="unpairAllStatus === true">
Unpair Successful!
</div>
<div class="alert alert-danger" v-if="unpairAllStatus === false">
Error while unpairing
</div>
<br />
<p class="mb-0">Remove your paired devices.</p>
</div>
</div>
<ul id="client-list" class="list-group list-group-flush list-group-item-light" v-if="clients && clients.length > 0">
<div v-for="client in clients" class="list-group-item d-flex">
<div class="p-2 flex-grow-1">{{client.name != "" ? client.name : "Unknown Client"}}</div><div class="me-2 ms-auto btn btn-danger" @click="unpairSingle(client.uuid)"><i class="fas fa-trash"></i></div>
</div>
</ul>
<ul v-else class="list-group list-group-flush list-group-item-light">
<div class="list-group-item p-3 text-center"><em>There are no paired clients.</em></div>
</ul>

</div>
<!-- Logs -->
<div class="card p-2 my-4">
Expand All @@ -119,7 +134,7 @@ <h2 id="logs">Logs</h2>
</div>

<script type="module">
import { createApp } from 'vue'
import { createApp, ref } from 'vue'
import Navbar from './Navbar.vue'

const app = createApp({
Expand All @@ -133,6 +148,8 @@ <h2 id="logs">Logs</h2>
unpairAllPressed: false,
unpairAllStatus: null,
restartPressed: false,
showApplyMessage: false,
clients: [],
logs: 'Loading...',
logFilter: null,
logInterval: null,
Expand All @@ -151,6 +168,7 @@ <h2 id="logs">Logs</h2>
this.refreshLogs();
}, 5000);
this.refreshLogs();
this.refreshClients();
},
beforeDestroy() {
clearInterval(this.logInterval);
Expand Down Expand Up @@ -180,13 +198,38 @@ <h2 id="logs">Logs</h2>
fetch("/api/clients/unpair", { method: "POST" })
.then((r) => r.json())
.then((r) => {
this.showApplyMessage = true;
this.unpairAllPressed = false;
this.unpairAllStatus = r.status.toString() === "true";
setTimeout(() => {
this.unpairAllStatus = null;
}, 5000);
});
},
unpairSingle(uuid) {
fetch("/api/clients/unpair-single", { method: "POST", body: JSON.stringify({ uuid }) }).then(() => {
this.showApplyMessage = true;
this.refreshClients();
});
},
refreshClients() {
fetch("/api/clients/list")
.then((response) => response.json())
.then((response) => {
const clientList = document.querySelector("#client-list");
if (response.status === 'true' && response.named_certs && response.named_certs.length) {
this.clients = response.named_certs;
} else {
this.clients = [];
}
});
},
clickedApplyBanner() {
this.showApplyMessage = false;
fetch("/api/restart", {
method: "POST",
});
},
copyLogs() {
navigator.clipboard.writeText(this.actualLogs);
},
Expand Down

0 comments on commit 3f4fc1c

Please sign in to comment.