Skip to content

Commit

Permalink
Merge pull request MrBrax#133 from MrBrax/develop-ts
Browse files Browse the repository at this point in the history 
Develop ts
  • Loading branch information
@MrBrax
MrBrax authored Apr 26, 2022
2 parents 02bf35b + 2b1dd2d commit eb7e4b1
Show file tree
Hide file tree
Showing 28 changed files with 558 additions and 5,167 deletions.
54 changes: 28 additions & 26 deletions client-vue/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,28 @@
# client-vue

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

Create a file named `.env.production` in this folder and supply `BASE_URL` and `VUE_APP_BASE_URL` to change the basepath.

### Lints and fixes files
```
yarn lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
# client-vue

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

Create a file named `.env.production` in this folder and supply `BASE_URL` and `VITE_APP_BASE_URL` to change the basepath.

You can also build it with `yarn run build --base=/my-app/`.

### Lints and fixes files
```
yarn lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
13 changes: 13 additions & 0 deletions client-vue/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TwitchAutomator</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
23 changes: 9 additions & 14 deletions client-vue/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"name": "twitchautomator-client",
"version": "0.6.1b",
"version": "0.7.1",
"private": true,
"homepage": "https://github.com/MrBrax/TwitchAutomator",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"buildwatch": "vue-cli-service build --mode=development --watch"
"lint": "vue-tsc --noEmit",
"serve": "vite",
"build": "vue-tsc --noEmit && vite build",
"buildwatch": "vite preview"
},
"dependencies": {
"@fontsource/roboto": "^4.5.1",
Expand All @@ -30,14 +30,7 @@
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0",
"@vue/cli-plugin-babel": "^5.0.4",
"@vue/cli-plugin-eslint": "^5.0.4",
"@vue/cli-plugin-pwa": "^5.0.4",
"@vue/cli-plugin-router": "^5.0.4",
"@vue/cli-plugin-typescript": "^5.0.4",
"@vue/cli-service": "5.0.4",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^9.1.0",
"@vitejs/plugin-vue": "^2.3.1",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
Expand All @@ -46,6 +39,8 @@
"prettier": "^2.5.0",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"typescript": "^4.6.3"
"typescript": "^4.6.3",
"vite": "^2.9.5",
"vue-tsc": "^0.34.10"
}
}
28 changes: 0 additions & 28 deletions client-vue/public/index.html
View file

This file was deleted.

14 changes: 3 additions & 11 deletions client-vue/src/assets/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,9 @@
/*
$fa-font-path: "./fontawesome/webfonts";
@import "./fontawesome/scss/fontawesome.scss";
@import "./fontawesome/scss/solid.scss";
@import "./fontawesome/scss/regular.scss";
@import "./fontawesome/scss/brands.scss";
*/

@import "~normalize.css/normalize";
@import "normalize.css/normalize";
// @import "~@fontsource/roboto/scss/mixins";

// @import "~@fontsource/roboto/500.css";
@import "~@fontsource/roboto/latin.css";
@import "~@fontsource/roboto-condensed/latin.css";
@import "@fontsource/roboto/latin.css";
@import "@fontsource/roboto-condensed/latin.css";

$favourite-base: #356e35;
$converting-base: #bb15ca;
Expand Down
4 changes: 2 additions & 2 deletions client-vue/src/components/SideMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,10 +81,10 @@ export default defineComponent({
return streamers.sort((a, b) => a.display_name.localeCompare(b.display_name));
},
clientVersion() {
return process.env.VUE_APP_VERSION; // injected
return import.meta.env.VITE_APP_VERSION; // injected
},
verboseClientVersion() {
return `${process.env.VUE_APP_VERSION} (${process.env.VUE_APP_BUILDDATE} / ${process.env.VUE_APP_GIT_HASH})`; // injected
return `${import.meta.env.VITE_APP_VERSION} (${import.meta.env.VITE_APP_BUILDDATE} / ${import.meta.env.VITE_APP_GIT_HASH})`; // injected
},
homepageLink() {
return pack.homepage;
Expand Down
42 changes: 24 additions & 18 deletions client-vue/src/components/forms/ChannelAddForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,25 +27,25 @@
</div>
<div class="field">
<label class="checkbox">
<input type="checkbox" name="download_chat" value="1" v-model="formData.download_chat" />
<input type="checkbox" name="download_chat" v-model="formData.download_chat" />
Download chat after video capture is complete
</label>
</div>
<div class="field">
<label class="checkbox">
<input type="checkbox" name="live_chat" value="1" v-model="formData.live_chat" />
<input type="checkbox" name="live_chat" v-model="formData.live_chat" />
Live chat download
</label>
</div>
<div class="field">
<label class="checkbox">
<input type="checkbox" name="burn_chat" value="1" v-model="formData.burn_chat" />
<input type="checkbox" name="burn_chat" v-model="formData.burn_chat" />
Burn chat after downloading
</label>
</div>
<div class="field">
<label class="checkbox">
<input type="checkbox" name="no_capture" value="1" v-model="formData.no_capture" />
<input type="checkbox" name="no_capture" v-model="formData.no_capture" />
Do not capture video
</label>
</div>
Expand Down Expand Up @@ -92,18 +92,10 @@ export default defineComponent({
},
methods: {
submitForm(event: Event) {
// const form = event.target as HTMLFormElement;
// const inputs = new FormData(form);
this.formStatusText = "Loading...";
this.formStatus = "";
// console.log("form", form);
// console.log("entries", inputs, inputs.entries(), inputs.values());
// let data: Record<string, unknown> = {};
// inputs.forEach((value, key) => (data[key] = value));
this.$http
.post(`/api/v0/channels`, this.formData)
.then((response) => {
Expand All @@ -112,22 +104,36 @@ export default defineComponent({
this.formStatus = json.status;
if (json.status == "OK") {
this.$emit("formSuccess", json);
this.resetForm();
}
})
.catch((err) => {
console.error("form error", err.response);
if (err.response.data.status == "ERROR") {
this.formStatusText = err.response.data.message;
this.formStatus = err.response.data.status;
} else {
this.formStatusText = err.response.data;
this.formStatus = "ERROR";
if (this.axios.isAxiosError(err) && err.response) {
if (err.response.data.status == "ERROR") {
this.formStatusText = err.response.data.message;
this.formStatus = err.response.data.status;
} else {
this.formStatusText = err.response.data;
this.formStatus = "ERROR";
}
}
});
event.preventDefault();
return false;
},
resetForm() {
this.formData = {
login: "",
quality: "",
match: "",
download_chat: false,
live_chat: false,
burn_chat: false,
no_capture: false,
};
},
checkLogin() {
const match = this.formData.login.match(/^https?:\/\/www.twitch.tv\/(\w+)/);
if (match) {
Expand Down
54 changes: 30 additions & 24 deletions client-vue/src/components/forms/ChannelUpdateForm.vue
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,14 @@
<template>
<div>
<form method="POST" enctype="multipart/form-data" action="#" @submit="submitForm">
<input type="hidden" name="login" :value="channel.login" />

<form method="POST" enctype="multipart/form-data" action="#" @submit.prevent="submitForm">
<div class="field">
<label class="label" :for="'input_' + channel.login + '_quality'">Quality</label>
<label class="label" for="input_quality">Quality</label>
<div class="control">
<input
class="input input-required"
type="text"
name="quality"
:id="'input_' + channel.login + '_quality'"
:value="channel.quality.join(' ')"
id="input_quality"
v-model="formData.quality"
required
/>
<p class="input-help">Separate by spaces, e.g. best 1080p 720p audio_only</p>
Expand All @@ -20,37 +17,37 @@
</div>

<div class="field">
<label class="label" :for="'input_' + channel.login + '_match'">Match keywords</label>
<label class="label" for="input_match">Match keywords</label>
<div class="control">
<input class="input" type="text" name="match" :id="'input_' + channel.login + '_match'" :value="channel.match?.join(', ')" />
<input class="input" type="text" id="input_match" v-model="formData.match" />
<p class="input-help">Separate by commas, e.g. christmas,media share,opening,po box</p>
</div>
</div>

<div class="field">
<label class="checkbox">
<input class="input" type="checkbox" name="download_chat" value="1" :checked="channel.download_chat" />
<input class="input" type="checkbox" v-model="formData.download_chat" />
Download chat after video capture is complete
</label>
</div>

<div class="field">
<label class="checkbox">
<input class="input" type="checkbox" name="live_chat" value="1" :checked="channel.live_chat" />
<input class="input" type="checkbox" v-model="formData.live_chat" />
Live chat download
</label>
</div>

<div class="field">
<label class="checkbox">
<input class="input" type="checkbox" name="burn_chat" value="1" :checked="channel.burn_chat" />
<input class="input" type="checkbox" v-model="formData.burn_chat" />
Burn chat after downloading
</label>
</div>

<div class="field">
<label class="checkbox">
<input class="input" type="checkbox" name="no_capture" value="1" :checked="channel.no_capture" />
<input class="input" type="checkbox" v-model="formData.no_capture" />
No capture
</label>
</div>
Expand Down Expand Up @@ -84,6 +81,7 @@ import { VideoQualityArray } from "../../../../common/Defs";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faSave } from "@fortawesome/free-solid-svg-icons";
import { ApiChannelConfig } from "@common/Api/Client";
import { AxiosError } from "axios";
library.add(faSave);
export default defineComponent({
Expand All @@ -99,27 +97,28 @@ export default defineComponent({
return { VideoQualityArray };
},
data() {
console.debug("match", this.channel, this.channel.match);
return {
formStatusText: "Ready",
formStatus: "",
formData: {
quality: this.channel.quality ? this.channel.quality.join(" ") : "",
match: this.channel.match ? this.channel.match.join(",") : "",
download_chat: this.channel.download_chat || false,
live_chat: this.channel.live_chat || false,
burn_chat: this.channel.burn_chat || false,
no_capture: this.channel.no_capture || false,
},
};
},
methods: {
submitForm(event: Event) {
const form = event.target as HTMLFormElement;
const inputs = new FormData(form);
this.formStatusText = "Loading...";
this.formStatus = "";
// console.log("form", form);
// console.log("entries", inputs, inputs.entries(), inputs.values());
let data: Record<string, unknown> = {};
inputs.forEach((value, key) => (data[key] = value));
this.$http
.put(`/api/v0/channels/${this.channel.login}`, data)
.put(`/api/v0/channels/${this.channel.login}`, this.formData)
.then((response) => {
const json = response.data;
this.formStatusText = json.message;
Expand All @@ -128,8 +127,15 @@ export default defineComponent({
this.$emit("formSuccess", json);
}
})
.catch((err) => {
console.error("form error", err.response);
.catch((err: Error | AxiosError) => {
if (this.axios.isAxiosError(err) && err.response) {
console.error("channel update form error", err.response);
this.formStatusText = err.response.data.message;
this.formStatus = err.response.data.status;
} else {
console.error("channel update form error", err);
alert(`Error: ${err.message}`);
}
});
event.preventDefault();
Expand Down
Loading

0 comments on commit eb7e4b1

Please sign in to comment.