Skip to content

Commit

Permalink
restructure job status, make more reactive
Browse files Browse the repository at this point in the history
  • Loading branch information
@MrBrax
MrBrax committed Apr 27, 2022
1 parent bf79d2f commit 0237a86
Show file tree
Hide file tree
Showing 15 changed files with 152 additions and 139 deletions.
26 changes: 6 additions & 20 deletions client-vue/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,25 +85,6 @@ export default defineComponent({
}).catch((error) => {
console.error("fetchData error", error);
});
// this.websocket = connectWebsocket();
// websocket messages
// const ev = eventListener();
// ev.addEventListener("message", this.handleWebsocketMessage);
// ev.addEventListener("message", this.handleWebsocketMessage as unknown as EventListener);
// console.debug("Added websocket event listener");
},
unmounted() {
// eventListener().removeEventListener("message", this.handleWebsocketMessage as unknown as EventListener);
console.debug("Removed websocket listener");
},
mounted() {
console.log("wsObject", this.websocket);
setTimeout(() => {
console.log("wsObject", this.websocket);
}, 1000);
},
methods: {
async fetchData() {
Expand Down Expand Up @@ -161,7 +142,7 @@ export default defineComponent({
this.websocket = new WebSocket(websocket_url);
this.websocket.addEventListener("open", (ev: Event) => {
console.log(`Connected to websocket!`, ev);
console.log("Connected to websocket!");
if (!this.websocket) return;
this.websocket.send(JSON.stringify({ action: "helloworld" }));
this.websocketConnected = true;
Expand Down Expand Up @@ -216,6 +197,11 @@ export default defineComponent({
return this.websocket;
},
disconnectWebsocket() {
if (!this.websocket) return;
this.websocket.close();
this.websocket = undefined;
},
handleWebsocketMessage(action: string, data: any) {
// const { action, data } = event.detail;
Expand Down
21 changes: 17 additions & 4 deletions client-vue/src/components/JobStatus.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,22 @@
<tr v-for="job in store.jobList" :key="job.name">
<td>
<span class="icon">
<fa icon="sync" spin v-if="job.status"></fa>
<fa icon="exclamation-triangle" v-else></fa>
<fa icon="sync" spin v-if="job.status == JobStatus.RUNNING"></fa>
<fa icon="exclamation-triangle" v-else-if="job.status == JobStatus.STOPPED"></fa>
<fa icon="times" v-else-if="job.status == JobStatus.ERROR"></fa>
<fa icon="clock" v-else-if="job.status == JobStatus.WAITING"></fa>
<fa icon="circle" v-else-if="job.status == JobStatus.NONE"></fa>
</span>
<span class="text-overflow px-1">{{ job.name }}</span>
</td>
<td>{{ job.pid }}</td>
<td><!-- {{ job.status }}-->{{ job.status ? "Running" : "Unexpected exit" }}</td>
<td>
<span v-if="job.status == JobStatus.RUNNING">Running</span>
<span v-else-if="job.status == JobStatus.STOPPED">Stopped</span>
<span v-else-if="job.status == JobStatus.ERROR">Error</span>
<span v-else-if="job.status == JobStatus.WAITING">Waiting</span>
<span v-else-if="job.status == JobStatus.NONE">None</span>
</td>
</tr>
</table>

Expand All @@ -20,13 +29,17 @@

<script lang="ts">
import { useStore } from "@/store";
import { JobStatus } from "@common/Defs";
import { defineComponent } from "vue";
import { faTimes, faSync, faExclamationTriangle, faClock, faCircle } from "@fortawesome/free-solid-svg-icons";
import { library } from "@fortawesome/fontawesome-svg-core";
library.add(faSync, faTimes, faExclamationTriangle, faClock, faCircle);
export default defineComponent({
name: "JobStatus",
setup() {
const store = useStore();
return { store };
return { store, JobStatus };
},
});
</script>
1 change: 0 additions & 1 deletion client-vue/src/components/forms/ChannelUpdateForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,6 @@ export default defineComponent({
return { VideoQualityArray };
},
data() {
console.debug("match", this.channel, this.channel.match);
return {
formStatusText: "Ready",
formStatus: "",
Expand Down
10 changes: 9 additions & 1 deletion client-vue/src/components/forms/SettingsForm.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<form method="POST" enctype="multipart/form-data" action="#" @submit.prevent="submitForm" v-if="settingsFields && formData">
<form method="POST" enctype="multipart/form-data" action="#" @submit.prevent="submitForm" v-if="!loading && settingsFields && formData">
<details class="settings-details" v-for="groupData in settingsGroups" v-bind:key="groupData.name">
<summary>{{ groupData.name }}</summary>
<div class="field" v-for="(data, index) in groupData.fields" v-bind:key="index">
Expand Down Expand Up @@ -77,6 +77,9 @@
</button>
</div>
</form>
<div v-if="loading">
<span class="icon"><fa icon="sync" spin></fa></span> Loading...
</div>
</template>

<script lang="ts">
Expand Down Expand Up @@ -115,12 +118,14 @@ export default defineComponent({
formStatus: string;
formData: Record<string, string | number | boolean>;
settingsFields: SettingField<string | number | boolean>[];
loading: boolean;
} {
return {
formStatusText: "Ready",
formStatus: "",
formData: {},
settingsFields: [],
loading: false,
};
},
mounted(): void {
Expand All @@ -133,6 +138,7 @@ export default defineComponent({
*/
methods: {
fetchData(): void {
this.loading = true;
this.$http.get("/api/v0/settings").then((response) => {
const data: ApiSettingsResponse = response.data;
this.formData = data.data.config;
Expand All @@ -145,6 +151,8 @@ export default defineComponent({
}
}
}).finally(() => {
this.loading = false;
});
},
submitForm(event: Event) {
Expand Down
8 changes: 4 additions & 4 deletions client-vue/src/core/vod.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useStore } from "../store";
import { ApiVod } from "../../../common/Api/Client";
import { MuteStatus } from "../../../common/Defs";
import { JobStatus, MuteStatus } from "../../../common/Defs";
import { VideoMetadata } from "../../../common/MediaInfo";
import TwitchChannel from "./channel";
import { TwitchVODChapter } from "./chapter";
Expand Down Expand Up @@ -56,9 +56,9 @@ export default class TwitchVOD {

webpath = "";

convertingStatus: number | false = false;
capturingStatus: number | false = false;
chatDumpStatus: number | false = false;
convertingStatus: JobStatus = JobStatus.NONE;
capturingStatus: JobStatus = JobStatus.NONE;
chatDumpStatus: JobStatus = JobStatus.NONE;
recordingSize: number | false = 0;

total_size = 0;
Expand Down
3 changes: 1 addition & 2 deletions client-vue/src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import VueAxios from "vue-axios";
import titleMixin from "./mixins/titleMixin";
import helpers from "./mixins/helpers";
import { createPinia } from "pinia";
import websocket from "./plugins/websocket";
// import "./registerServiceWorker";

// font-awesome
Expand All @@ -18,4 +17,4 @@ if (import.meta.env.BASE_URL !== undefined) {
axios.defaults.baseURL = import.meta.env.BASE_URL;
}

createApp(App).use(router).use(createPinia()).use(VueAxios, axios).use(websocket).component("fa", FontAwesomeIcon).mixin(titleMixin).mixin(helpers).mount("#app");
createApp(App).use(router).use(createPinia()).use(VueAxios, axios).component("fa", FontAwesomeIcon).mixin(titleMixin).mixin(helpers).mount("#app");
6 changes: 6 additions & 0 deletions client-vue/src/store/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export const useStore = defineStore("twitchAutomator", {
state: function (): {
app_name: string;
streamerList: TwitchChannel[];
streamerListLoaded: boolean;
jobList: ApiJob[];
config: Record<string, any> | null;
favourite_games: string[];
Expand All @@ -23,6 +24,7 @@ export const useStore = defineStore("twitchAutomator", {
return {
app_name: "",
streamerList: [],
streamerListLoaded: false,
jobList: [],
config: {},
favourite_games: [],
Expand Down Expand Up @@ -165,6 +167,7 @@ export const useStore = defineStore("twitchAutomator", {
// console.debug("updateStreamerList", data);
const channels = data.map((channel) => TwitchChannel.makeFromApiResponse(channel));
this.streamerList = channels;
this.streamerListLoaded = true;
},
updateErrors(data: string[]) {
this.errors = data;
Expand All @@ -183,9 +186,11 @@ export const useStore = defineStore("twitchAutomator", {
this.updateJobList(json.data);
},
updateJobList(data: ApiJob[]) {
console.debug(`Update job list with ${data.length} jobs`);
this.jobList = data;
},
updateJob(job: ApiJob) {
console.debug(`Update job '${job.name}', status: ${job.status}`);
const index = this.jobList.findIndex((j) => j.name === job.name);
if (index === -1) {
this.jobList.push(job);
Expand All @@ -194,6 +199,7 @@ export const useStore = defineStore("twitchAutomator", {
}
},
removeJob(name: string) {
console.debug(`Delete job '${name}'`);
const index = this.jobList.findIndex((j) => j.name === name);
if (index !== -1) {
this.jobList.splice(index, 1);
Expand Down
9 changes: 6 additions & 3 deletions client-vue/src/views/DashboardView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</section>
<section class="section" data-section="vods">
<div class="section-title"><h1>Recorded VODs</h1></div>
<div class="section-content" v-if="store.streamerList && store.streamerList.length > 0">
<div class="section-content" v-if="store.streamerListLoaded && store.streamerList.length > 0">
<template v-if="!store.clientConfig?.singlePage">
<streamer v-for="streamer in sortedStreamers" v-bind:key="streamer.userid" v-bind:streamer="streamer" />
</template>
Expand All @@ -25,9 +25,13 @@
<strong>Free space: {{ formatBytes(freeSize) }}</strong>
</div>
</div>
<div class="section-content" v-else>
<div class="section-content" v-else-if="!store.streamerListLoaded">
<span class="icon"><fa icon="sync" spin></fa></span> Loading...
</div>
<div class="section-content" v-else>
<span class="icon"><fa icon="exclamation-triangle"></fa></span>
No channels found. Add some at <router-link :to="{ name: 'Settings', params: { tab: 'newchannel' } }">New Channel</router-link> to start.
</div>
</section>
<section class="section">
Expand All @@ -49,7 +53,6 @@ import { useStore } from "@/store";
import TwitchChannel from "@/core/channel";
import { ApiLogResponse, ApiResponse } from "@common/Api/Api";
import LogViewer from "@/components/LogViewer.vue";
import { eventListener } from "@/websocket";
interface DashboardData {
loading: boolean;
Expand Down
58 changes: 15 additions & 43 deletions client-vue/src/views/SettingsView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,15 +104,15 @@ export default defineComponent({
data(): {
loading: boolean;
formChannels: ApiChannelConfig[];
settingsData: Record<string, string | number | boolean>;
settingsFields: SettingField<string | number | boolean>[];
// settingsData: Record<string, string | number | boolean>;
// settingsFields: SettingField<string | number | boolean>[];
favouritesData: string[];
gamesData: Record<string, ApiGame>;
} {
return {
loading: false,
settingsData: {},
settingsFields: [],
// settingsData: {},
// settingsFields: [],
gamesData: {},
favouritesData: [],
formChannels: [],
Expand All @@ -127,47 +127,19 @@ export default defineComponent({
console.debug("Fetching settings and games data");
this.loading = true;
this.$http
.all([
this.$http
.get(`api/v0/settings`)
.then((response) => {
const json: ApiSettingsResponse = response.data;
if (json.message) alert(json.message);
console.log("settings list", json);
const config = json.data.config;
const channels: ApiChannelConfig[] = json.data.channels;
const favourites = json.data.favourite_games;
this.favouritesData = favourites;
// this.gamesData = games;
this.formChannels = channels.sort((a, b) => a.login.localeCompare(b.login));
console.log("formChannels", this.formChannels);
this.settingsData = config;
this.settingsFields = json.data.fields;
})
.catch((err) => {
console.error("settings fetch error", err.response);
}),
this.$http
.get(`api/v0/games`)
.then((response) => {
const json: ApiGamesResponse = response.data;
if (json.message) alert(json.message);
console.log("games list", json);
const games = json.data;
this.gamesData = games;
})
.catch((err) => {
console.error("settings fetch error", err.response);
}),
])
.then(() => {
.get(`api/v0/games`)
.then((response) => {
const json: ApiGamesResponse = response.data;
if (json.message) alert(json.message);
const games = json.data;
this.gamesData = games;
})
.catch((err) => {
console.error("settings fetch error", err.response);
}).finally(() => {
this.loading = false;
});
},
},
computed: {
Expand Down
Loading

0 comments on commit 0237a86

Please sign in to comment.