47 changed files with 0 additions and 4340 deletions
Unified View
Diff Options
-
+0 -2services/autoplex-webui/.env.example
-
+0 -3services/autoplex-webui/README.md
-
+0 -13services/autoplex-webui/index.html
-
+0 -41services/autoplex-webui/package.json
-
+0 -6services/autoplex-webui/postcss.config.js
-
BINservices/autoplex-webui/public/favicon.ico
-
+0 -27services/autoplex-webui/src/app/App.vue
-
+0 -1services/autoplex-webui/src/app/assets/plex_logo.svg
-
+0 -46services/autoplex-webui/src/app/components/AppModals.vue
-
+0 -100services/autoplex-webui/src/app/components/CheckBox.vue
-
+0 -51services/autoplex-webui/src/app/components/MovieList.vue
-
+0 -64services/autoplex-webui/src/app/components/MoviePoster.vue
-
+0 -97services/autoplex-webui/src/app/components/ProgressRing.vue
-
+0 -126services/autoplex-webui/src/app/components/SideNav.vue
-
+0 -113services/autoplex-webui/src/app/components/TextBox.vue
-
+0 -220services/autoplex-webui/src/app/components/modals/MovieModal.vue
-
+0 -22services/autoplex-webui/src/app/components/modals/index.ts
-
+0 -20services/autoplex-webui/src/app/index.ts
-
+0 -190services/autoplex-webui/src/app/routes/index.ts
-
+0 -5services/autoplex-webui/src/app/shims-vue.d.ts
-
+0 -9services/autoplex-webui/src/app/shims-vuex.d.ts
-
+0 -132services/autoplex-webui/src/app/store/actions.ts
-
+0 -33services/autoplex-webui/src/app/store/generics.ts
-
+0 -47services/autoplex-webui/src/app/store/getters.ts
-
+0 -36services/autoplex-webui/src/app/store/index.ts
-
+0 -92services/autoplex-webui/src/app/store/mutations.ts
-
+0 -6services/autoplex-webui/src/app/store/schema.ts
-
+0 -21services/autoplex-webui/src/app/store/state.ts
-
+0 -42services/autoplex-webui/src/app/styles/index.css
-
+0 -51services/autoplex-webui/src/app/util.ts
-
+0 -43services/autoplex-webui/src/app/views/Dashboard.vue
-
+0 -6services/autoplex-webui/src/app/views/Error404.vue
-
+0 -99services/autoplex-webui/src/app/views/LinkDiscord.vue
-
+0 -77services/autoplex-webui/src/app/views/Login.vue
-
+0 -156services/autoplex-webui/src/app/views/Register.vue
-
+0 -102services/autoplex-webui/src/app/views/Search.vue
-
+0 -3services/autoplex-webui/src/app/views/admin/Admin.vue
-
+0 -3services/autoplex-webui/src/app/views/admin/AdminDashboard.vue
-
+0 -60services/autoplex-webui/src/common/api_schema.ts
-
+0 -90services/autoplex-webui/src/common/validation.ts
-
+0 -27services/autoplex-webui/src/server/index.ts
-
+0 -30services/autoplex-webui/tailwind.config.js
-
+0 -76services/autoplex-webui/tsconfig.json
-
+0 -12services/autoplex-webui/tsconfig.server.json
-
+0 -26services/autoplex-webui/tsconfig.vite.json
-
+0 -14services/autoplex-webui/vite.config.ts
-
+0 -1900services/autoplex-webui/yarn.lock
+ 0
- 2
services/autoplex-webui/.env.example
View File
| @ -1,2 +0,0 @@ | |||||
| # The base URL the site is hosted on | |||||
| BASE_URL = "https://autoplex.dlii.tech" | |||||
+ 0
- 3
services/autoplex-webui/README.md
View File
| @ -1,3 +0,0 @@ | |||||
| # Autoplex Web UI | |||||
| The web UI for the Autoplex service | |||||
+ 0
- 13
services/autoplex-webui/index.html
View File
| @ -1,13 +0,0 @@ | |||||
| <!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>Autoplex</title> | |||||
| </head> | |||||
| <body class="bg-blue-50"> | |||||
| <div id="app" class="contents"></div> | |||||
| <script type="module" src="/src/app/index.ts"></script> | |||||
| </body> | |||||
| </html> | |||||
+ 0
- 41
services/autoplex-webui/package.json
View File
| @ -1,41 +0,0 @@ | |||||
| { | |||||
| "name": "@autoplex-service/autoplex-webui", | |||||
| "version": "0.0.0", | |||||
| "keywords": [], | |||||
| "author": "David Ludwig", | |||||
| "license": "ISC", | |||||
| "main": "./dist/server/index.js", | |||||
| "scripts": { | |||||
| "clean": "rimraf ./dist", | |||||
| "build": "yarn run build:backend && yarn run build:frontend", | |||||
| "build:backend": "tsc -p ./tsconfig.server.json", | |||||
| "build:frontend": "vue-tsc --noEmit -p ./tsconfig.vite.json && vite build", | |||||
| "start": "NODE_ENV=production node .", | |||||
| "start:dev": "vite" | |||||
| }, | |||||
| "dependencies": { | |||||
| "@fortawesome/fontawesome-free": "^5.15.3", | |||||
| "fastify": "^3.14.1", | |||||
| "fastify-static": "^4.0.1", | |||||
| "jwt-decode": "^3.1.2", | |||||
| "validate.js": "^0.13.1", | |||||
| "vue": "^3.0.5", | |||||
| "vue-router": "^4.0.6", | |||||
| "vuedraggable": "^4.0.1", | |||||
| "vuex": "^4.0.0", | |||||
| "websocket": "^1.0.33" | |||||
| }, | |||||
| "devDependencies": { | |||||
| "@types/node": "^15.0.1", | |||||
| "@vitejs/plugin-vue": "^1.2.1", | |||||
| "@vue/compiler-sfc": "^3.0.5", | |||||
| "autoprefixer": "^10.2.5", | |||||
| "postcss": "^8.2.9", | |||||
| "rimraf": "^3.0.2", | |||||
| "tailwindcss": "^2.1.1", | |||||
| "ts-node": "^9.1.1", | |||||
| "typescript": "^4.1.3", | |||||
| "vite": "^2.1.5", | |||||
| "vue-tsc": "^0.0.15" | |||||
| } | |||||
| } | |||||
+ 0
- 6
services/autoplex-webui/postcss.config.js
View File
| @ -1,6 +0,0 @@ | |||||
| module.exports = { | |||||
| plugins: { | |||||
| tailwindcss: {}, | |||||
| autoprefixer: {} | |||||
| }, | |||||
| } | |||||
BIN
services/autoplex-webui/public/favicon.ico
View File
| Before | After |
|---|---|
|
|
+ 0
- 27
services/autoplex-webui/src/app/App.vue
View File
| @ -1,27 +0,0 @@ | |||||
| <template> | |||||
| <div class="h-full flex flex-col lg:flex-row"> | |||||
| <side-nav v-if="!$route.meta['disableNavBar']"/> | |||||
| <div class="h-full p-4 flex flex-col flex-grow overflow-y-auto"> | |||||
| <router-view/> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script lang="ts"> | |||||
| import { defineComponent } from 'vue'; | |||||
| import { Action, useStore } from "./store"; | |||||
| import AppModal from "./components/AppModals.vue"; | |||||
| import SideNav from "./components/SideNav.vue"; | |||||
| export default defineComponent({ | |||||
| name: "App", | |||||
| components: { | |||||
| AppModal, | |||||
| SideNav | |||||
| }, | |||||
| setup() { | |||||
| const store = useStore(); | |||||
| store.dispatch(Action.AuthLoad, undefined); | |||||
| } | |||||
| }); | |||||
| </script> | |||||
+ 0
- 1
services/autoplex-webui/src/app/assets/plex_logo.svg
View File
| @ -1 +0,0 @@ | |||||
| <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320.03 103.61"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:#e5a00d;}</style><radialGradient id="radial-gradient" cx="258.33" cy="51.76" r="42.95" gradientUnits="userSpaceOnUse"><stop offset="0.17" stop-color="#f9be03"/><stop offset="0.51" stop-color="#e8a50b"/><stop offset="1" stop-color="#cc7c19"/></radialGradient></defs><title>plex-logo</title><polygon id="X" class="cls-1" points="320.03 -0.09 289.96 -0.09 259.88 51.76 289.96 103.61 320.01 103.61 289.96 51.79 320.03 -0.09"/><g id="chevron"><polygon class="cls-2" points="226.7 -0.09 256.78 -0.09 289.96 51.76 256.78 103.61 226.7 103.61 259.88 51.76 226.7 -0.09"/><polygon class="cls-3" points="226.7 -0.09 256.78 -0.09 289.96 51.76 256.78 103.61 226.7 103.61 259.88 51.76 226.7 -0.09"/></g><path id="E" class="cls-1" d="M216.32,103.61H156.49V-.09h59.83v18h-37.8V40.69H213.7v18H178.52V85.45h37.8Z"/><path id="L" class="cls-1" d="M82.07,103.61V-.09h22V85.45h42.07v18.16Z"/><path id="P" class="cls-1" d="M71.66,32.25Q71.66,49,61.2,57.87T31.44,66.73H22v36.88H0V-.09H33.14Q52-.09,61.83,8T71.66,32.25ZM22,48.71h7.24q10.15,0,15.18-4c3.37-2.66,5-6.56,5-11.67s-1.41-9-4.22-11.42S38,17.93,32,17.93H22Z"/></svg> | |||||
+ 0
- 46
services/autoplex-webui/src/app/components/AppModals.vue
View File
| @ -1,46 +0,0 @@ | |||||
| <template> | |||||
| <div class="modal min-h-screen" v-if="visible"> | |||||
| <component :is="component"></component> | |||||
| </div> | |||||
| </template> | |||||
| <script lang="ts"> | |||||
| import { Mutation } from "../store"; | |||||
| import { defineComponent } from "vue"; | |||||
| import { mapMutations, mapState } from "vuex"; | |||||
| import { modals } from "./modals"; | |||||
| export default defineComponent({ | |||||
| name: "AppModal", | |||||
| components: modals, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| component: "modalName", | |||||
| visible: "modalVisible" | |||||
| }) | |||||
| }, | |||||
| methods: { | |||||
| modalClicked() { | |||||
| console.log("Modal clicked"); | |||||
| }, | |||||
| // ...mapMutations({ | |||||
| // hide: Mutation.ModalHide | |||||
| // }) | |||||
| }, | |||||
| mounted() { | |||||
| document.addEventListener("keydown", (event: KeyboardEvent) => { | |||||
| if (event.key != "Escape") { | |||||
| return; | |||||
| } | |||||
| // this.hide(); | |||||
| }); | |||||
| } | |||||
| }); | |||||
| </script> | |||||
| <style lang="postcss"> | |||||
| .modal { | |||||
| @apply fixed inset-0 flex flex-col; | |||||
| background: rgba(0, 0, 0, 0.5); | |||||
| } | |||||
| </style> | |||||
+ 0
- 100
services/autoplex-webui/src/app/components/CheckBox.vue
View File
| @ -1,100 +0,0 @@ | |||||
| <template> | |||||
| <label class="checkbox-label relative flex items-center"> | |||||
| <input class="hidden" type="checkbox" v-model="isChecked" :disabled="disabled"> | |||||
| <span></span> | |||||
| <span v-if="label" class="ml-2">{{label}}</span> | |||||
| </label> | |||||
| </template> | |||||
| <script lang="ts"> | |||||
| import { defineComponent } from "vue"; | |||||
| export default defineComponent({ | |||||
| data() { | |||||
| return { | |||||
| isChecked: this.modelValue | |||||
| } | |||||
| }, | |||||
| props: { | |||||
| disabled: { | |||||
| type: Boolean, | |||||
| default: false | |||||
| }, | |||||
| label: { | |||||
| type: String, | |||||
| required: true | |||||
| }, | |||||
| modelValue: { | |||||
| type: Boolean, | |||||
| default: false | |||||
| } | |||||
| }, | |||||
| watch: { | |||||
| isChecked(newState) { | |||||
| this.$emit("update:modelValue", newState); | |||||
| this.$emit("onChange", newState); | |||||
| } | |||||
| } | |||||
| }); | |||||
| </script> | |||||
| <style> | |||||
| .checkbox-label input[type="checkbox"]:focus-visible + span { | |||||
| @apply ring ring-offset-2 ring-indigo-500; | |||||
| } | |||||
| .checkbox-label input[type="checkbox"] + span { | |||||
| @apply inline-block w-4 h-4 bg-white border rounded-sm border-gray-300; | |||||
| } | |||||
| .checkbox-label input[type="checkbox"]:checked + span { | |||||
| @apply bg-indigo-500 border-indigo-500; | |||||
| } | |||||
| .checkbox-label input[type="checkbox"] + span::before { | |||||
| content: ''; | |||||
| position: absolute; | |||||
| border-color: white; | |||||
| border-width: 0; | |||||
| /* transform: translateY(0.3rem) rotate(45deg); */ | |||||
| } | |||||
| .checkbox-label input[type="checkbox"]:checked + span::before { | |||||
| border-width: 0 0px 2px 2px; | |||||
| width: .5rem; | |||||
| height: .25rem; | |||||
| transform: translateX(calc(50% - 1px)) translateY(calc(0.3rem - 1px)) rotate(-45deg); | |||||
| } | |||||
| @keyframes shrink-bounce{ | |||||
| 0%{ | |||||
| transform: scale(1); | |||||
| } | |||||
| 33%{ | |||||
| transform: scale(.85); | |||||
| } | |||||
| 100%{ | |||||
| transform: scale(1); | |||||
| } | |||||
| } | |||||
| @keyframes checkbox-check{ | |||||
| 0%{ | |||||
| width: 0; | |||||
| height: 0; | |||||
| border-color: #212121; | |||||
| transform: translate3d(0,0,0) rotate(45deg); | |||||
| } | |||||
| 33%{ | |||||
| width: .2em; | |||||
| height: 0; | |||||
| transform: translate3d(0,0,0) rotate(45deg); | |||||
| } | |||||
| 100%{ | |||||
| width: .2em; | |||||
| height: .5em; | |||||
| border-color: #212121; | |||||
| transform: translate3d(0,-.5em,0) rotate(45deg); | |||||
| } | |||||
| } | |||||
| </style> | |||||
+ 0
- 51
services/autoplex-webui/src/app/components/MovieList.vue
View File
| @ -1,51 +0,0 @@ | |||||
| <template> | |||||
| <ul class="w-full grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 lg:gap-8"> | |||||
| <li class="flex flex-row bg-white rounded-lg overflow-hidden shadow-md lg:flex-col transform hover:scale-105 transition-transform cursor-pointer" v-for="(movie, index) in movies" | |||||
| @click="$emit('onClickMovie', movie, index)"> | |||||
| <movie-poster class="w-3/12 lg:w-full flex-shrink-0" :src="movie.posterPath ?? undefined" size="w185"/> | |||||
| <div class="relative box-border p-4 flex flex-col justify-center w-full lg:h-full text-md xs:text-lg sm:text-xl md:text-base xl:text-sm" style="box-shadow: 0px -10px 10px rgba(0, 0, 0, 0.10);"> | |||||
| <div class="flex-grow flex flex-col justify-center lg:justify-start"> | |||||
| <h3 class="font-medium">{{ movie.title }}</h3> | |||||
| <span v-if="movie.releaseDate" class="opacity-50">{{ movie.releaseDate.slice(0, 4) }}</span> | |||||
| </div> | |||||
| <div v-if="movie.plexLink" title="Added to Plex" class="flex"> | |||||
| <div class="inline-block bg-ui-plexGray rounded-full w-1/6 lg:w-1/3"> | |||||
| <img src="../assets/plex_logo.svg" alt="Added to Plex" style="margin: 15% 25%;"/> | |||||
| </div> | |||||
| </div> | |||||
| <!-- <div class="flex flex-row items-end space-x-2"> | |||||
| <div class="w-full rounded-full bg-gray-200 overflow-hidden flex-grow-0"> | |||||
| <div class="w-1/2 bg-red-500 h-1"></div> | |||||
| </div> | |||||
| <div class="relative h-1 flex justify-center items-center text-sm"> | |||||
| <span class="h-0 overflow-hidden">100%</span> | |||||
| <span class="absolute left-0 text-center w-full opacity-75">{{ 50 }}%</span> | |||||
| </div> | |||||
| </div> --> | |||||
| </div> | |||||
| </li> | |||||
| </ul> | |||||
| </template> | |||||
| <script lang="ts"> | |||||
| import { defineComponent } from "vue"; | |||||
| import { IApiMovie } from "../../common/api_schema"; | |||||
| import MoviePoster from "./MoviePoster.vue"; | |||||
| export default defineComponent({ | |||||
| components: { | |||||
| MoviePoster | |||||
| }, | |||||
| methods: { | |||||
| onModalClosed() { | |||||
| let parentPath = this.$route.path.split('/').slice(0, -1).join('/'); | |||||
| this.$router.push({ path: parentPath, query: this.$route.query }); | |||||
| } | |||||
| }, | |||||
| props: { | |||||
| movies: { | |||||
| default: <IApiMovie[]>[] | |||||
| } | |||||
| } | |||||
| }); | |||||
| </script> | |||||
+ 0
- 64
services/autoplex-webui/src/app/components/MoviePoster.vue
View File
| @ -1,64 +0,0 @@ | |||||
| <template> | |||||
| <div class="poster"> | |||||
| <div class="poster-padding"></div> | |||||
| <img v-if="src" class="poster-content w-full h-full object-cover" loading="lazy" ref="poster" | |||||
| :src="`/api/tmdb/image/${size}${src}`" @load="onPosterLoad"> | |||||
| <div v-else class="poster-content bg-gray-300 text-gray-500"> | |||||
| <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="image" class="svg-inline--fa fa-image fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z"></path></svg> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script lang="ts"> | |||||
| import ProgressRing from './ProgressRing.vue' | |||||
| import { defineComponent } from "vue"; | |||||
| export default defineComponent({ | |||||
| components: { | |||||
| ProgressRing, | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| isLoaded: false | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| onPosterLoad() { | |||||
| this.isLoaded = true; | |||||
| this.$emit("onLoad", this.$refs["poster"]); | |||||
| } | |||||
| }, | |||||
| props: { | |||||
| size: { | |||||
| type: String, | |||||
| default: "w342" | |||||
| }, | |||||
| src: String | |||||
| } | |||||
| }); | |||||
| </script> | |||||
| <style lang="css"> | |||||
| .poster { | |||||
| @apply relative overflow-hidden; | |||||
| } | |||||
| .poster > .poster-padding { | |||||
| padding-top: 143.885%; | |||||
| } | |||||
| .poster > .poster-decal { | |||||
| @apply absolute z-10 top-0 w-full shadow-sm; | |||||
| padding: 4%; | |||||
| background: rgb(31, 35, 38); | |||||
| transform: rotate(-45deg) translateX(-28%) translateY(-100%); | |||||
| } | |||||
| .poster > .poster-decal > img { | |||||
| @apply w-1/3 mx-auto; | |||||
| } | |||||
| .poster > .poster-content { | |||||
| @apply absolute inset-0 flex justify-center items-center z-0 shadow-sm; | |||||
| } | |||||
| .poster > .poster-content > svg { | |||||
| width: 35%; | |||||
| } | |||||
| </style> | |||||
+ 0
- 97
services/autoplex-webui/src/app/components/ProgressRing.vue
View File
| @ -1,97 +0,0 @@ | |||||
| <template> | |||||
| <div class="box-border relative text-white radial-progress"> | |||||
| <svg class="transform -rotate-90" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="height: 100%; width: 100%"> | |||||
| <circle | |||||
| class="radial-progress-ring__body" | |||||
| :r="50" | |||||
| :cx="50" | |||||
| :cy="50"/> | |||||
| <circle | |||||
| class="radial-progress-ring__progress" | |||||
| :stroke-width="ringWidth" | |||||
| :r="50 - ringWidth/2" | |||||
| :cx="50" | |||||
| :cy="50" | |||||
| ref="ring" | |||||
| /> | |||||
| <text text-anchor="middle" alignment-baseline="central" x="50" y="50" :font-size="fontSize" transform="rotate(90) translate(0,-100)">{{ progressFormatted }}</text> | |||||
| </svg> | |||||
| <!-- <div class="antialiased flex absolute inset-0 items-center justify-center text-xs font-light rounded-full text-white">{{ progressFormatted }}%</div> --> | |||||
| </div> | |||||
| </template> | |||||
| <script lang="ts"> | |||||
| import { defineComponent } from "vue"; | |||||
| export enum RadialProgressState { | |||||
| Downloading, | |||||
| Paused, | |||||
| Halted, | |||||
| Error | |||||
| } | |||||
| export default defineComponent({ | |||||
| computed: { | |||||
| circumference(): number { | |||||
| return 2*Math.PI*(50 - this.ringWidth/2); | |||||
| }, | |||||
| progressFormatted(): number { | |||||
| return Math.floor(100*(<number>this.progress)); | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| updateProgressBar() { | |||||
| (<HTMLElement>this.$refs.ring).style.strokeDasharray = `${this.circumference} ${this.circumference}`; | |||||
| (<HTMLElement>this.$refs.ring).style.strokeDashoffset = `${this.circumference - this.circumference*this.progress}`; | |||||
| } | |||||
| }, | |||||
| mounted() { | |||||
| this.updateProgressBar(); | |||||
| }, | |||||
| props: { | |||||
| fontSize: { | |||||
| type: Number, | |||||
| required: true | |||||
| }, | |||||
| progress: { | |||||
| type: Number, | |||||
| required: true | |||||
| }, | |||||
| ringWidth: { | |||||
| type: Number, | |||||
| default: 1 | |||||
| } | |||||
| }, | |||||
| watch: { | |||||
| progress() { | |||||
| this.updateProgressBar(); | |||||
| } | |||||
| } | |||||
| }); | |||||
| </script> | |||||
| <style lang="css"> | |||||
| .radial-progress text { | |||||
| fill: white; | |||||
| } | |||||
| .radial-progress-ring__body { | |||||
| fill: #1f2937; | |||||
| } | |||||
| .radial-progress-ring__progress { | |||||
| fill: transparent; | |||||
| stroke: #34D399; | |||||
| transition: stroke-dashoffset 0.25s; | |||||
| } | |||||
| .bg-modal { | |||||
| background: rgba(0, 0, 0, 0.35); | |||||
| opacity: 0.0; | |||||
| transition: opacity 0.25s; | |||||
| } | |||||
| .show-state { | |||||
| opacity: 1.0; | |||||
| } | |||||
| .radial-progress:hover .bg-modal { | |||||
| opacity: 1.0; | |||||
| } | |||||
| </style> | |||||
+ 0
- 126
services/autoplex-webui/src/app/components/SideNav.vue
View File
| @ -1,126 +0,0 @@ | |||||
| <template> | |||||
| <transition name="fade"> | |||||
| <div v-if="isOpen" class="modal md:hidden p-8 overflow-auto items-center z-30" @click.self="close"></div> | |||||
| </transition> | |||||
| <div class="contents" ref="root"> | |||||
| <div class="lg:hidden bg-white shadow-md items-center flex z-40"> | |||||
| <button class="nav-toggle-button" :class="{ 'active': isOpen }" | |||||
| @click="isOpen = !isOpen"> | |||||
| <i class="fas fa-bars"></i> | |||||
| </button> | |||||
| </div> | |||||
| <nav class="fixed lg:relative inset-y-0 w-72 lg:w-64 xl:w-72 flex flex-col flex-shrink-0 bg-white shadow-lg z-50" :class="{'active': isOpen}"> | |||||
| <div class="brand">AUTOPLEX</div> | |||||
| <div class="mt-4 text-center"> | |||||
| <div class="user"><i class="fas opacity-40" :class="{'fa-user': !isAdmin, 'fa-user-tie': isAdmin}"></i></div> | |||||
| <div class="font-black text-lg opacity-80">{{ userName }}</div> | |||||
| <div class="text-xs opacity-60">{{ isAdmin ? "Admin" : "Plex Member" }}</div> | |||||
| </div> | |||||
| <ul class="mt-4 text-gray-800 links"> | |||||
| <li v-if="isAdmin"> | |||||
| <router-link :to="{ name: 'Admin' }"> | |||||
| <span><i class="fas fa-cog"></i></span> | |||||
| <div>Admin</div> | |||||
| </router-link> | |||||
| </li> | |||||
| <li> | |||||
| <router-link :to="{ name: 'Dashboard' }"> | |||||
| <span><i class="fas fa-chart-pie"></i></span> | |||||
| <div>Dashboard</div> | |||||
| </router-link> | |||||
| </li> | |||||
| <li> | |||||
| <router-link :to="{ name: 'Search' }"> | |||||
| <span><i class="fas fa-search"></i></span> | |||||
| <div>Search</div> | |||||
| </router-link> | |||||
| </li> | |||||
| </ul> | |||||
| <div class="mt-auto p-4"> | |||||
| <router-link class="block p-2 text-center rounded-full shadow-md text-white bg-indigo-500" | |||||
| :to="{ name: 'Logout' }"> | |||||
| Logout | |||||
| </router-link> | |||||
| </div> | |||||
| </nav> | |||||
| </div> | |||||
| </template> | |||||
| <script lang="ts"> | |||||
| import { defineComponent } from "vue"; | |||||
| import { mapGetters } from "vuex"; | |||||
| export default defineComponent({ | |||||
| computed: { | |||||
| ...mapGetters([ | |||||
| "userName", | |||||
| "isAdmin" | |||||
| ]) | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| isOpen: false | |||||
| } | |||||
| }, | |||||
| mounted() { | |||||
| document.addEventListener("click", (event: any) => { | |||||
| if (this.isOpen) { | |||||
| if (-1 == event.path.indexOf(this.$refs["root"])) { | |||||
| this.isOpen = false; | |||||
| } | |||||
| } | |||||
| }); | |||||
| }, | |||||
| watch: { | |||||
| $route(to, from) { | |||||
| if (this.isOpen) { | |||||
| this.isOpen = false; | |||||
| } | |||||
| } | |||||
| } | |||||
| }); | |||||
| </script> | |||||
| <style lang="postcss"> | |||||
| .nav-toggle-button { | |||||
| @apply w-14 h-14 flex items-center justify-center text-2xl focus:ring-0 focus:outline-none ring-indigo-500; | |||||
| transition: margin 0.15s cubic-bezier(0.4, 0.0, 1, 1); | |||||
| } | |||||
| .nav-toggle-button.active { | |||||
| @apply ml-72; | |||||
| transition: margin 0.25s cubic-bezier(0.0, 0.0, 0.2, 1); | |||||
| } | |||||
| nav { | |||||
| transform: translateX(-100%); | |||||
| transition: transform 0.15s cubic-bezier(0.4, 0.0, 1, 1); | |||||
| } | |||||
| @media all and (min-width: 1024px) { | |||||
| nav { | |||||
| transform: none !important; | |||||
| } | |||||
| } | |||||
| nav.active { | |||||
| transform: none; | |||||
| transition: transform 0.25s cubic-bezier(0.0, 0.0, 0.2, 1); | |||||
| } | |||||
| nav > .brand { | |||||
| @apply mt-4 h-12 flex justify-center items-center text-4xl font-thin; | |||||
| } | |||||
| nav .user { | |||||
| @apply w-20 h-20 mx-auto rounded-full flex justify-center items-end bg-gray-200 text-6xl overflow-hidden shadow-sm; | |||||
| } | |||||
| nav .user > i { | |||||
| line-height: 3.7rem; | |||||
| } | |||||
| nav > .links a { | |||||
| @apply py-3 px-8 flex space-x-4 hover:bg-gray-100; | |||||
| } | |||||
| nav > .links .router-link-active { | |||||
| @apply bg-indigo-500 text-white shadow-md hover:bg-indigo-500 cursor-default; | |||||
| } | |||||
| nav > .links span { | |||||
| @apply w-5 | |||||
| } | |||||
| </style> | |||||
+ 0
- 113
services/autoplex-webui/src/app/components/TextBox.vue
View File
| @ -1,113 +0,0 @@ | |||||
| <template> | |||||
| <div> | |||||
| <label class="block text-sm mb-1 text-gray-700" :class="{ 'opacity-50': disabled, 'text-red-600': error }"> | |||||
| {{ label }} | |||||
| </label> | |||||
| <div class="block relative"> | |||||
| <input :type="type" :placeholder="placeholder" v-model="value" ref="textbox" :disabled="disabled" | |||||
| class="w-full outline-none p-2 rounded-lg bg-gray-100 border border-gray-100 text-gray-800 placeholder-gray-400 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-gray-50 disabled:border-gray-400" | |||||
| :class="{ 'pr-10': (isValid || error), 'border-red-600 text-red-600': error }" | |||||
| @blur="onBlur" @change="onChange" @input="setErrorMessage('')"> | |||||
| <span class="w-10 absolute flex items-center top-0 bottom-0 right-0 justify-center" :class="{ 'hidden': !error && !isValid }"> | |||||
| <i v-if="error" class="fas fa-exclamation-circle align-middle text-red-600"></i> | |||||
| <i v-else-if="isValid" class="fas fa-check-circle align-middle text-green-500"></i> | |||||
| </span> | |||||
| </div> | |||||
| <div class="w-full error-message text-xs text-red-600 text-center" ref="error">{{ error }}</div> | |||||
| </div> | |||||
| </template> | |||||
| <script lang="ts"> | |||||
| import { defineComponent } from "vue"; | |||||
| import { validateValue } from "../util"; | |||||
| export default defineComponent({ | |||||
| emits: ["onBlur", "onChange", "update:modelValue", "update:errorValue"], | |||||
| data() { | |||||
| return { | |||||
| error: "", | |||||
| isValid: <boolean|undefined> this.valid, | |||||
| value: this.modelValue | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| /** | |||||
| * Invoked when the input has lost focus | |||||
| */ | |||||
| onBlur(event: Event) { | |||||
| this.$emit("onBlur", event); | |||||
| this.validate(); | |||||
| }, | |||||
| /** | |||||
| * Invoked when the value of the input has changed | |||||
| */ | |||||
| onChange(event: Event) { | |||||
| this.$emit("update:modelValue", this.value); | |||||
| this.$emit("onChange", event); | |||||
| }, | |||||
| /** | |||||
| * Set the displayed error message | |||||
| */ | |||||
| setErrorMessage(value: string) { | |||||
| this.error = value; | |||||
| this.$emit("update:errorValue", value); | |||||
| if (value) { | |||||
| this.isValid = false; | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * Validate the current input | |||||
| */ | |||||
| async validate() { | |||||
| this.isValid = false; | |||||
| if (this.validator !== undefined) { | |||||
| if (typeof this.validator === "function") { | |||||
| this.error = (await this.validator(this.value)) ?? ""; | |||||
| } else { | |||||
| this.error = validateValue(this.value, this.validator); | |||||
| } | |||||
| if (!this.error) { | |||||
| this.isValid = true; | |||||
| } | |||||
| } | |||||
| } | |||||
| }, | |||||
| mounted() { | |||||
| if (this.value && this.validator) { | |||||
| this.validate(); | |||||
| } | |||||
| }, | |||||
| props: { | |||||
| disabled: { | |||||
| type: Boolean, | |||||
| default: false | |||||
| }, | |||||
| errorValue: { | |||||
| type: String, | |||||
| default: "" | |||||
| }, | |||||
| label: String, | |||||
| modelValue: { | |||||
| type: String, | |||||
| default: "" | |||||
| }, | |||||
| placeholder: { | |||||
| type: String, | |||||
| default: "" | |||||
| }, | |||||
| required: [Boolean, String], | |||||
| valid: { | |||||
| type: Boolean, | |||||
| default: undefined | |||||
| }, | |||||
| type: { | |||||
| type: String, | |||||
| default: "text" | |||||
| }, | |||||
| validator: [Function, Object] | |||||
| } | |||||
| }); | |||||
| </script> | |||||
+ 0
- 220
services/autoplex-webui/src/app/components/modals/MovieModal.vue
View File
| @ -1,220 +0,0 @@ | |||||
| <template> | |||||
| <transition appear name="fade"> | |||||
| <div v-if="tmdbId !== undefined" class="modal p-8 overflow-auto items-center z-50" @click.self="close"> | |||||
| <transition name="slide" appear | |||||
| @before-enter="lockScroll(true)" @enter-cancelled="lockScroll(false)" | |||||
| @leave="lockScroll(false)" @leave-cancelled="lockScroll(true)"> | |||||
| <div v-if="movie !== undefined" class="relative w-full max-w-6xl bg-white md:bg-none overflow-hidden rounded-xl flex-col flex-shrink-0 shadow-xl"> | |||||
| <div class="bg-center bg-cover bg-no-repeat" :class="{ 'text-white': isDark }" | |||||
| :style="movie.backdropPath ? `background: url('/api/tmdb/image/w1280${movie.backdropPath}')` : ''"> | |||||
| <div class="movie-modal-content z-10" :style="backdropOverlayStyle"> | |||||
| <div class="flex p-4 items-center"> | |||||
| <movie-poster v-if="movie.posterPath" :src="movie.posterPath" | |||||
| class="w-3/12 flex-shrink-0 rounded-xl shadow-md md:shadow-xl" @onLoad="onPosterLoad"/> | |||||
| <div class="p-4 flex flex-col justify-center"> | |||||
| <h2 class="text-lg md:text-4xl"> | |||||
| <span class="font-bold">{{ movie.title }}</span> | |||||
| <span class="opacity-70" v-if="releaseYear"> ({{ releaseYear }})</span> | |||||
| </h2> | |||||
| <div class="flex font-light dot-separated"> | |||||
| <span v-if="releaseDate">{{ releaseDate }}</span> | |||||
| <span v-if="runtime">{{ runtime }}</span> | |||||
| </div> | |||||
| <div v-if="movie?.overview" class="mt-4 hidden md:block"> | |||||
| <p class="">{{movie?.overview}}</p> | |||||
| </div> | |||||
| <div class="mt-4 hidden md:block"> | |||||
| <a class="inline-block py-2 px-6 rounded-full shadow-md hover:shadow-lg focus:outline-none ring-0 transition-transform transform hover:scale-105" :class="{ 'bg-white text-black': isDark, 'bg-black text-white': !isDark }" | |||||
| v-if="movie.plexLink !== null" :href="movie.plexLink" target="_blank">Watch Now</a> | |||||
| <button class="inline-block py-2 px-4 rounded-full shadow-md hover:shadow-lg disabled:opacity-50 disabled:cursor-default focus:outline-none ring-0 transition-transform transform hover:scale-105" :class="{ 'bg-white text-black': isDark, 'bg-black text-white': !isDark }" | |||||
| v-else-if="movie.ticketId !== null">View Request Status</button> | |||||
| <button v-else class="inline-block py-2 w-36 rounded-full shadow-md hover:shadow-lg disabled:opacity-50 disabled:cursor-default focus:outline-none ring-0 transition-transform transform hover:scale-105" :class="{ 'bg-white text-black': isDark, 'bg-black text-white': !isDark }" | |||||
| :disabled="isRequesting" @click="request">{{isRequesting ? "Requesting..." : "Request"}}</button> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="p-4 space-y-4 md:hidden z-20" style="box-shadow: 0px -10px 10px rgba(0, 0, 0, 0.10);" > | |||||
| <div v-if="movie?.overview"> | |||||
| <h3 class="font-bold mb-2">Overview</h3> | |||||
| <p>{{ movie.overview }}</p> | |||||
| </div> | |||||
| <div class="text-center"> | |||||
| <a class="inline-block py-2 px-8 rounded-full shadow-sm bg-red-500 hover:bg-black transition-colors text-white focus:outline-none ring-0" | |||||
| v-if="movie.plexLink !== null" :href="movie.plexLink">Watch Now</a> | |||||
| <button class="inline-block py-2 px-4 rounded-full bg-red-500 text-white disabled:opacity-50" | |||||
| v-else-if="movie.ticketId !== null">View Request Status</button> | |||||
| <button v-else class="inline-block py-2 px-8 rounded-full shadow-sm bg-red-500 hover:bg-black transition-colors text-white disabled:opacity-50 disabled:cursor-default focus:outline-none ring-0 disabled:bg-black" | |||||
| :disabled="isRequesting" @click="request">{{isRequesting ? "Requesting..." : "Request"}}</button> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </transition> | |||||
| </div> | |||||
| </transition> | |||||
| </template> | |||||
| <script lang="ts"> | |||||
| import { defineComponent } from "vue"; | |||||
| import { IApiDataResponse, IApiMovieDetails } from "@common/api_schema"; | |||||
| import { authFetch } from "../../routes"; | |||||
| import { getAverageRgb } from "../../util"; | |||||
| import { useStore, Mutation, Action } from "../../store"; | |||||
| import MoviePoster from "../MoviePoster.vue"; | |||||
| export default defineComponent({ | |||||
| components: { | |||||
| MoviePoster | |||||
| }, | |||||
| computed: { | |||||
| backdropOverlayStyle(): string { | |||||
| let { r, g, b } = this.rgb; | |||||
| return `background-image: linear-gradient(to right, rgba(${r}, ${g}, ${b}, 1.0), rgba(${r}, ${g}, ${b}, 0.84)`; | |||||
| }, | |||||
| isDark(): boolean { | |||||
| let { r, g, b } = this.rgb; | |||||
| return (r*0.299 + g*0.587 + b*0.114) <= 186; | |||||
| // r /= 255; | |||||
| // g /= 255; | |||||
| // b /= 255; | |||||
| // r = r <= 0.03928 ? r/12.92 : Math.pow((r+0.055)/1.055, 2.4); | |||||
| // g = g <= 0.03928 ? r/12.92 : Math.pow((r+0.055)/1.055, 2.4); | |||||
| // b = b <= 0.03928 ? r/12.92 : Math.pow((r+0.055)/1.055, 2.4); | |||||
| // let L = 0.2126*r + 0.7152*g + 0.0722*b; | |||||
| // return L <= 0.179; | |||||
| }, | |||||
| releaseYear(): string { | |||||
| if (!this.movie || !this.movie.releaseDate) { | |||||
| return ""; | |||||
| } | |||||
| return this.movie.releaseDate.slice(0, 4); | |||||
| }, | |||||
| releaseDate(): string { | |||||
| if (!this.movie || !this.movie.releaseDate) { | |||||
| return ""; | |||||
| } | |||||
| let [year, month, day] = this.movie.releaseDate.split('-'); | |||||
| return `${month}/${day}/${year}`; | |||||
| }, | |||||
| runtime(): string { | |||||
| if (!this.movie || !this.movie.runtime) { | |||||
| return ""; | |||||
| } | |||||
| let hours = Math.floor(this.movie.runtime / 60); | |||||
| let minutes = Math.floor(this.movie.runtime % 60); | |||||
| return (hours > 0 ? `${hours}h ` : "") + `${minutes}m`; | |||||
| } | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| rgb: {r: 0, g: 0, b: 0}, | |||||
| movie: <IApiMovieDetails|undefined>undefined, | |||||
| isPosterLoaded: false, | |||||
| isRequesting: false | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| lockScroll(lock: boolean) { | |||||
| useStore().commit(Mutation.LockScroll, lock); | |||||
| }, | |||||
| close() { | |||||
| this.movie = undefined; | |||||
| this.$emit("onClose"); | |||||
| }, | |||||
| onKeyPress(event: KeyboardEvent) { | |||||
| if (event.key != "Escape") { | |||||
| return; | |||||
| } | |||||
| this.close(); | |||||
| }, | |||||
| onPosterLoad(img: HTMLImageElement) { | |||||
| this.isPosterLoaded = true; | |||||
| this.computeBackdropColor(img); | |||||
| }, | |||||
| computeBackdropColor(img: HTMLImageElement) { | |||||
| // This is being weird and this is the only way I can fix it... | |||||
| let rgb: {[k: string]: number} = {r: 0, g: 0, b: 0}; | |||||
| try { | |||||
| rgb = getAverageRgb(img); | |||||
| } catch(e) { | |||||
| return { r: 0, g: 0, b: 0 }; | |||||
| } | |||||
| // Adjust contrast | |||||
| let c = 60; | |||||
| let f = 259*(c + 255) / (255*(259 - c)); | |||||
| for (let k in rgb) { | |||||
| rgb[k] = Math.min(Math.max(f*(rgb[k] - 128) + 128, 0), 255); | |||||
| } | |||||
| // Adjust brightness | |||||
| for (let k in rgb) { | |||||
| rgb[k] *= 0.90; | |||||
| } | |||||
| this.rgb = <any>rgb; | |||||
| }, | |||||
| async fetchMovieDetails() { | |||||
| if (this.tmdbId === undefined) { | |||||
| return; | |||||
| } | |||||
| let response = await (authFetch(`/api/movie/details/${this.tmdbId}`)); | |||||
| if (response.status != 200) { | |||||
| this.close(); | |||||
| return; | |||||
| } | |||||
| let movie = <IApiDataResponse<IApiMovieDetails>> await response.json(); | |||||
| this.movie = movie.data; | |||||
| }, | |||||
| async request() { | |||||
| if (this.isRequesting || this.movie == null || this.movie.tmdbId == null) { | |||||
| return; | |||||
| } | |||||
| this.isRequesting = true; | |||||
| let response = await this.$store.dispatch(Action.RequestMovie, this.movie.tmdbId); | |||||
| this.isRequesting = false; | |||||
| if (response.status == "Forbidden") { | |||||
| console.log("Failed to add movie: quota has been met"); | |||||
| return; | |||||
| } | |||||
| console.log(response); | |||||
| this.movie.ticketId = response.data.ticketId; | |||||
| } | |||||
| }, | |||||
| mounted() { | |||||
| document.addEventListener("keydown", this.onKeyPress); | |||||
| this.fetchMovieDetails(); | |||||
| }, | |||||
| beforeUnmount() { | |||||
| document.removeEventListener("keydown", this.onKeyPress); | |||||
| }, | |||||
| props: { | |||||
| tmdbId: { | |||||
| type: [Number, String], | |||||
| required: false | |||||
| } | |||||
| }, | |||||
| watch: { | |||||
| tmdbId(newId: number|string|undefined, oldId: number|string|undefined) { | |||||
| this.fetchMovieDetails(); | |||||
| } | |||||
| } | |||||
| }); | |||||
| </script> | |||||
| <style lang="postcss"> | |||||
| .dot-separated > *:not(:first-child)::before { | |||||
| @apply px-2; | |||||
| content: '\2022' | |||||
| } | |||||
| .modal button { | |||||
| @apply ring-0; | |||||
| } | |||||
| .modal button:focus-visible { | |||||
| @apply ring-2 ring-indigo-500 ring-offset-2; | |||||
| } | |||||
| </style> | |||||
+ 0
- 22
services/autoplex-webui/src/app/components/modals/index.ts
View File
| @ -1,22 +0,0 @@ | |||||
| /** | |||||
| * Modal names to export | |||||
| */ | |||||
| const enum Modal { | |||||
| } | |||||
| /** | |||||
| * Modal export type | |||||
| */ | |||||
| type ModalTypes = { [K in keyof typeof Modal]: any } | |||||
| /** | |||||
| * Modals to export | |||||
| */ | |||||
| export const modals: ModalTypes = { | |||||
| } | |||||
| /** | |||||
| * Export the list of modal names | |||||
| */ | |||||
| export default Modal; | |||||
+ 0
- 20
services/autoplex-webui/src/app/index.ts
View File
| @ -1,20 +0,0 @@ | |||||
| import { createApp } from 'vue' | |||||
| import router from "./routes"; | |||||
| import store from "./store"; | |||||
| import App from './App.vue' | |||||
| import "./styles/index.css"; | |||||
| let app = createApp(App); | |||||
| app.use(router); | |||||
| app.use(store); | |||||
| app.mount("#app"); | |||||
| /** | |||||
| * Dropdown menus | |||||
| */ | |||||
| document.addEventListener("click", (event) => { | |||||
| let dropdownMenus = document.querySelectorAll(".dropdown.active").forEach((elem) => { | |||||
| elem.classList.remove("active"); | |||||
| }); | |||||
| }); | |||||
+ 0
- 190
services/autoplex-webui/src/app/routes/index.ts
View File
| @ -1,190 +0,0 @@ | |||||
| import { IApiDataResponse } from "@common/api_schema"; | |||||
| import { createRouter, createWebHistory, NavigationGuardNext, RouteLocationNormalized, RouteRecordRaw } from "vue-router"; | |||||
| import store, { Action } from "../store"; | |||||
| /** | |||||
| * Check if the user is a guest; redirect otherwise | |||||
| */ | |||||
| function requiresGuest(to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) { | |||||
| if (store.getters.isAuthenticated) { | |||||
| console.log("Checking guest..."); | |||||
| next({ name: "Home" }); | |||||
| return; | |||||
| } | |||||
| next(); | |||||
| } | |||||
| /** | |||||
| * Check if the user is authenticated; redirect otherwise | |||||
| */ | |||||
| function requiresAuth(to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) { | |||||
| if (!store.getters.isAuthenticated) { | |||||
| next({ name: "Login" }); | |||||
| return; | |||||
| } | |||||
| next(); | |||||
| } | |||||
| /** | |||||
| * Check if the user is an authenticated admin, redirect otherwise | |||||
| */ | |||||
| function requiresAdmin(to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) { | |||||
| if (store.getters.isAuthenticated && !store.getters.isAdmin) { | |||||
| next({ name: "Home" }); | |||||
| return; | |||||
| } | |||||
| next(); | |||||
| } | |||||
| /** | |||||
| * Fetch request providing authentication and logout upon unauthorized requests | |||||
| */ | |||||
| export async function authFetch(path: string, options: RequestInit = {}): Promise<Response> { | |||||
| // Ensure the user is logged in | |||||
| let token = store.getters.token; | |||||
| if (token == null) { | |||||
| router.push({ name: "Login" }); | |||||
| throw Error("Unauthorized"); | |||||
| } | |||||
| // Perform the request | |||||
| options.credentials = "include"; | |||||
| options.headers = Object.assign(options.headers ?? {}, { | |||||
| "Authorization": `Bearer ${token}` | |||||
| }); | |||||
| let response = await fetch(path, options); | |||||
| // If an unauthorized gets thrown, forget the user and redirect to login | |||||
| if (response.status === 401) { | |||||
| store.dispatch(Action.AuthForget, undefined); | |||||
| router.push({ name: "Login" }); | |||||
| throw Error("Unauthorized"); | |||||
| } | |||||
| return response; | |||||
| } | |||||
| /** | |||||
| * Perform an authorized API request returning a JSON object | |||||
| */ | |||||
| export async function authFetchApi<T>(path: string, options: RequestInit = {}) { | |||||
| let response = await authFetch(path, options); | |||||
| return <Promise<IApiDataResponse<T>>>response.json(); | |||||
| } | |||||
| const routes: RouteRecordRaw[] = [ | |||||
| { | |||||
| path: "/", | |||||
| name: "Home", | |||||
| redirect: to => ({ name: "Dashboard" }) | |||||
| }, | |||||
| { | |||||
| path: "/dashboard", | |||||
| name: "Dashboard", | |||||
| component: () => import("../views/Dashboard.vue"), | |||||
| beforeEnter: requiresAuth | |||||
| }, | |||||
| { | |||||
| path: "/search", | |||||
| name: "Search", | |||||
| component: () => import("../views/Search.vue"), | |||||
| beforeEnter: requiresAuth, | |||||
| children: [ | |||||
| { | |||||
| path: ":tmdbId", | |||||
| name: "Lookup", | |||||
| component: () => import("../components/modals/MovieModal.vue"), | |||||
| props: true | |||||
| } | |||||
| ] | |||||
| }, | |||||
| { | |||||
| path: "/admin", | |||||
| name: "Admin", | |||||
| redirect: to => ({ name: "AdminDashboard" }), | |||||
| component: () => import("../views/admin/Admin.vue"), | |||||
| beforeEnter: requiresAdmin, | |||||
| children: [ | |||||
| { | |||||
| path: "dashboard", | |||||
| name: "AdminDashboard", | |||||
| component: () => import("../views/admin/AdminDashboard.vue"), | |||||
| props: true | |||||
| } | |||||
| ] | |||||
| }, | |||||
| // Auth Routes --------------------------------------------------------------------------------- | |||||
| { | |||||
| path: "/login", | |||||
| name: "Login", | |||||
| component: () => import("../views/Login.vue"), | |||||
| beforeEnter: requiresGuest, | |||||
| meta: { | |||||
| disableNavBar: true | |||||
| } | |||||
| }, | |||||
| { | |||||
| path: "/register", | |||||
| name: "Register", | |||||
| component: () => import("../views/Register.vue"), | |||||
| beforeEnter: requiresGuest, | |||||
| meta: { | |||||
| disableNavBar: true | |||||
| } | |||||
| }, | |||||
| { | |||||
| path: "/logout", | |||||
| name: "Logout", | |||||
| component: { | |||||
| beforeRouteEnter(to, from, next) { | |||||
| store.dispatch(Action.AuthForget, undefined); | |||||
| next({ name: "Login" }); | |||||
| } | |||||
| } | |||||
| }, | |||||
| { | |||||
| path: "/link/discord/:token", | |||||
| name: "LinkDiscord", | |||||
| component: () => import("../views/LinkDiscord.vue"), | |||||
| meta: { | |||||
| disableNavBar: true | |||||
| } | |||||
| }, | |||||
| { | |||||
| path: "/:pathMatch(.*)*", | |||||
| component: () => import("../views/Error404.vue") | |||||
| } | |||||
| ]; | |||||
| const router = createRouter({ | |||||
| history: createWebHistory(), | |||||
| routes, | |||||
| }); | |||||
| /** | |||||
| * Guard authentication and guest routes | |||||
| */ | |||||
| router.beforeEach((to, from, next) => { | |||||
| if (to.matched.some(record => record.meta.requiresAuth)) { | |||||
| if (localStorage.getItem("jwt") == null) { | |||||
| next({ name: "Login" }); | |||||
| return; | |||||
| } | |||||
| let user = JSON.parse(<any>localStorage.getItem("user")); | |||||
| if (to.matched.some(record => record.meta.requiresAdmin)) { | |||||
| if (!user.isAdmin) { | |||||
| next({ name: "Home" }); | |||||
| return; | |||||
| } | |||||
| } | |||||
| } else if (to.matched.some(record => record.meta.guest)) { | |||||
| if (localStorage.getItem("jwt") != null) { | |||||
| next({ name: "Home" }); | |||||
| return; | |||||
| } | |||||
| } | |||||
| next(); | |||||
| }); | |||||
| export default router; | |||||
+ 0
- 5
services/autoplex-webui/src/app/shims-vue.d.ts
View File
| @ -1,5 +0,0 @@ | |||||
| declare module '*.vue' { | |||||
| import { DefineComponent } from 'vue' | |||||
| const component: DefineComponent<{}, {}, any> | |||||
| export default component | |||||
| } | |||||
+ 0
- 9
services/autoplex-webui/src/app/shims-vuex.d.ts
View File
| @ -1,9 +0,0 @@ | |||||
| import { ComponentCustomProperties } from 'vue' | |||||
| import type { Store } from "./store"; | |||||
| declare module '@vue/runtime-core' { | |||||
| // provide typings for `this.$store` | |||||
| interface ComponentCustomProperties { | |||||
| $store: Store | |||||
| } | |||||
| } | |||||
+ 0
- 132
services/autoplex-webui/src/app/store/actions.ts
View File
| @ -1,132 +0,0 @@ | |||||
| import { ActionTree } from "vuex"; | |||||
| import { Actions } from "./generics"; | |||||
| import { IState } from "./state"; | |||||
| import { Mutation, MutationsTypes } from "./mutations"; | |||||
| import router, { authFetch, authFetchApi } from "../routes"; | |||||
| import { GettersTypes } from "./getters"; | |||||
| import { IApiDataResponse } from "@common/api_schema"; | |||||
| // Payload types | |||||
| type IAuthenticatePayload = { email: string, password: string, remember: boolean }; | |||||
| type IAuthenticateResult = { email?: string[], password?: string[] } | null; | |||||
| type IAuthFetchPayload = { path: string, options?: RequestInit }; | |||||
| /** | |||||
| * The available actions te perform | |||||
| */ | |||||
| export enum Action { | |||||
| // Authentication | |||||
| AuthAuthenticate = "AUTH_AUTHENTICATE", | |||||
| AuthForget = "AUHT_FORGET", | |||||
| AuthLoad = "AUTH_LOAD", | |||||
| // RESTful | |||||
| AuthFetch = "AUTH_FETCH", | |||||
| RequestMovie = "REQUEST_MOVIE" | |||||
| } | |||||
| /** | |||||
| * The action function signatures | |||||
| */ | |||||
| export type ActionsTypes = { | |||||
| // Authentication | |||||
| [Action.AuthAuthenticate]: (payload: IAuthenticatePayload) => Promise<IAuthenticateResult>, | |||||
| [Action.AuthForget] : () => void, | |||||
| [Action.AuthLoad] : () => boolean, | |||||
| // RESTful | |||||
| [Action.AuthFetch] : (payload: IAuthFetchPayload) => Promise<Response>, | |||||
| [Action.RequestMovie]: (tmdbId: number | string) => Promise<IApiDataResponse<{ ticketId: number }>> | |||||
| } | |||||
| /** | |||||
| * The action function implementations | |||||
| */ | |||||
| export const actions: Actions<IState, GettersTypes, MutationsTypes, ActionsTypes> & ActionTree<IState, IState> = { | |||||
| // Authentication ------------------------------------------------------------------------------ | |||||
| /** | |||||
| * Authenticate the credentials of a user and log them in | |||||
| */ | |||||
| [Action.AuthAuthenticate]({commit, dispatch}, {email, password, remember = false}) { | |||||
| return new Promise((resolve, reject) => { | |||||
| fetch(`/auth/login?use_cookies=${navigator.cookieEnabled}`, { | |||||
| method: "post", | |||||
| headers: { "Content-Type": "application/json" }, | |||||
| body: JSON.stringify({email, password}) | |||||
| }) | |||||
| .then(async response => { | |||||
| let body = await response.json(); | |||||
| if (response.status !== 200) { | |||||
| if (response.status === 401) { | |||||
| body.errors = { "email": [ "Email or password is incorrect" ] }; | |||||
| } | |||||
| resolve(body.errors || {}); | |||||
| return; | |||||
| } | |||||
| commit(Mutation.UserLoad, body.token); | |||||
| commit(Mutation.UserStore, remember); | |||||
| resolve(null); | |||||
| }) | |||||
| .catch(e => { | |||||
| console.error("Error occurred during submission:", e); | |||||
| reject(e); | |||||
| }); | |||||
| }); | |||||
| }, | |||||
| /** | |||||
| * Forget the login token and log the user out | |||||
| */ | |||||
| [Action.AuthForget]({commit}) { | |||||
| commit(Mutation.UserForget, undefined); | |||||
| }, | |||||
| /** | |||||
| * Load the user from local storage | |||||
| */ | |||||
| [Action.AuthLoad]({getters, commit, dispatch}) { | |||||
| let token = getters.storedToken; | |||||
| if (!token) { | |||||
| return false; | |||||
| } | |||||
| try { | |||||
| commit(Mutation.UserLoad, token); | |||||
| } catch(e) { | |||||
| dispatch(Action.AuthForget, undefined); | |||||
| return false; | |||||
| } | |||||
| return true; | |||||
| }, | |||||
| // RESTful ------------------------------------------------------------------------------------- | |||||
| /** | |||||
| * Fetch request providing authentication and logout upon unauthorized requests | |||||
| */ | |||||
| async [Action.AuthFetch]({commit, state}, {path, options = {}}) { | |||||
| if (state.user == null) { | |||||
| router.push({ name: "Login" }); | |||||
| throw Error("Unauthorized"); | |||||
| } | |||||
| options.credentials = "include"; | |||||
| options.headers = Object.assign(options.headers ?? {}, { | |||||
| "Authorization": `Bearer ${state.user.token}` | |||||
| }); | |||||
| let response = await fetch(path, options); | |||||
| if (response.status === 401) { | |||||
| commit(Mutation.UserForget, undefined); | |||||
| router.push({ name: "Login" }); | |||||
| throw Error("Unauthorized"); | |||||
| } | |||||
| return response; | |||||
| }, | |||||
| /** | |||||
| * Request a movie | |||||
| */ | |||||
| async [Action.RequestMovie](_, tmdbId) { | |||||
| return await authFetchApi(`/api/movie/request/create/tmdb/${tmdbId}`); | |||||
| } | |||||
| }; | |||||
+ 0
- 33
services/autoplex-webui/src/app/store/generics.ts
View File
| @ -1,33 +0,0 @@ | |||||
| import { ActionContext, CommitOptions, DispatchOptions, GetterTree, MutationTree, Store as VuexStore } from "vuex"; | |||||
| type AugmentedActionContext<S, G extends GetterTree<S, S>, M extends MutationTree<S>, A extends ActionsType> = Omit<ActionContext<S, S>, "commit" | "dispatch" | "getters"> & { | |||||
| commit<K extends keyof M>(key: K, payload: Parameters<M[K]>[1]): ReturnType<M[K]>, | |||||
| dispatch<K extends keyof A, P extends Parameters<A[K]>[0]>( | |||||
| key: K, | |||||
| payload: P, | |||||
| options?: DispatchOptions | |||||
| ): ReturnType<A[K]>, | |||||
| getters: { [K in keyof G]: ReturnType<G[K]> } | |||||
| }; | |||||
| type ActionsType = { | |||||
| [key: string]: (payload?: any) => any | |||||
| }; | |||||
| export type Actions<S, G extends GetterTree<S, S>, M extends MutationTree<S>, A extends ActionsType> = { | |||||
| [K in keyof A]: (context: AugmentedActionContext<S, G, M, A>, payload: Parameters<A[K]>[0]) => ReturnType<A[K]> | |||||
| } | |||||
| export type GenericStore<S, G extends GetterTree<S, S>, M extends MutationTree<S>, A extends ActionsType> = Omit<VuexStore<S>, "commit" | "getters" | "dispatch"> & { | |||||
| commit<K extends keyof M, P extends Parameters<M[K]>[1]>( | |||||
| key: K, | |||||
| payload: P, | |||||
| options?: CommitOptions | |||||
| ): ReturnType<M[K]>, | |||||
| getters: { [K in keyof G]: ReturnType<G[K]> }, | |||||
| dispatch<K extends keyof A, P extends Parameters<A[K]>[0]>( | |||||
| key: K, | |||||
| payload: P, | |||||
| options?: DispatchOptions | |||||
| ): ReturnType<A[K]> | |||||
| }; | |||||
+ 0
- 47
services/autoplex-webui/src/app/store/getters.ts
View File
| @ -1,47 +0,0 @@ | |||||
| import { GetterTree } from "vuex"; | |||||
| import { IState } from "./state"; | |||||
| export type GettersTypes = { | |||||
| isAdmin (state: IState): boolean, | |||||
| isAuthenticated(state: IState): boolean, | |||||
| storedToken () : string | null, | |||||
| token (state: IState): string | null, | |||||
| userName (state: IState): string | null | |||||
| } | |||||
| export const getters: GettersTypes & GetterTree<IState, IState> = { | |||||
| /** | |||||
| * Determine if the current user is authenticated | |||||
| */ | |||||
| isAuthenticated(state: IState) { | |||||
| return state.user != null; | |||||
| }, | |||||
| /** | |||||
| * Determine if the user is an admin | |||||
| */ | |||||
| isAdmin(state: IState) { | |||||
| return state.user?.isAdmin ?? false; | |||||
| }, | |||||
| /** | |||||
| * Retrieve the stored token | |||||
| */ | |||||
| storedToken() { | |||||
| return sessionStorage.getItem("jwt") ?? localStorage.getItem("jwt"); | |||||
| }, | |||||
| /** | |||||
| * Get the current token | |||||
| */ | |||||
| token(state: IState) { | |||||
| return state.user?.token ?? null; | |||||
| }, | |||||
| /** | |||||
| * Get the user's name (assumes authenticated) | |||||
| */ | |||||
| userName(state: IState) { | |||||
| return state.user?.name.split(" ")[0] ?? null; | |||||
| } | |||||
| }; | |||||
+ 0
- 36
services/autoplex-webui/src/app/store/index.ts
View File
| @ -1,36 +0,0 @@ | |||||
| import { createLogger, createStore } from "vuex"; | |||||
| import { GenericStore } from "./generics"; | |||||
| import { getters, GettersTypes } from "./getters"; | |||||
| // Import store information | |||||
| import { state, IState } from "./state"; | |||||
| import { mutations, MutationsTypes } from "./mutations"; | |||||
| import { actions, ActionsTypes } from "./actions"; | |||||
| // Export store keys | |||||
| export { Mutation } from "./mutations"; | |||||
| export { Action } from "./actions"; | |||||
| /** | |||||
| * The the store type | |||||
| */ | |||||
| export type Store = GenericStore<IState, GettersTypes, MutationsTypes, ActionsTypes>; | |||||
| /** | |||||
| * Create the store instance | |||||
| */ | |||||
| const store = createStore({ | |||||
| state, getters, mutations, actions, plugins: [createLogger()] | |||||
| }) as Store; | |||||
| /** | |||||
| * Use the store | |||||
| */ | |||||
| export function useStore() { | |||||
| return store; | |||||
| } | |||||
| /** | |||||
| * Export the store instance by default | |||||
| */ | |||||
| export default store; | |||||
+ 0
- 92
services/autoplex-webui/src/app/store/mutations.ts
View File
| @ -1,92 +0,0 @@ | |||||
| import Modal from "@app/components/modals"; | |||||
| import jwtDecode from "jwt-decode"; | |||||
| import { MutationTree } from "vuex"; | |||||
| import { IState } from "./state"; | |||||
| /** | |||||
| * All available mutation types | |||||
| */ | |||||
| export enum Mutation { | |||||
| LockScroll = "LOCK_SCROLL", | |||||
| UserForget = "USER_FORGET", | |||||
| UserLoad = "USER_LOAD", | |||||
| UserStore = "USER_STORE", | |||||
| } | |||||
| /** | |||||
| * Type declarations for each mutation | |||||
| */ | |||||
| export type MutationsTypes<S = IState> = { | |||||
| [Mutation.UserForget]: (state: S) => void, | |||||
| [Mutation.UserLoad] : (state: S, token: string) => boolean, | |||||
| [Mutation.UserStore] : (state: S, remember: boolean) => void, | |||||
| [Mutation.LockScroll]: (state: S, lock: boolean) => void, | |||||
| } | |||||
| /** | |||||
| * The auth mutations | |||||
| */ | |||||
| export const mutations: MutationsTypes & MutationTree<IState> = { | |||||
| [Mutation.LockScroll](state: IState, lock: boolean) { | |||||
| if (lock) { | |||||
| // document.body.style.position = "fixed"; | |||||
| // document.body.style.top = `-${window.scrollY}px`; | |||||
| document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`; | |||||
| document.body.style.overflow = "hidden"; | |||||
| } else { | |||||
| // const scrollY = document.body.style.top; | |||||
| // document.body.style.position = ""; | |||||
| // document.body.style.top = ""; | |||||
| document.body.style.paddingRight = ""; | |||||
| document.body.style.overflow = ""; | |||||
| // window.scrollTo(0, parseInt(scrollY || '0') * -1); | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * Log the user out and remove the token from storage | |||||
| */ | |||||
| [Mutation.UserForget](state: IState) { | |||||
| state.user = null; | |||||
| sessionStorage.removeItem("jwt"); | |||||
| localStorage.removeItem("jwt"); | |||||
| }, | |||||
| /** | |||||
| * Try loading a user from the provided token | |||||
| */ | |||||
| [Mutation.UserLoad](state: IState, token: string) { | |||||
| try { | |||||
| let user: any = jwtDecode(token); | |||||
| state.user = { | |||||
| id : user.id, | |||||
| name : user.name, | |||||
| isAdmin: user.isAdmin, | |||||
| token : token | |||||
| } | |||||
| } catch(e) { | |||||
| return false; | |||||
| } | |||||
| return true; | |||||
| }, | |||||
| /** | |||||
| * Store the user to remember them | |||||
| */ | |||||
| [Mutation.UserStore](state: IState, remember: boolean) { | |||||
| if (state.user == null) { | |||||
| sessionStorage.removeItem("jwt"); | |||||
| localStorage.removeItem("jwt"); | |||||
| return; | |||||
| } | |||||
| if (remember) { | |||||
| localStorage.setItem("jwt", state.user.token); | |||||
| } else { | |||||
| sessionStorage.setItem("jwt", state.user.token); | |||||
| } | |||||
| } | |||||
| } | |||||
+ 0
- 6
services/autoplex-webui/src/app/store/schema.ts
View File
| @ -1,6 +0,0 @@ | |||||
| export interface IUser { | |||||
| id : number, | |||||
| name : string, | |||||
| isAdmin: boolean, | |||||
| token : string | |||||
| } | |||||
+ 0
- 21
services/autoplex-webui/src/app/store/state.ts
View File
| @ -1,21 +0,0 @@ | |||||
| import { IUser } from "./schema"; | |||||
| import type Modals from "../components/modals"; | |||||
| import Modal from "../components/modals"; | |||||
| /** | |||||
| * The state definition | |||||
| */ | |||||
| export interface IState { | |||||
| user : IUser | null, | |||||
| modalName : Modal | null, | |||||
| modalVisible: boolean | |||||
| } | |||||
| /** | |||||
| * The state implementation | |||||
| */ | |||||
| export const state: IState = { | |||||
| user: null, | |||||
| modalName: null, | |||||
| modalVisible: false, | |||||
| }; | |||||
+ 0
- 42
services/autoplex-webui/src/app/styles/index.css
View File
| @ -1,42 +0,0 @@ | |||||
| @import '@fortawesome/fontawesome-free/css/all.css'; | |||||
| @tailwind base; | |||||
| @tailwind components; | |||||
| @tailwind utilities; | |||||
| html, body { | |||||
| @apply h-full; | |||||
| } | |||||
| .fade-enter-active, .fade-leave-active { | |||||
| transition: opacity 0.15s; | |||||
| } | |||||
| .fade-enter-from, .fade-leave-to { | |||||
| opacity: 0; | |||||
| } | |||||
| .slide-enter-active, .slide-leave-active { | |||||
| transform: none; | |||||
| opacity: 1.0; | |||||
| transition: opacity 0.15s ease-in-out, transform 0.5s cubic-bezier(0.0, 0.0, 0.2, 1); | |||||
| } | |||||
| .slide-enter-from, .slide-leave-to { | |||||
| opacity: 0; | |||||
| transition: opacity 0.15s ease-in-out, transform 0.5s cubic-bezier(0.4, 0.0, 1, 1); | |||||
| transform: translateY(10%); | |||||
| } | |||||
| .slide-left-enter-active, .slide-left-leave-active { | |||||
| transform: none; | |||||
| transition: transform 0.25s cubic-bezier(0.0, 0.0, 0.2, 1); | |||||
| } | |||||
| .slide-left-enter-from, .slide-left-leave-to { | |||||
| transition: transform 0.25s cubic-bezier(0.4, 0.0, 1, 1); | |||||
| transform: translateX(-100%); | |||||
| } | |||||
| .modal { | |||||
| @apply fixed inset-0 flex flex-col h-screen; | |||||
| background: rgba(0, 0, 0, 0.5); | |||||
| } | |||||
+ 0
- 51
services/autoplex-webui/src/app/util.ts
View File
| @ -1,51 +0,0 @@ | |||||
| import { single as validate } from "validate.js"; | |||||
| export function validateValue(value: string, constraints: any) { | |||||
| return <string>(validate(value || null, constraints) ?? [""])[0]; | |||||
| } | |||||
| export function getAverageRgb(imgEl: HTMLImageElement) { | |||||
| var blockSize = 5, // only visit every 5 pixels | |||||
| defaultRGB = {r:0,g:0,b:0}, // for non-supporting envs | |||||
| canvas = document.createElement('canvas'), | |||||
| context = canvas.getContext && canvas.getContext('2d'), | |||||
| data, width, height, | |||||
| i = -4, | |||||
| length, | |||||
| rgb = {r:0,g:0,b:0}, | |||||
| count = 0; | |||||
| if (!context) { | |||||
| return defaultRGB; | |||||
| } | |||||
| height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height; | |||||
| width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width; | |||||
| context.drawImage(imgEl, 0, 0); | |||||
| try { | |||||
| data = context.getImageData(0, 0, width, height); | |||||
| } catch(e) { | |||||
| /* security error, img on diff domain */alert('x'); | |||||
| return defaultRGB; | |||||
| } | |||||
| length = data.data.length; | |||||
| while ( (i += blockSize * 4) < length ) { | |||||
| ++count; | |||||
| rgb.r += data.data[i]; | |||||
| rgb.g += data.data[i+1]; | |||||
| rgb.b += data.data[i+2]; | |||||
| } | |||||
| // ~~ used to floor values | |||||
| rgb.r = ~~(rgb.r/count); | |||||
| rgb.g = ~~(rgb.g/count); | |||||
| rgb.b = ~~(rgb.b/count); | |||||
| return rgb; | |||||
| } | |||||
+ 0
- 43
services/autoplex-webui/src/app/views/Dashboard.vue
View File
| @ -1,43 +0,0 @@ | |||||
| <template> | |||||
| <div class="h-12 text-2xl flex items-center"> | |||||
| <h1 class="">Active Requests</h1> | |||||
| </div> | |||||
| <movie-list :movies="activeRequests" @onClickMovie="displayMovie"/> | |||||
| <movie-modal :tmdb-id="activeTmdb" @onClose="activeTmdb = undefined"/> | |||||
| </template> | |||||
| <script lang="ts"> | |||||
| import { defineComponent } from "vue"; | |||||
| import { authFetchApi } from "../routes"; | |||||
| import MovieList from "../components/MovieList.vue"; | |||||
| import MovieModal from "../components/modals/MovieModal.vue"; | |||||
| import { IApiMovie } from "../../common/api_schema"; | |||||
| export default defineComponent({ | |||||
| components: { | |||||
| MovieList, | |||||
| MovieModal | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| activeRequests: <IApiMovie[]>[], | |||||
| activeTmdb: <number|undefined> undefined | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| displayMovie(movie: IApiMovie, index: number) { | |||||
| this.activeTmdb = movie.tmdbId; | |||||
| }, | |||||
| fetchRequests() { | |||||
| return authFetchApi<IApiMovie[]>("/api/movie/request/tickets/active").then((response) => { | |||||
| this.activeRequests = response.data; | |||||
| }).catch(() => { | |||||
| console.error("Failed to fetch active movie tickets"); | |||||
| }); | |||||
| } | |||||
| }, | |||||
| mounted() { | |||||
| this.fetchRequests(); | |||||
| } | |||||
| }); | |||||
| </script> | |||||
+ 0
- 6
services/autoplex-webui/src/app/views/Error404.vue
View File
| @ -1,6 +0,0 @@ | |||||
| <template> | |||||
| <div class="mx-auto my-auto"> | |||||
| <h1 class="text-9xl font-black opacity-30">404</h1> | |||||
| </div> | |||||
| </template> | |||||
+ 0
- 99
services/autoplex-webui/src/app/views/LinkDiscord.vue
View File
| @ -1,99 +0,0 @@ | |||||
| <template> | |||||
| <div v-if="success" class="w-full sm:max-w-sm sm:mx-auto sm:my-auto p-6 space-y-4 bg-white rounded-lg shadow-md text-center"> | |||||
| <div class="text-center font-thin text-4xl pt-4">AUTOPLEX</div> | |||||
| <div> | |||||
| <i class="fas fa-check-circle align-middle text-green-500 text-4xl"></i> | |||||
| </div> | |||||
| <p>Discord account linked successfully! You may close this tab now</p> | |||||
| </div> | |||||
| <div v-else class="w-full sm:max-w-sm sm:mx-auto sm:my-auto p-6 space-y-4 bg-white rounded-lg shadow-md"> | |||||
| <div class="text-center font-thin text-4xl pt-4">AUTOPLEX</div> | |||||
| <div> | |||||
| <p class="opacity-70 text-sm text-center">Enter your credientials to complete linking your Discord account</p> | |||||
| </div> | |||||
| <form @submit.prevent="authenticate"> | |||||
| <div class="space-y-4"> | |||||
| <div> | |||||
| <text-box label="Email" type="email" ref="email" placeholder="john@example.com" :disabled="isSubmitting" | |||||
| v-model="fields.email"/> | |||||
| </div> | |||||
| <div> | |||||
| <text-box label="Password" type="password" ref="password" placeholder="············" :disabled="isSubmitting" | |||||
| v-model="fields.password"/> | |||||
| </div> | |||||
| <div> | |||||
| <button :disabled="isSubmitting" class="block w-full rounded-full bg-indigo-500 text-white p-2 focus:outline-none">Link Discord Account</button> | |||||
| </div> | |||||
| </div> | |||||
| </form> | |||||
| </div> | |||||
| </template> | |||||
| <script lang="ts"> | |||||
| import { defineComponent } from "vue"; | |||||
| import TextBox from "../components/TextBox.vue"; | |||||
| export default defineComponent({ | |||||
| components: { | |||||
| TextBox | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| isSubmitting: false, | |||||
| success: false, | |||||
| fields: { | |||||
| email: "", | |||||
| password: "" | |||||
| }, | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| async authenticate() { | |||||
| if (this.isSubmitting) { | |||||
| return; | |||||
| } | |||||
| this.isSubmitting = true; | |||||
| try { | |||||
| // Send the request and wait far the response | |||||
| let response = await fetch(`/auth/link/discord/${this.$route.params["token"]}`, { | |||||
| method: "post", | |||||
| headers: { "Content-Type": "application/json" }, | |||||
| body: JSON.stringify(this.fields) | |||||
| }); | |||||
| this.isSubmitting = false; | |||||
| // Check the response for errors | |||||
| let body = await response.json(); | |||||
| if (response.status !== 200) { | |||||
| if (response.status === 401) { | |||||
| body.errors = { "email": [ "Email or password is incorrect" ] }; | |||||
| } | |||||
| for (let fieldName of ["email", "password"]) { | |||||
| let field = <any>this.$refs[fieldName]; | |||||
| let message = <string>((<any>body.errors)[fieldName] ?? [""])[0]; | |||||
| field.setErrorMessage(message); | |||||
| } | |||||
| return; | |||||
| } | |||||
| } catch(e) { | |||||
| console.error("Something went wrong logging in:", e); | |||||
| this.isSubmitting = false; | |||||
| } | |||||
| this.success = true; | |||||
| } | |||||
| }, | |||||
| async beforeRouteEnter(to, from, next) { | |||||
| let token = to.params["token"]; | |||||
| if (typeof token !== "string") { | |||||
| next({ name: "Home" }); | |||||
| return; | |||||
| } | |||||
| // Verify that the token is valid. Redirect otherwise | |||||
| let response = await fetch(`/auth/link/verify/discord/${token}`, { method: "post" }); | |||||
| if (response.status !== 200) { | |||||
| next({ name: "Home" }); | |||||
| return; | |||||
| } | |||||
| next(); | |||||
| } | |||||
| }); | |||||
| </script> | |||||
+ 0
- 77
services/autoplex-webui/src/app/views/Login.vue
View File
| @ -1,77 +0,0 @@ | |||||
| <template> | |||||
| <div class="w-full sm:max-w-sm sm:mx-auto sm:my-auto p-6 space-y-4 bg-white rounded-lg shadow-md"> | |||||
| <div class="text-center font-thin text-4xl py-4">AUTOPLEX</div> | |||||
| <div class="font-medium text-center text-xl">Sign in</div> | |||||
| <form @submit.prevent="login"> | |||||
| <div class="space-y-4"> | |||||
| <div> | |||||
| <text-box label="Email" type="email" ref="email" placeholder="john@example.com" :disabled="isSubmitting" | |||||
| v-model="fields.email"/> | |||||
| </div> | |||||
| <div> | |||||
| <text-box label="Password" type="password" ref="password" placeholder="············" :disabled="isSubmitting" | |||||
| v-model="fields.password"/> | |||||
| </div> | |||||
| <div> | |||||
| <check-box label="Remember Me" :disabled="isSubmitting" v-model="fields.remember"/> | |||||
| </div> | |||||
| <div> | |||||
| <button :disabled="isSubmitting" class="block w-full rounded-full bg-indigo-500 text-white p-2 focus:outline-none">Sign In</button> | |||||
| </div> | |||||
| </div> | |||||
| </form> | |||||
| </div> | |||||
| </template> | |||||
| <script lang="ts"> | |||||
| import { defineComponent } from "vue"; | |||||
| import { Action } from "../store"; | |||||
| import CheckBox from "../components/CheckBox.vue"; | |||||
| import TextBox from "../components/TextBox.vue"; | |||||
| export default defineComponent({ | |||||
| components: { | |||||
| CheckBox, | |||||
| TextBox | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| isSubmitting: false, | |||||
| fields: { | |||||
| email: "", | |||||
| password: "", | |||||
| remember: false | |||||
| }, | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| async login() { | |||||
| if (this.isSubmitting) { | |||||
| return; | |||||
| } | |||||
| this.isSubmitting = true; | |||||
| try { | |||||
| let errors = await this.$store.dispatch(Action.AuthAuthenticate, this.fields); | |||||
| if (errors) { | |||||
| for (let fieldName of ["email", "password"]) { | |||||
| let field = <any>this.$refs[fieldName]; | |||||
| let message = <string>((<any>errors)[fieldName] ?? [""])[0]; | |||||
| field.setErrorMessage(message); | |||||
| } | |||||
| } else { | |||||
| this.$router.push({ name: "Home" }); | |||||
| } | |||||
| } catch(e) { | |||||
| console.error("Something went wrong logging in:", e); | |||||
| } | |||||
| this.isSubmitting = false; | |||||
| } | |||||
| } | |||||
| }); | |||||
| </script> | |||||
| <style lang="postcss"> | |||||
| button:focus-visible { | |||||
| @apply ring-2 ring-indigo-500 ring-offset-2; | |||||
| } | |||||
| </style> | |||||
+ 0
- 156
services/autoplex-webui/src/app/views/Register.vue
View File
| @ -1,156 +0,0 @@ | |||||
| <template> | |||||
| <div class="w-full sm:max-w-sm sm:mx-auto sm:my-auto p-6 space-y-4 bg-white rounded-lg shadow-md"> | |||||
| <div class="text-center font-thin text-4xl py-4">AUTOPLEX</div> | |||||
| <div class="font-medium text-center text-xl">Sign Up</div> | |||||
| <form @submit.prevent="register"> | |||||
| <div class="space-y-4"> | |||||
| <div> | |||||
| <text-box label="Access Token" type="text" disabled | |||||
| v-model="fields.token" :validator="validateToken" ref="token"/> | |||||
| </div> | |||||
| <div> | |||||
| <text-box label="Your Name" type="text" placeholder="John Doe" :disabled="isSubmitting" | |||||
| v-model="fields.name" :validator="constraints.name" ref="name"/> | |||||
| </div> | |||||
| <div> | |||||
| <text-box label="Email" type="email" placeholder="john@example.com" :disabled="isSubmitting" | |||||
| v-model="fields.email" :validator="validateEmail" ref="email"/> | |||||
| </div> | |||||
| <div> | |||||
| <text-box label="Password" type="password" placeholder="············" :disabled="isSubmitting" | |||||
| v-model="fields.password" :validator="constraints.password" ref="password" | |||||
| /> | |||||
| </div> | |||||
| <div> | |||||
| <text-box label="Re-type Password" type="password" placeholder="············" :disabled="isSubmitting" | |||||
| v-model="fields.retypePassword" :validator="validateRetypePassword" ref="retypePassword"/> | |||||
| </div> | |||||
| <div> | |||||
| <button type="submit" class="block w-full rounded-full bg-indigo-500 text-white p-3 focus:outline-none" :disabled="isSubmitting">Register</button> | |||||
| </div> | |||||
| </div> | |||||
| </form> | |||||
| </div> | |||||
| </template> | |||||
| <script lang="ts"> | |||||
| import { defineComponent, reactive } from "vue"; | |||||
| import CheckBox from "../components/CheckBox.vue"; | |||||
| import TextBox from "../components/TextBox.vue"; | |||||
| import { constraints } from "../../common/validation"; | |||||
| import { validateValue } from "../util"; | |||||
| export default defineComponent({ | |||||
| components: { | |||||
| CheckBox, | |||||
| TextBox | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| isSubmitting : false, | |||||
| fields: reactive({ | |||||
| token : <string>this.$route.query["token"], | |||||
| name : "", | |||||
| email : "", | |||||
| password : "", | |||||
| retypePassword: "", | |||||
| }), | |||||
| constraints: { | |||||
| name: constraints.register.name, | |||||
| email: constraints.register.email, | |||||
| password: constraints.register.password | |||||
| } | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| /** | |||||
| * Submit the registration form | |||||
| */ | |||||
| async register() { | |||||
| if (this.isSubmitting) { | |||||
| return; | |||||
| } | |||||
| this.isSubmitting = true; | |||||
| fetch(`/auth/register`, { | |||||
| method: "post", | |||||
| headers: { | |||||
| "Content-Type": "application/json" | |||||
| }, | |||||
| body: JSON.stringify(this.fields) | |||||
| }) | |||||
| .then(async response => { | |||||
| this.isSubmitting = false; | |||||
| if (response.status !== 200) { | |||||
| let body = await response.json(); | |||||
| if (body.errors) { | |||||
| for (let fieldName in this.fields) { | |||||
| let field = <any>this.$refs[fieldName]; | |||||
| let message = <string>(body.errors[fieldName] ?? [""])[0]; | |||||
| field.setErrorMessage(message); | |||||
| } | |||||
| } | |||||
| return; | |||||
| } | |||||
| this.$router.push({ name: "Login" }); | |||||
| }) | |||||
| .catch(e => { | |||||
| console.error("Error occurred during submission:", e); | |||||
| this.isSubmitting = false; | |||||
| }); | |||||
| }, | |||||
| /** | |||||
| * Validate the provided registration token | |||||
| */ | |||||
| async validateToken(token: string) { | |||||
| let response = await fetch(`/auth/register/validate_token/${token}`, { method: "post" }); | |||||
| if (response.status !== 200) { | |||||
| return "A valid token is required to register"; | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * Validate the provided email address field | |||||
| */ | |||||
| async validateEmail(email: string) { | |||||
| let error = validateValue(email, constraints.register.email); | |||||
| if (error) { | |||||
| return error; | |||||
| } | |||||
| // Check email availability | |||||
| let response = await fetch(`/auth/register/available_email/${email}`, { method: "post" }); | |||||
| if (response.status !== 200) { | |||||
| return "An account with that email address already exists"; | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * Validate the provided retype-password field | |||||
| */ | |||||
| validateRetypePassword(value: string) { | |||||
| if (value.trim().length == 0) { | |||||
| return constraints.register.retypePassword.presence.message; | |||||
| } | |||||
| if (value !== this.fields.password) { | |||||
| return constraints.register.retypePassword.equality.message; | |||||
| } | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * Navigation Guard | |||||
| */ | |||||
| beforeRouteEnter(to, from, next) { | |||||
| if (to.query["token"] === undefined) { | |||||
| next({ name: "Login" }); | |||||
| } else { | |||||
| next(); | |||||
| } | |||||
| } | |||||
| }); | |||||
| </script> | |||||
| <style lang="postcss"> | |||||
| button:focus-visible { | |||||
| @apply ring-2 ring-indigo-500 ring-offset-2; | |||||
| } | |||||
| </style> | |||||
+ 0
- 102
services/autoplex-webui/src/app/views/Search.vue
View File
| @ -1,102 +0,0 @@ | |||||
| <template> | |||||
| <div class="space-y-4 lg:p-4"> | |||||
| <form @submit.prevent="() => search()"> | |||||
| <div class="flex rounded-xl overflow-hidden shadow-md"> | |||||
| <input type="text" v-model="searchValue" :placeholder="exampleTitles[Math.floor(exampleTitles.length*Math.random())]" | |||||
| class="w-full outline-none p-2 bg-white border border-gray-100 text-gray-800 placeholder-gray-400 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-gray-50 disabled:border-gray-400"> | |||||
| <button class="py-3 px-6 bg-indigo-500 text-white" type="submit">Search</button> | |||||
| </div> | |||||
| </form> | |||||
| <div v-if="$route.query['query']" class="text-center">{{ movies.length }} result{{ movies.length != 1 ? 's' : ""}} found</div> | |||||
| <movie-list :movies="movies" @onClickMovie="displayMovie"/> | |||||
| </div> | |||||
| <router-view @onClose="onModalClosed"></router-view> | |||||
| </template> | |||||
| <script lang="ts"> | |||||
| import { defineComponent } from "vue"; | |||||
| import { IApiMovie, IApiPaginatedResponse } from "@common/api_schema"; | |||||
| import { authFetchApi } from "../routes"; | |||||
| import MovieList from "../components/MovieList.vue"; | |||||
| export default defineComponent({ | |||||
| components: { | |||||
| MovieList | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| exampleTitles: ["John Wick", "The Incredibles 2", "Stand by Me", "Shawshank Redemption", "The Dark Knight", "Pulp Fiction", "Forrest Gump"], | |||||
| isSubmitting: false, | |||||
| movies: <IApiMovie[]>[], | |||||
| searchValue: <string>this.$route.query["query"] || "", | |||||
| page: -1, | |||||
| totalPages: 0, | |||||
| totalResults: 0 | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| displayMovie(movie: IApiMovie) { | |||||
| this.$router.push({ | |||||
| name : "Lookup", | |||||
| params: { tmdbId: movie.tmdbId }, | |||||
| query : this.$route.query | |||||
| }); | |||||
| }, | |||||
| onModalClosed() { | |||||
| this.$router.push({ name: "Search", query: this.$route.query }); | |||||
| }, | |||||
| async search(pushRoute: boolean = true) { | |||||
| if (this.isSubmitting || this.searchValue.trim().length == 0) { | |||||
| return; | |||||
| } | |||||
| if (document.activeElement && (<any>document.activeElement).blur) { | |||||
| (<any>document.activeElement).blur(); | |||||
| } | |||||
| if (pushRoute) { | |||||
| this.$router.push({ name: "Search", query: { query: this.searchValue } }); | |||||
| } | |||||
| this.isSubmitting = true; | |||||
| try { | |||||
| let response = await authFetchApi<IApiPaginatedResponse<IApiMovie>>(`/api/movie/search?query=${encodeURI(this.searchValue)}`); | |||||
| this.movies = response.data.results; | |||||
| this.page = response.data.page; | |||||
| this.totalPages = response.data.totalPages; | |||||
| this.totalResults = response.data.totalResults; | |||||
| console.log("Got results", this.totalResults); | |||||
| } catch(e) { | |||||
| console.log("Error fetching movies:", e); | |||||
| } | |||||
| this.isSubmitting = false; | |||||
| } | |||||
| }, | |||||
| mounted() { | |||||
| this.search(false); | |||||
| }, | |||||
| }); | |||||
| </script> | |||||
| <style scoped> | |||||
| .overlay { | |||||
| position: relative; | |||||
| } | |||||
| .overlay::before { | |||||
| content: ""; | |||||
| position: absolute; | |||||
| left: 0; top: 0; | |||||
| right: 0; | |||||
| bottom: 0; | |||||
| background: rgba(0, 0, 0, 0.5); | |||||
| filter: grayscale(100%); | |||||
| z-index: 0; | |||||
| } | |||||
| .overlay > * { | |||||
| z-index: 1; | |||||
| } | |||||
| .active .body { | |||||
| display: block !important; | |||||
| } | |||||
| </style> | |||||
+ 0
- 3
services/autoplex-webui/src/app/views/admin/Admin.vue
View File
| @ -1,3 +0,0 @@ | |||||
| <template> | |||||
| <router-view/> | |||||
| </template> | |||||
+ 0
- 3
services/autoplex-webui/src/app/views/admin/AdminDashboard.vue
View File
| @ -1,3 +0,0 @@ | |||||
| <template> | |||||
| <div>Admin dashboard</div> | |||||
| </template> | |||||
+ 0
- 60
services/autoplex-webui/src/common/api_schema.ts
View File
| @ -1,60 +0,0 @@ | |||||
| /** | |||||
| * Basic user information schema | |||||
| */ | |||||
| export interface IUser { | |||||
| id : number, | |||||
| name : string, | |||||
| isAdmin: boolean | |||||
| } | |||||
| /** | |||||
| * The JWT auth token structure | |||||
| */ | |||||
| export interface ITokenSchema extends IUser { | |||||
| iat : number, | |||||
| exp : number | |||||
| } | |||||
| /** | |||||
| * The general API response structure | |||||
| */ | |||||
| export interface IApiResponse { | |||||
| status: string | |||||
| } | |||||
| /** | |||||
| * A generic data response from the API | |||||
| */ | |||||
| export interface IApiDataResponse<T> extends IApiResponse { | |||||
| data: T | |||||
| } | |||||
| export interface IApiPaginatedResponse<T> { | |||||
| page : number, | |||||
| results : T[], | |||||
| totalPages : number, | |||||
| totalResults: number | |||||
| }; | |||||
| /** | |||||
| * A movie listing returned from the API | |||||
| */ | |||||
| export interface IApiMovie { | |||||
| plexLink : string | null, | |||||
| posterPath : string | null, | |||||
| releaseDate: string | null, | |||||
| ticketId : number | null, | |||||
| title : string, | |||||
| tmdbId : number | |||||
| } | |||||
| /** | |||||
| * Movie details returned from the API | |||||
| */ | |||||
| export interface IApiMovieDetails extends IApiMovie { | |||||
| backdropPath: string | null, | |||||
| imdbId : string | null, | |||||
| overview : string | null, | |||||
| runtime : number | null, | |||||
| requestedBy : IUser | null | |||||
| } | |||||
+ 0
- 90
services/autoplex-webui/src/common/validation.ts
View File
| @ -1,90 +0,0 @@ | |||||
| export const constraints = { | |||||
| api: { | |||||
| movie: { | |||||
| search: { | |||||
| query: { | |||||
| presence: { | |||||
| allowEmpty: false, | |||||
| message: "The query cannot be blank" | |||||
| } | |||||
| }, | |||||
| year: { | |||||
| numericality: { | |||||
| onlyInteger: true, | |||||
| greaterThan: 0, | |||||
| notGreaterThan: "Invalid year", | |||||
| notValid: "Invalid year", | |||||
| notInteger: "Invalid year" | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| }, | |||||
| login: { | |||||
| email: { | |||||
| presence: { | |||||
| allowEmpty: false, | |||||
| message: "An email address is required" | |||||
| } | |||||
| }, | |||||
| password: { | |||||
| presence: { | |||||
| allowEmpty: false, | |||||
| message: "A password is required" | |||||
| } | |||||
| } | |||||
| }, | |||||
| register: { | |||||
| token: { | |||||
| presence: { | |||||
| message: "A valid token is required to register" | |||||
| }, | |||||
| token: { | |||||
| message: "A valid token is required to register" | |||||
| } | |||||
| }, | |||||
| name: { | |||||
| presence: { | |||||
| allowEmpty: false, | |||||
| message: "Your name is required" | |||||
| }, | |||||
| length: { | |||||
| maximum: 50, | |||||
| tooLong: "Your name cannot exceed 50 characters" | |||||
| } | |||||
| }, | |||||
| email: { | |||||
| presence: { | |||||
| allowEmpty: false, | |||||
| message: "Your email is required" | |||||
| }, | |||||
| length: { | |||||
| maximum: 255, | |||||
| tooLong: "An email address cannot exceed 255 characters" | |||||
| }, | |||||
| email: { | |||||
| message: "A valid email address is required" | |||||
| } | |||||
| }, | |||||
| password: { | |||||
| presence: { | |||||
| allowEmpty: false, | |||||
| message: "A password is required" | |||||
| }, | |||||
| length: { | |||||
| minimum: 8, | |||||
| tooShort: "Password should be at least 8 characters" | |||||
| } | |||||
| }, | |||||
| retypePassword: { | |||||
| presence: { | |||||
| allowEmpty: false, | |||||
| message: "Re-type your password to confirm it" | |||||
| }, | |||||
| equality: { | |||||
| attribute: "password", | |||||
| message: "Passwords must match" | |||||
| } | |||||
| } | |||||
| } | |||||
| }; | |||||
+ 0
- 27
services/autoplex-webui/src/server/index.ts
View File
| @ -1,27 +0,0 @@ | |||||
| import fastify from "fastify"; | |||||
| import fastifyStatic from "fastify-static"; | |||||
| import { join } from "path"; | |||||
| /** | |||||
| * Create the server instance | |||||
| */ | |||||
| let server = fastify(); | |||||
| /** | |||||
| * Serve static assets | |||||
| */ | |||||
| server.register(fastifyStatic, { | |||||
| root: join(__dirname, "../public") | |||||
| }); | |||||
| /** | |||||
| * If a file is not found, return the web UI | |||||
| */ | |||||
| server.setNotFoundHandler((_, reply) => { | |||||
| return reply.sendFile("index.html"); | |||||
| }); | |||||
| /** | |||||
| * Serve the web UI | |||||
| */ | |||||
| server.listen(3201, "0.0.0.0"); | |||||
+ 0
- 30
services/autoplex-webui/tailwind.config.js
View File
| @ -1,30 +0,0 @@ | |||||
| const defaultTheme = require("tailwindcss/defaultTheme"); | |||||
| module.exports = { | |||||
| purge: ["./index.html", "src/app/**/*.{vue,ts}"], | |||||
| darkMode: false, // or 'media' or 'class' | |||||
| theme: { | |||||
| extend: { | |||||
| colors: { | |||||
| ui: { | |||||
| plexGray: "rgb(31, 35, 38)" | |||||
| } | |||||
| } | |||||
| }, | |||||
| screens: { | |||||
| xs: "475px", | |||||
| ...defaultTheme.screens | |||||
| } | |||||
| }, | |||||
| variants: { | |||||
| extend: { | |||||
| cursor: ["disabled"], | |||||
| backgroundColor: ["disabled"], | |||||
| opacity: ["disabled"], | |||||
| borderWidth: ["disabled"], | |||||
| borderColor: ["disabled"], | |||||
| transform: ["motion-safe"] | |||||
| }, | |||||
| }, | |||||
| plugins: [], | |||||
| } | |||||
+ 0
- 76
services/autoplex-webui/tsconfig.json
View File
| @ -1,76 +0,0 @@ | |||||
| { | |||||
| "compilerOptions": { | |||||
| /* Visit https://aka.ms/tsconfig.json to read more about this file */ | |||||
| /* Basic Options */ | |||||
| // "incremental": true, /* Enable incremental compilation */ | |||||
| "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */ | |||||
| // "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ | |||||
| // "lib": [], /* Specify library files to be included in the compilation. */ | |||||
| // "allowJs": true, /* Allow javascript files to be compiled. */ | |||||
| // "checkJs": true, /* Report errors in .js files. */ | |||||
| // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */ | |||||
| // "declaration": true, /* Generates corresponding '.d.ts' file. */ | |||||
| // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ | |||||
| "sourceMap": true, /* Generates corresponding '.map' file. */ | |||||
| // "outFile": "./", /* Concatenate and emit output to single file. */ | |||||
| "outDir": "./dist", /* Redirect output structure to the directory. */ | |||||
| // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ | |||||
| // "composite": true, /* Enable project compilation */ | |||||
| // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ | |||||
| // "removeComments": true, /* Do not emit comments to output. */ | |||||
| // "noEmit": true, /* Do not emit outputs. */ | |||||
| // "importHelpers": true, /* Import emit helpers from 'tslib'. */ | |||||
| "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ | |||||
| // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ | |||||
| /* Strict Type-Checking Options */ | |||||
| "strict": true, /* Enable all strict type-checking options. */ | |||||
| // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ | |||||
| // "strictNullChecks": true, /* Enable strict null checks. */ | |||||
| // "strictFunctionTypes": true, /* Enable strict checking of function types. */ | |||||
| // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ | |||||
| // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ | |||||
| // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ | |||||
| // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ | |||||
| /* Additional Checks */ | |||||
| // "noUnusedLocals": true, /* Report errors on unused locals. */ | |||||
| // "noUnusedParameters": true, /* Report errors on unused parameters. */ | |||||
| // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ | |||||
| // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ | |||||
| // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ | |||||
| // "noPropertyAccessFromIndexSignature": true, /* Require undeclared properties from index signatures to use element accesses. */ | |||||
| /* Module Resolution Options */ | |||||
| // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ | |||||
| "baseUrl": "./src", /* Base directory to resolve non-absolute module names. */ | |||||
| // "paths": {} /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ | |||||
| // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ | |||||
| "typeRoots": [ /* List of folders to include type definitions from. */ | |||||
| "src/typings" | |||||
| ], | |||||
| // "types": [], /* Type declaration files to be included in compilation. */ | |||||
| // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ | |||||
| "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ | |||||
| // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ | |||||
| // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ | |||||
| /* Source Map Options */ | |||||
| // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ | |||||
| // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ | |||||
| // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ | |||||
| // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ | |||||
| /* Experimental Options */ | |||||
| "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ | |||||
| "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ | |||||
| /* Advanced Options */ | |||||
| "skipLibCheck": true, /* Skip type checking of declaration files. */ | |||||
| "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ | |||||
| }, | |||||
| "include": [ | |||||
| "src" | |||||
| ] | |||||
| } | |||||
+ 0
- 12
services/autoplex-webui/tsconfig.server.json
View File
| @ -1,12 +0,0 @@ | |||||
| { | |||||
| "extends": "./tsconfig.json", | |||||
| "compilerOptions": { | |||||
| "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */ | |||||
| "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ | |||||
| "outDir": "dist", /* Redirect output structure to the directory. */ | |||||
| "sourceRoot": "src/server" /* Specify the location where debugger should locate TypeScript files instead of source locations. */ | |||||
| }, | |||||
| "exclude": [ | |||||
| "src/app" | |||||
| ] | |||||
| } | |||||
+ 0
- 26
services/autoplex-webui/tsconfig.vite.json
View File
| @ -1,26 +0,0 @@ | |||||
| { | |||||
| "extends": "./tsconfig.json", | |||||
| "compilerOptions": { | |||||
| "target": "esnext", | |||||
| "module": "esnext", | |||||
| "moduleResolution": "node", | |||||
| "jsx": "preserve", | |||||
| "resolveJsonModule": true, | |||||
| "lib": ["esnext", "dom"], | |||||
| "types": ["vite/client"], | |||||
| "sourceRoot": "src/app", | |||||
| "paths": { | |||||
| "@app/*": ["app/*"], | |||||
| "@common/*": ["common/*"] | |||||
| } | |||||
| }, | |||||
| "include": [ | |||||
| "src/app/**/*.ts", | |||||
| "src/app**/*.d.ts", | |||||
| "src/app/**/*.tsx", | |||||
| "src/app/**/*.vue" | |||||
| ], | |||||
| "exclude": [ | |||||
| "src/server" | |||||
| ] | |||||
| } | |||||
+ 0
- 14
services/autoplex-webui/vite.config.ts
View File
| @ -1,14 +0,0 @@ | |||||
| import { defineConfig } from 'vite' | |||||
| import vue from '@vitejs/plugin-vue' | |||||
| // https://vitejs.dev/config/ | |||||
| export default defineConfig({ | |||||
| plugins: [vue()], | |||||
| build: { | |||||
| manifest: true, | |||||
| outDir: "./dist/public" | |||||
| }, | |||||
| server: { | |||||
| port: 3201 | |||||
| } | |||||
| }) | |||||