Sunshine/src_assets/common/assets/web/index.html

164 lines
5.5 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<%- header %>
</head>
<body id="app" v-cloak>
<Navbar></Navbar>
<div id="content" class="container">
<h1 class="my-4">{{ $t('index.welcome') }}</h1>
<p>{{ $t('index.description') }}</p>
<div class="alert alert-danger" v-if="fancyLogs.find(x => x.level === 'Fatal')">
<div style="line-height: 32px;">
<i class="fas fa-circle-exclamation" style="font-size: 32px;margin-right: 0.25em;"></i>
<p v-html="$t('index.startup_errors')"></p>
<br>
</div>
<ul>
<li v-for="v in fancyLogs.filter(x => x.level === 'Fatal')">{{v.value}}</li>
</ul>
<a class="btn btn-danger" href="/troubleshooting/#logs">View Logs</a>
</div>
<!-- Version -->
<div class="card p-2 my-4">
<div class="card-body" v-if="version">
<h2>Version {{version}}</h2>
<br>
<div v-if="loading">
{{ $t('index.loading_latest') }}
</div>
<div class="alert alert-success" v-if="buildVersionIsDirty">
{{ $t('index.version_dirty') }} 🌇
</div>
2024-05-24 01:42:06 +00:00
<div v-else-if="!preReleaseBuildAvailable && !stableBuildAvailable && !buildVersionIsDirty">
<div class="alert alert-success">
{{ $t('index.version_latest') }}
</div>
</div>
2024-05-24 01:42:06 +00:00
<div v-if="notifyPreReleases && preReleaseBuildAvailable">
<div class="alert alert-warning">
<div class="d-flex justify-content-between">
<div class="my-2">
2024-05-24 01:42:06 +00:00
<p>{{ $t('index.new_pre_release') }}</p>
</div>
2024-05-24 01:42:06 +00:00
<a class="btn btn-success m-1" :href="preReleaseVersion.html_url" target="_blank">{{ $t('index.download') }}</a>
</div>
2024-05-24 01:42:06 +00:00
<pre><b>{{preReleaseVersion.name}}</b></pre>
<pre>{{preReleaseVersion.body}}</pre>
</div>
</div>
<div v-if="stableBuildAvailable">
<div class="alert alert-warning">
<div class="d-flex justify-content-between">
<div class="my-2">
2024-05-24 01:42:06 +00:00
<p>{{ $t('index.new_stable') }}</p>
</div>
<a class="btn btn-success m-1" :href="githubVersion.html_url" target="_blank">{{ $t('index.download') }}</a>
</div>
<h3>{{githubVersion.name}}</h3>
<pre>{{githubVersion.body}}</pre>
</div>
</div>
</div>
</div>
<!-- Resources -->
<div class="my-4">
<Resource-Card></Resource-Card>
2021-05-30 13:56:13 +00:00
</div>
</div>
</body>
<script type="module">
import { createApp } from 'vue'
import { initApp } from './init'
import Navbar from './Navbar.vue'
import ResourceCard from './ResourceCard.vue'
console.log("Hello, Sunshine!")
let app = createApp({
components: {
Navbar,
ResourceCard
},
data() {
return {
version: null,
githubVersion: null,
2024-05-24 01:42:06 +00:00
notifyPreReleases: false,
preReleaseVersion: null,
loading: true,
2023-09-16 18:53:38 +00:00
logs: null,
}
},
async created() {
try {
2024-05-24 01:42:06 +00:00
let config = await fetch("/api/config").then((r) => r.json());
this.notifyPreReleases = config.notify_pre_releases;
this.version = config.version;
this.githubVersion = (await fetch("https://api.github.com/repos/LizardByte/Sunshine/releases/latest").then((r) => r.json()));
2024-05-24 01:42:06 +00:00
this.githubPreRelease = (await fetch("https://api.github.com/repos/LizardByte/Sunshine/releases").then((r) => r.json())).find(release => release.prerelease);
2023-09-16 18:53:38 +00:00
} catch (e) {
}
try {
this.logs = (await fetch("/api/logs").then(r => r.text()))
} catch (e) {
console.error(e);
}
this.loading = false;
},
computed: {
2023-03-26 23:28:57 +00:00
stableBuildAvailable() {
2024-05-24 01:42:06 +00:00
if (!this.githubVersion || !this.version) {
return false;
}
let v_github = this.githubVersion.name;
2024-05-24 01:42:06 +00:00
if (v_github.indexOf("v") === 0) {
v_github = v_github.substring(1);
}
let v_this = this.version;
2024-05-24 01:42:06 +00:00
if (v_this.indexOf("v") === 0) {
v_this = v_this.substring(1);
2023-03-26 23:28:57 +00:00
}
return v_github !== v_this;
},
2024-05-24 01:42:06 +00:00
preReleaseBuildAvailable() {
if (!this.githubPreRelease || !this.githubVersion || !this.version) {
return false;
}
let v_github_pre = this.githubPreRelease.name;
if (v_github_pre.indexOf("v") === 0) {
v_github_pre = v_github_pre.substring(1);
}
let v_github_stable = this.githubVersion.name;
if (v_github_stable.indexOf("v") === 0) {
v_github_stable = v_github_stable.substring(1);
}
let v_this = this.version;
if (v_this.indexOf("v") === 0) {
v_this = v_this.substring(1);
}
return v_github_pre !== v_this && new Date(this.githubPreRelease.published_at) > new Date(this.githubVersion.published_at);
},
2023-09-16 18:53:38 +00:00
buildVersionIsDirty() {
return this.version?.split(".").length === 5 &&
this.version.indexOf("dirty") !== -1
2023-03-26 23:28:57 +00:00
},
2023-09-16 18:53:38 +00:00
/** Parse the text errors, calculating the text, the timestamp and the level */
fancyLogs() {
if (!this.logs) return [];
let regex = /(\[\d{4}:\d{2}:\d{2}:\d{2}:\d{2}:\d{2}\]):\s/g;
let rawLogLines = (this.logs.split(regex)).splice(1);
let logLines = []
for (let i = 0; i < rawLogLines.length; i += 2) {
logLines.push({ timestamp: rawLogLines[i], level: rawLogLines[i + 1].split(":")[0], value: rawLogLines[i + 1] });
}
return logLines;
2023-03-26 23:28:57 +00:00
}
}
});
initApp(app);
</script>