Skip to content

Commit

Permalink
move client settings, start files view
Browse files Browse the repository at this point in the history
  • Loading branch information
MrBrax committed Apr 27, 2022
1 parent 0237a86 commit 1fd4ad3
Show file tree
Hide file tree
Showing 6 changed files with 172 additions and 124 deletions.
14 changes: 7 additions & 7 deletions client-vue/src/components/SideMenu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,11 @@
<span class="icon"><fa icon="tachometer-alt"></fa></span>
</router-link>
</div>
<div :class="{ 'top-menu-item': true, icon: true, right: true, 'is-active': $route.name == 'Files' }" data-menuitem="files">
<router-link to="/files" title="Files">
<span class="icon"><fa icon="archive"></fa></span>
</router-link>
</div>
<div :class="{ 'top-menu-item': true, icon: true, right: true, 'is-active': $route.name == 'Tools' }" data-menuitem="tools">
<router-link to="/tools" title="Tools">
<span class="icon"><fa icon="wrench"></fa></span>
Expand All @@ -34,11 +39,6 @@
<span class="icon"><fa icon="cog"></fa></span>
</router-link>
</div>
<div :class="{ 'top-menu-item': true, icon: true, right: true, 'is-active': $route.name == 'ClientSettings' }" data-menuitem="clientsettings">
<router-link to="/clientsettings" title="Client Settings">
<span class="icon"><fa icon="user-cog"></fa></span>
</router-link>
</div>
<div :class="{ 'top-menu-item': true, icon: true, right: true, 'is-active': $route.name == 'About' }" data-menuitem="github">
<router-link to="/about" title="About">
<span class="icon"><fa icon="info-circle"></fa></span>
Expand All @@ -59,14 +59,14 @@ import pack from "../../package.json";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faGithub } from "@fortawesome/free-brands-svg-icons";
import { faFilm, faTachometerAlt, faWrench, faCog, faUserCog, faInfoCircle, faStar, faSync } from "@fortawesome/free-solid-svg-icons";
import { faFilm, faTachometerAlt, faWrench, faCog, faUserCog, faInfoCircle, faStar, faSync, faArchive } from "@fortawesome/free-solid-svg-icons";
import { faHourglass } from "@fortawesome/free-regular-svg-icons";
import SideMenuStreamer from "./SideMenuStreamer.vue";
import { useStore } from "@/store";
import TwitchChannel from "@/core/channel";
library.add(faGithub, faFilm, faTachometerAlt, faWrench, faCog, faUserCog, faInfoCircle, faStar, faSync, faHourglass);
library.add(faGithub, faFilm, faTachometerAlt, faWrench, faCog, faUserCog, faInfoCircle, faStar, faSync, faHourglass, faArchive);
export default defineComponent({
components: { SideMenuStreamer },
Expand Down
104 changes: 104 additions & 0 deletions client-vue/src/components/forms/ClientSettingsForm.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<template>
<div class="section-content">
<div class="control">
<label class="checkbox"><input type="checkbox" v-model="updateConfig.enableNotifications" /> Notifications</label>
</div>
<div class="control">
<label class="checkbox"><input type="checkbox" v-model="updateConfig.useSpeech" /> Use speech</label>
</div>
<div class="control">
<label class="checkbox"><input type="checkbox" v-model="updateConfig.singlePage" /> Separate channels to their own page</label>
</div>
<div class="control">
<label class="checkbox"><input type="checkbox" v-model="updateConfig.animationsEnabled" /> Enable animations</label>
</div>
<div class="control">
<label class="checkbox"><input type="checkbox" v-model="updateConfig.tooltipStatic" /> Static side menu tooltip</label>
</div>
<div class="control">
<label class="checkbox"><input type="checkbox" v-model="updateConfig.useRelativeTime" /> Use relative time</label>
</div>
<div class="control">
<label class="checkbox"><input type="checkbox" v-model="updateConfig.useWebsockets" /> Use websockets</label>
</div>
<div class="control">
<label class="checkbox"><input type="checkbox" v-model="updateConfig.useBackgroundRefresh" /> Background capturing vod refresh</label>
</div>
<div class="control">
<label class="checkbox"><input type="checkbox" v-model="updateConfig.useBackgroundTicker" /> Background ticker</label>
</div>
<div class="control">
<input type="text" class="input" v-model="updateConfig.websocketAddressOverride" placeholder="Websocket address override" />
</div>
<div class="control">
<button class="button is-primary" @click="saveClientConfig">Save</button>
</div>
<br />
<div class="control">
<button class="button is-small" @click="requestNotifications">Request notification permissions</button>
</div>
</div>
</template>

<script lang="ts">
import { useStore } from "@/store";
import { defineComponent } from "vue";
import { defaultConfig } from "@/defs";
export default defineComponent({
name: "ClientSettingsForm",
title: "Client settings",
setup() {
const store = useStore();
return { store };
},
data() {
return {
currentConfig: Object.assign({}, defaultConfig),
updateConfig: Object.assign({}, defaultConfig),
};
},
created() {
const crConf = Object.assign({}, defaultConfig);
const currentConfig = localStorage.getItem("twitchautomator_config") ? JSON.parse(localStorage.getItem("twitchautomator_config") as string) : crConf;
this.updateConfig = currentConfig;
this.currentConfig = currentConfig;
},
methods: {
saveClientConfig() {
localStorage.setItem("twitchautomator_config", JSON.stringify(this.updateConfig));
if (this.currentConfig.enableNotifications !== this.updateConfig.enableNotifications && this.updateConfig.enableNotifications) {
this.requestNotifications();
}
this.store.updateClientConfig(this.updateConfig);
alert("Settings saved, reloading...");
window.location.reload();
},
requestNotifications() {
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
} else if (Notification.permission === "granted") {
// const notification = new Notification("Notifications already granted.");
} else if (Notification.permission !== "denied") {
Notification.requestPermission().then(function (permission) {
if (permission === "granted") {
new Notification("Notifications granted.");
}
});
}
},
},
/*
watch: {
updateConfig: {
handler() {
this.saveClientConfig();
},
deep: true,
},
},
*/
});
</script>
10 changes: 5 additions & 5 deletions client-vue/src/router/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,16 @@ const routes: Array<RouteRecordRaw> = [
name: "Settings",
component: () => import(/* webpackChunkName: "settings" */ "../views/SettingsView.vue"),
},
{
path: "/clientsettings",
name: "ClientSettings",
component: () => import(/* webpackChunkName: "clientsettings" */ "../views/ClientSettingsView.vue"),
},
{
path: "/about",
name: "About",
component: () => import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
},
{
path: "/files",
name: "Files",
component: () => import(/* webpackChunkName: "files" */ "../views/FilesView.vue"),
},
];

const router = createRouter({
Expand Down
109 changes: 0 additions & 109 deletions client-vue/src/views/ClientSettingsView.vue

This file was deleted.

42 changes: 42 additions & 0 deletions client-vue/src/views/FilesView.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<template>
<div class="container">
<section class="section">
<div class="section-title"><h1>Clips</h1></div>
<div class="section-content">
</div>
</section>
<section class="section">
<div class="section-title"><h1>VODs</h1></div>
<div class="section-content">
</div>
</section>
</div>
</template>

<script lang="ts">
import { useStore } from "@/store";
import { defineComponent } from "vue";
// import { library } from "@fortawesome/fontawesome-svg-core";
// import { faSkull, faTrash } from "@fortawesome/free-solid-svg-icons";
// import { useStore } from "@/store";
// import { JobStatus } from "@common/Defs";
// library.add(faSkull, faTrash);
export default defineComponent({
name: "FilesView",
title: "Files",
setup() {
const store = useStore();
return { store };
},
data() {
},
created() {
},
methods: {
},
components: {
},
});
</script>
17 changes: 14 additions & 3 deletions client-vue/src/views/SettingsView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@
<router-link :to="{ name: 'Settings', params: { tab: 'favourites' } }">
<span class="icon"><fa icon="star"></fa></span> Favourites
</router-link>
<router-link :to="{ name: 'Settings', params: { tab: 'clientsettings' } }">
<span class="icon"><fa icon="user-cog"></fa></span> Client settings
</router-link>
</div>

<div class="container">
Expand Down Expand Up @@ -71,6 +74,13 @@
<span class="icon"><fa icon="sync" spin></fa></span> Loading...
</div>
</section>

<!-- client settings -->
<section class="section" v-if="$route.params.tab == 'clientsettings'">
<div class="section-title"><h1>Client settings</h1></div>
<client-settings-form />
</section>

</div>
</template>

Expand All @@ -87,10 +97,10 @@ import type { ApiGame, ApiChannelConfig } from "@common/Api/Client";
import type { ApiSettingsResponse, ApiGamesResponse } from "@common/Api/Api";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faUser, faCalendarCheck, faStar, faBell } from "@fortawesome/free-solid-svg-icons";
import { faUser, faCalendarCheck, faStar, faBell, faUserCog } from "@fortawesome/free-solid-svg-icons";
import { useStore } from "@/store";
import { SettingField } from "@common/Config";
library.add(faUser, faCalendarCheck, faStar, faBell);
import ClientSettingsForm from "@/components/forms/ClientSettingsForm.vue";
library.add(faUser, faCalendarCheck, faStar, faBell, faUserCog);
export default defineComponent({
name: "SettingsView",
Expand Down Expand Up @@ -155,6 +165,7 @@ export default defineComponent({
SettingsForm,
FavouritesForm,
NotificationsForm,
ClientSettingsForm
},
});
</script>

0 comments on commit 1fd4ad3

Please sign in to comment.