mirror of
https://github.com/LizardByte/Sunshine.git
synced 2025-01-29 09:32:39 +00:00
208 lines
6.0 KiB
HTML
208 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<%- header %>
|
|
<style>
|
|
.troubleshooting-logs {
|
|
white-space: pre;
|
|
font-family: monospace;
|
|
overflow: auto;
|
|
max-height: 500px;
|
|
min-height: 500px;
|
|
font-size: 16px;
|
|
position: relative;
|
|
}
|
|
|
|
.copy-icon {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
padding: 8px;
|
|
cursor: pointer;
|
|
color: rgba(0, 0, 0, 1);
|
|
appearance: none;
|
|
border: none;
|
|
background: none;
|
|
}
|
|
|
|
.copy-icon:hover {
|
|
color: rgba(0, 0, 0, 0.75);
|
|
}
|
|
|
|
.copy-icon:active {
|
|
color: rgba(0, 0, 0, 1);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body id="app" v-cloak>
|
|
<Navbar></Navbar>
|
|
<div class="container">
|
|
<h1 class="my-4">{{ $t('troubleshooting.troubleshooting') }}</h1>
|
|
<!-- Force Close App -->
|
|
<div class="card p-2 my-4">
|
|
<div class="card-body">
|
|
<h2 id="close_apps">{{ $t('troubleshooting.force_close') }}</h2>
|
|
<br>
|
|
<p>{{ $t('troubleshooting.force_close_desc') }}</p>
|
|
<div class="alert alert-success" v-if="closeAppStatus === true">
|
|
{{ $t('troubleshooting.force_close_success') }}
|
|
</div>
|
|
<div class="alert alert-danger" v-if="closeAppStatus === false">
|
|
{{ $t('troubleshooting.force_close_error') }}
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-warning" :disabled="closeAppPressed" @click="closeApp">
|
|
{{ $t('troubleshooting.force_close') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Restart Sunshine -->
|
|
<div class="card p-2 my-4">
|
|
<div class="card-body">
|
|
<h2 id="restart">{{ $t('troubleshooting.restart_sunshine') }}</h2>
|
|
<br>
|
|
<p>{{ $t('troubleshooting.restart_sunshine_desc') }}</p>
|
|
<div class="alert alert-success" v-if="restartPressed === true">
|
|
{{ $t('troubleshooting.restart_sunshine_success') }}
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-warning" :disabled="restartPressed" @click="restart">
|
|
{{ $t('troubleshooting.restart_sunshine') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Unpair all Clients -->
|
|
<div class="card p-2 my-4">
|
|
<div class="card-body">
|
|
<h2 id="unpair">{{ $t('troubleshooting.unpair_all') }}</h2>
|
|
<br>
|
|
<p>{{ $t('troubleshooting.unpair_all_desc') }}</p>
|
|
<div class="alert alert-success" v-if="unpairAllStatus === true">
|
|
{{ $t('troubleshooting.unpair_all_success') }}
|
|
</div>
|
|
<div class="alert alert-danger" v-if="unpairAllStatus === false">
|
|
{{ $t('troubleshooting.unpair_all_error') }}
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-danger" :disabled="unpairAllPressed" @click="unpairAll">
|
|
{{ $t('troubleshooting.unpair_all') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Logs -->
|
|
<div class="card p-2 my-4">
|
|
<div class="card-body">
|
|
<h2 id="logs">{{ $t('troubleshooting.logs') }}</h2>
|
|
<br>
|
|
<div class="d-flex justify-content-between align-items-baseline py-2">
|
|
<p>{{ $t('troubleshooting.logs_desc') }}</p>
|
|
<input type="text" class="form-control" v-model="logFilter" :placeholder="$t('troubleshooting.logs_find')" style="width: 300px">
|
|
</div>
|
|
<div>
|
|
<div class="troubleshooting-logs">
|
|
<button class="copy-icon"><i class="fas fa-copy " @click="copyLogs"></i></button>{{actualLogs}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import { createApp } from 'vue'
|
|
import i18n from './locale.js'
|
|
import Navbar from './Navbar.vue'
|
|
|
|
const app = createApp({
|
|
components: {
|
|
Navbar
|
|
},
|
|
data() {
|
|
return {
|
|
closeAppPressed: false,
|
|
closeAppStatus: null,
|
|
unpairAllPressed: false,
|
|
unpairAllStatus: null,
|
|
restartPressed: false,
|
|
logs: 'Loading...',
|
|
logFilter: null,
|
|
logInterval: null,
|
|
};
|
|
},
|
|
computed: {
|
|
actualLogs() {
|
|
if (!this.logFilter) return this.logs;
|
|
let lines = this.logs.split("\n");
|
|
lines = lines.filter(x => x.indexOf(this.logFilter) != -1);
|
|
return lines.join("\n");
|
|
}
|
|
},
|
|
created() {
|
|
this.logInterval = setInterval(() => {
|
|
this.refreshLogs();
|
|
}, 5000);
|
|
this.refreshLogs();
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.logInterval);
|
|
},
|
|
methods: {
|
|
refreshLogs() {
|
|
fetch("/api/logs",)
|
|
.then((r) => r.text())
|
|
.then((r) => {
|
|
this.logs = r;
|
|
});
|
|
},
|
|
closeApp() {
|
|
this.closeAppPressed = true;
|
|
fetch("/api/apps/close", { method: "POST" })
|
|
.then((r) => r.json())
|
|
.then((r) => {
|
|
this.closeAppPressed = false;
|
|
this.closeAppStatus = r.status.toString() === "true";
|
|
setTimeout(() => {
|
|
this.closeAppStatus = null;
|
|
}, 5000);
|
|
});
|
|
},
|
|
unpairAll() {
|
|
this.unpairAllPressed = true;
|
|
fetch("/api/clients/unpair", { method: "POST" })
|
|
.then((r) => r.json())
|
|
.then((r) => {
|
|
this.unpairAllPressed = false;
|
|
this.unpairAllStatus = r.status.toString() === "true";
|
|
setTimeout(() => {
|
|
this.unpairAllStatus = null;
|
|
}, 5000);
|
|
});
|
|
},
|
|
copyLogs() {
|
|
navigator.clipboard.writeText(this.actualLogs);
|
|
},
|
|
restart() {
|
|
this.restartPressed = true;
|
|
setTimeout(() => {
|
|
this.restartPressed = false;
|
|
}, 5000);
|
|
fetch("/api/restart", {
|
|
method: "POST",
|
|
});
|
|
},
|
|
},
|
|
});
|
|
|
|
//Wait for locale initialization, then render
|
|
i18n().then(i18n => {
|
|
app.use(i18n);
|
|
app.mount('#app');
|
|
});
|
|
</script>
|
|
|
|
</body>
|