diff --git a/client-vue/README.md b/client-vue/README.md index 93dc848d..90a2b7eb 100644 --- a/client-vue/README.md +++ b/client-vue/README.md @@ -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/). diff --git a/client-vue/index.html b/client-vue/index.html new file mode 100644 index 00000000..186a9163 --- /dev/null +++ b/client-vue/index.html @@ -0,0 +1,13 @@ + + + + + + + TwitchAutomator + + +
+ + + diff --git a/client-vue/package.json b/client-vue/package.json index c6541612..078195ea 100644 --- a/client-vue/package.json +++ b/client-vue/package.json @@ -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", @@ -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", @@ -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" } } diff --git a/client-vue/public/index.html b/client-vue/public/index.html deleted file mode 100644 index 165d9ee6..00000000 --- a/client-vue/public/index.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - - - <%= htmlWebpackPlugin.options.title %> - - - -
- - - diff --git a/client-vue/src/assets/style.scss b/client-vue/src/assets/style.scss index ae59815e..77c8e43f 100644 --- a/client-vue/src/assets/style.scss +++ b/client-vue/src/assets/style.scss @@ -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; diff --git a/client-vue/src/components/SideMenu.vue b/client-vue/src/components/SideMenu.vue index a513cd48..cd6a4672 100644 --- a/client-vue/src/components/SideMenu.vue +++ b/client-vue/src/components/SideMenu.vue @@ -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; diff --git a/client-vue/src/components/forms/ChannelAddForm.vue b/client-vue/src/components/forms/ChannelAddForm.vue index d085753a..9884b2a4 100644 --- a/client-vue/src/components/forms/ChannelAddForm.vue +++ b/client-vue/src/components/forms/ChannelAddForm.vue @@ -27,25 +27,25 @@
@@ -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 = {}; - // inputs.forEach((value, key) => (data[key] = value)); - this.$http .post(`/api/v0/channels`, this.formData) .then((response) => { @@ -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) { diff --git a/client-vue/src/components/forms/ChannelUpdateForm.vue b/client-vue/src/components/forms/ChannelUpdateForm.vue index f5abd9ef..1b2ed281 100644 --- a/client-vue/src/components/forms/ChannelUpdateForm.vue +++ b/client-vue/src/components/forms/ChannelUpdateForm.vue @@ -1,17 +1,14 @@