diff --git a/client/package-lock.json b/client/package-lock.json index b41a0b9..b15c1b4 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -11,11 +11,11 @@ "axios": "^1.5.1", "core-js": "^3.8.3", "moment": "^2.29.4", + "sweetalert2": "^11.7.31", "vue": "^2.6.14", "vue-class-component": "^7.2.3", "vue-property-decorator": "^9.1.2", "vue-router": "^3.5.1", - "vue-sweetalert2": "^5.0.5", "vuetify": "^2.6.0", "vuex": "^3.6.2" }, @@ -12824,17 +12824,6 @@ "node": ">=4.0.0" } }, - "node_modules/vue-sweetalert2": { - "version": "5.0.5", - "resolved": "https://registry.npmjs.org/vue-sweetalert2/-/vue-sweetalert2-5.0.5.tgz", - "integrity": "sha512-Q7+TjQxNwGruT2jfPaSKMz18HHWs81r4umEwlrrtOf/QL5Iwl1T+tUaNkcvKB7Rf9rYftubt7NnOMjfDMnDH3A==", - "dependencies": { - "sweetalert2": "11.x" - }, - "peerDependencies": { - "vue": "*" - } - }, "node_modules/vue-template-compiler": { "version": "2.7.14", "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz", diff --git a/client/package.json b/client/package.json index 62294be..73cfd8d 100644 --- a/client/package.json +++ b/client/package.json @@ -11,11 +11,11 @@ "axios": "^1.5.1", "core-js": "^3.8.3", "moment": "^2.29.4", + "sweetalert2": "^11.7.31", "vue": "^2.6.14", "vue-class-component": "^7.2.3", "vue-property-decorator": "^9.1.2", "vue-router": "^3.5.1", - "vue-sweetalert2": "^5.0.5", "vuetify": "^2.6.0", "vuex": "^3.6.2" }, diff --git a/client/src/assets/styles/vendor/_sweetalert2.scss b/client/src/assets/styles/vendor/_sweetalert2.scss index 3f80ed1..bd2d934 100644 --- a/client/src/assets/styles/vendor/_sweetalert2.scss +++ b/client/src/assets/styles/vendor/_sweetalert2.scss @@ -1,44 +1,16 @@ -$swal2-white: #fff; -$swal2-black: #000; +@import '~sweetalert2/src/variables'; + $swal2-outline-color: transparent; -// CONTAINER -$swal2-container-padding: .625em; - -// BOX MODEL -$swal2-width: 32em; +// POPUP $swal2-padding: 1.25em; -$swal2-border: none; $swal2-border-radius: .3125em; -$swal2-box-shadow: #d9d9d9; - -// ANIMATIONS -$swal2-show-animation: swal2-show .3s; -$swal2-hide-animation: swal2-hide .15s forwards; // BACKGROUND $swal2-background: $background-secondary; -// TYPOGRAPHY -$swal2-font: inherit; -$swal2-font-size: 1rem; - -// BACKDROP -$swal2-backdrop: rgba($swal2-black, .4); -$swal2-backdrop-transition: background-color .1s; - // ICONS -$swal2-icon-size: 5em; -$swal2-icon-animations: true; $swal2-icon-margin: 1.25em auto 1.875em; -$swal2-icon-zoom: null; -$swal2-success: #a5dc86; -$swal2-success-border: rgba($swal2-success, .3); -$swal2-error: #f27474; -$swal2-warning: #f8bb86; -$swal2-info: #3fc3ee; -$swal2-question: #87adbd; -$swal2-icon-font-family: inherit; // IMAGE $swal2-image-margin: 1.25em auto; @@ -46,143 +18,53 @@ $swal2-image-margin: 1.25em auto; // TITLE $swal2-title-margin: 0 0 .4em; $swal2-title-color: $interactive-hover; -$swal2-title-font-size: 1.875em; -// CONTENT -$swal2-content-justify-content: center; -$swal2-content-margin: 0; -$swal2-content-pading: 0; -$swal2-content-color: $interactive-hover; -$swal2-content-font-size: 1.125em; -$swal2-content-font-weight: normal; -$swal2-content-line-height: normal; -$swal2-content-text-align: center; -$swal2-content-word-wrap: break-word; +// HTML CONTAINER +$swal2-html-container-margin: 0; +$swal2-html-container-color: $interactive-hover; // INPUT $swal2-input-margin: 1em auto; $swal2-input-width: 100%; -$swal2-input-height: 2.625em; -$swal2-input-padding: 0 .75em; -$swal2-input-border: 1px solid lighten($swal2-black, 85); -$swal2-input-border-radius: .1875em; $swal2-input-box-shadow: inset 0 1px 1px rgba($swal2-black, .06); -$swal2-input-focus-border: 1px solid #b4dbed; -$swal2-input-focus-outline: none; $swal2-input-focus-box-shadow: 0 0 3px #c4e6f5; -$swal2-input-font-size: 1.125em; -$swal2-input-background: inherit; -$swal2-input-color: inherit; -$swal2-input-transition: border-color .3s, box-shadow .3s; - -// TEXTAREA SPECIFIC VARIABLES -$swal2-textarea-height: 6.75em; -$swal2-textarea-padding: .75em; - -// VALIDATION MESSAGE -$swal2-validation-message-justify-content: center; -$swal2-validation-message-padding: .625em; -$swal2-validation-message-background: lighten($swal2-black, 94); -$swal2-validation-message-color: lighten($swal2-black, 40); -$swal2-validation-message-font-size: 1em; -$swal2-validation-message-font-weight: 300; -$swal2-validation-message-icon-background: $swal2-error; -$swal2-validation-message-icon-color: $swal2-white; -$swal2-validation-message-icon-zoom: null; // PROGRESS STEPS $swal2-progress-steps-background: inherit; $swal2-progress-steps-margin: 0 0 1.25em; -$swal2-progress-steps-padding: 0; -$swal2-progress-steps-font-weight: 600; -$swal2-progress-steps-distance: 2.5em; -$swal2-progress-step-width: 2em; -$swal2-progress-step-height: 2em; -$swal2-progress-step-border-radius: 2em; -$swal2-progress-step-background: #add8e6; -$swal2-progress-step-color: $swal2-white; $swal2-active-step-background: #3085d6; -$swal2-active-step-color: $swal2-white; // FOOTER $swal2-footer-margin: 1.25em 0 0; $swal2-footer-padding: 1em 0 0; -$swal2-footer-border-color: #eee; $swal2-footer-color: lighten($swal2-black, 33); -$swal2-footer-font-size: 1em; - -// TIMER POGRESS BAR -$swal2-timer-progress-bar-height: .25em; -$swal2-timer-progress-bar-background: rgba($swal2-black, .2); // CLOSE BUTTON -$swal2-close-button-width: 1.2em; -$swal2-close-button-height: 1.2em; -$swal2-close-button-line-height: 1.2; -$swal2-close-button-position: absolute; -$swal2-close-button-gap: 0; $swal2-close-button-transition: color .1s ease-out; -$swal2-close-button-border: none; $swal2-close-button-border-radius: 0; $swal2-close-button-outline: initial; -$swal2-close-button-background: transparent; $swal2-close-button-color: lighten($swal2-black, 80); -$swal2-close-button-font-family: serif; -$swal2-close-button-font-size: 2.5em; - -// CLOSE BUTTON:HOVER -$swal2-close-button-hover-transform: none; -$swal2-close-button-hover-color: $swal2-error; -$swal2-close-button-hover-background: transparent; // ACTIONS -$swal2-actions-flex-wrap: wrap; -$swal2-actions-align-items: center; -$swal2-actions-justify-content: center; $swal2-actions-width: 100%; -$swal2-actions-margin: 1.25em auto 0; - -// CONFIRM BUTTON -$swal2-confirm-button-border: 0; -$swal2-confirm-button-border-radius: .25em; -$swal2-confirm-button-background-color: $background-tertiary; -$swal2-confirm-button-color: $swal2-white; -$swal2-confirm-button-font-size: 1.0625em; - -// CANCEL BUTTON -$swal2-cancel-button-border: 0; -$swal2-cancel-button-border-radius: .25em; -$swal2-cancel-button-background-color: $background-floating; -$swal2-cancel-button-color: $swal2-white; -$swal2-cancel-button-font-size: 1.0625em; // COMMON VARIABLES FOR CONFIRM AND CANCEL BUTTONS -$swal2-button-darken-hover: rgba($swal2-black, .1); -$swal2-button-darken-active: rgba($swal2-black, .2); -$swal2-button-focus-outline: none; -$swal2-button-focus-background-color: null; $swal2-button-focus-box-shadow: 0 0 0 1px $swal2-background, 0 0 0 3px $swal2-outline-color; +// CONFIRM BUTTON +$swal2-confirm-button-background-color: $background-tertiary; +$swal2-confirm-button-font-size: 1.0625em; +$swal2-confirm-button-focus-box-shadow: 0 0 0 3px rgba($swal2-confirm-button-background-color, .5); + +// CANCEL BUTTON +$swal2-cancel-button-background-color: $background-floating; +$swal2-cancel-button-font-size: 1.0625em; +$swal2-cancel-button-focus-box-shadow: 0 0 0 3px rgba($swal2-cancel-button-background-color, .5); + // TOASTS -$swal2-toast-show-animation: swal2-toast-show .5s; -$swal2-toast-hide-animation: swal2-toast-hide .1s forwards; -$swal2-toast-border: none; $swal2-toast-box-shadow: 0 0 .625em #d9d9d9; -$swal2-toast-background: $swal2-white; -$swal2-toast-close-button-width: .8em; -$swal2-toast-close-button-height: .8em; -$swal2-toast-close-button-line-height: .8; $swal2-toast-width: auto; $swal2-toast-padding: .625em; $swal2-toast-title-margin: 0 .6em; -$swal2-toast-title-font-size: 1em; -$swal2-toast-content-font-size: 1em; -$swal2-toast-input-font-size: 1em; -$swal2-toast-validation-font-size: 1em; -$swal2-toast-buttons-font-size: 1em; -$swal2-toast-button-focus-box-shadow: 0 0 0 1px $swal2-background, 0 0 0 3px $swal2-outline-color; -$swal2-toast-footer-margin: .5em 0 0; -$swal2-toast-footer-padding: .5em 0 0; -$swal2-toast-footer-font-size: .8em; @import "~sweetalert2/src/sweetalert2.scss"; diff --git a/client/src/components/RoomLink.vue b/client/src/components/RoomLink.vue index 493a4df..f86b4f8 100644 --- a/client/src/components/RoomLink.vue +++ b/client/src/components/RoomLink.vue @@ -65,7 +65,7 @@ export default class RoomLink extends Vue { togglePass() { this.showPass = !this.showPass if (this.showPass) { - setTimeout(() => { + window.setTimeout(() => { this.selectAll() }, 0) } @@ -81,13 +81,13 @@ export default class RoomLink extends Vue { copyToClipboard() { if (this.copiedTimeout) { - clearInterval(this.copiedTimeout) + window.clearInterval(this.copiedTimeout) } navigator.clipboard.writeText(this.url) this.copied = true - this.copiedTimeout = setTimeout(() => { + this.copiedTimeout = window.setTimeout(() => { this.copied = false this.copiedTimeout = 0 }, 3000) diff --git a/client/src/components/RoomsList.vue b/client/src/components/RoomsList.vue index 9b4c841..32b241f 100644 --- a/client/src/components/RoomsList.vue +++ b/client/src/components/RoomsList.vue @@ -83,7 +83,7 @@ import RoomActionBtn from '@/components/RoomActionBtn.vue' } }) export default class RoomsList extends Vue { - @Prop(Boolean) readonly loading: boolean = false + @Prop(Boolean) readonly loading!: boolean public dialog = false public roomId = '' diff --git a/client/src/main.ts b/client/src/main.ts index 4d8de22..acfdb0a 100644 --- a/client/src/main.ts +++ b/client/src/main.ts @@ -1,7 +1,7 @@ import Vue from 'vue' import App from './App.vue' import './plugins/filters.ts' -import './plugins/sweetalert.ts' +import sweetalert from './plugins/sweetalert' import router from './router' import store from './store' import vuetify from './plugins/vuetify' @@ -10,6 +10,8 @@ import '@/assets/styles/main.scss'; Vue.config.productionTip = false +Vue.use(sweetalert) + new Vue({ router, store, diff --git a/client/src/plugins/sweetalert.ts b/client/src/plugins/sweetalert.ts index 4b1adcf..d9ed305 100644 --- a/client/src/plugins/sweetalert.ts +++ b/client/src/plugins/sweetalert.ts @@ -1,4 +1,60 @@ -import Vue from 'vue' -import VueSweetalert2 from 'vue-sweetalert2'; +/* eslint-disable */ -Vue.use(VueSweetalert2); +import Vue from 'vue' + +import { SweetAlertOptions } from 'sweetalert2' +import Swal from 'sweetalert2/dist/sweetalert2.js' + +type VueSwalInstance = typeof Swal.fire + +declare module 'vue/types/vue' { + interface Vue { + $swal: VueSwalInstance + } + + interface VueConstructor { + swal: VueSwalInstance + } +} + +interface VueSweetalert2Options extends SweetAlertOptions { + // includeCss?: boolean; +} + +class VueSweetalert2 { + static install(vue: Vue | any, options?: VueSweetalert2Options): void { + const swalFunction = (...args: [SweetAlertOptions]) => { + if (options) { + const mixed = Swal.mixin(options) + + return mixed.fire(...args) + } + + return Swal.fire(...args) + } + + let methodName: string | number | symbol + + for (methodName in Swal) { + // @ts-ignore + if (Object.prototype.hasOwnProperty.call(Swal, methodName) && typeof Swal[methodName] === 'function') { + // @ts-ignore + swalFunction[methodName] = ((method) => { + return (...args: any[]) => { + // @ts-ignore + return Swal[method](...args) + } + })(methodName) + } + } + + vue['swal'] = swalFunction + + // add the instance method + if (!vue.prototype.hasOwnProperty('$swal')) { + vue.prototype.$swal = swalFunction + } + } +} + +export default VueSweetalert2 diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue index a614fba..be9afeb 100644 --- a/client/src/views/Home.vue +++ b/client/src/views/Home.vue @@ -128,11 +128,11 @@ export default class Home extends Vue { @Watch('autoRefresh', { immediate: true }) onAutoRefresh() { if (this.interval) { - clearInterval(this.interval) + window.clearInterval(this.interval) } if (this.autoRefresh) { - this.interval = setInterval(this.LoadRooms, this.autoRefresh * 1000) + this.interval = window.setInterval(this.LoadRooms, this.autoRefresh * 1000) } } diff --git a/client/tsconfig.json b/client/tsconfig.json index 9c82225..5b81eae 100644 --- a/client/tsconfig.json +++ b/client/tsconfig.json @@ -15,7 +15,7 @@ "sourceMap": true, "baseUrl": ".", "types": [ - "vue-sweetalert2", + "node", "webpack-env" ], "paths": { diff --git a/internal/proxy/lobby.go b/internal/proxy/lobby.go index 23c294f..f21c136 100644 --- a/internal/proxy/lobby.go +++ b/internal/proxy/lobby.go @@ -31,9 +31,9 @@ func roomWait(w http.ResponseWriter, r *http.Request) { } // wait for 10 sec - await new Promise(res => setTimeout(res, 2500)) + await new Promise(res => window.setTimeout(res, 2500)) document.querySelector(".swal2-loader").style.visibility = 'hidden' - await new Promise(res => setTimeout(res, 7500)) + await new Promise(res => window.setTimeout(res, 7500)) } } }()) diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..068ddcd --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "./client/tsconfig.json" +} \ No newline at end of file