1
0
Fork 0
mirror of https://github.com/Findus23/RadioStats.git synced 2024-09-19 16:03:48 +02:00

mostly working vue 3 version

This commit is contained in:
Lukas Winkler 2023-08-19 21:51:44 +02:00
parent b75de418f6
commit 16e7b90d44
Signed by: lukas
GPG key ID: 54DE4D798D244853
8 changed files with 1004 additions and 5202 deletions

6046
web/package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -10,21 +10,21 @@
"preview": "vite preview"
},
"dependencies": {
"axios": "^0.26.0",
"axios": "^1.3.2",
"milligram": "^1.3.0",
"moment": "^2.20.1",
"node-vibrant": "^3.2.1-alpha.1",
"normalize.css": "^8.0.0",
"vue": "^2.5.13",
"vue-head": "^2.0.12",
"vue-router": "^3.0.1",
"vuejs-datepicker": "^1.3.2"
"vue": "^3.2.47",
"vue-head": "^2.2.0",
"vue-router": "^4.1.6",
"vue3-datepicker": "^0.3.4"
},
"devDependencies": {
"vite-plugin-vue2": "^1.9.3",
"sass": "^1.49.9",
"typescript": "^4.5.4",
"vite": "^2.8.0",
"vue-tsc": "^0.29.8"
"@vitejs/plugin-vue": "^4.0.0",
"sass": "^1.58.0",
"typescript": "^4.9.5",
"vite": "^4.1.1",
"vue-tsc": "^1.0.24"
}
}

View file

@ -1,24 +1,5 @@
<template>
<div id="app" class="container">
<div class="iewarning" v-if="isIE">
<p>Achtung: Sie verwenden Internet Explorer, ein Webbrowser, der seit vielen Jahren nicht mehr
weiterentwickelt wird und bei dem regelmäßig schwere Sicherheitslücken gefunden werden!</p>
<p>Erst im September 2019 wurde eine Sicherheitslücke gefunden, die jeder Webseite erlaubt, komplett auf den
PC zuzugreifen.<a
href="https://www.heise.de/security/meldung/Notfallpatch-Attacken-gegen-Internet-Explorer-4537525.html">
(mehr Informationen)
</a>
</p>
<p>
Es wird daher dringend empfohlen auf einen anderen Webbrowser, der aktiv gewartet wird (wie zum Beispiel
<a href="https://www.mozilla.org/de/firefox/new/">Firefox</a>), umzusteigen.
<a href="https://techcommunity.microsoft.com/t5/Windows-IT-Pro-Blog/The-perils-of-using-Internet-Explorer-as-your-default-browser/ba-p/331732"
target="_blank" rel="noopener">
Selbst Microsoft
</a>
empfielt dringend stattdessen ihren neuen Browser "Edge" zu verwenden.
</p>
</div>
<router-view></router-view>
</div>
</template>
@ -29,12 +10,6 @@
export default {
name: 'app',
props: ["language"],
computed: {
isIE() {
let ua = window.navigator.userAgent;
return /MSIE|Trident/.test(ua);
}
}
};
</script>

View file

@ -65,7 +65,6 @@
response.data.forEach(function(time) {
vm.plays.push(moment(time));
});
// document.title = "Radiostats - " + vm.channels[vm.channel].stationname;
})
.catch(function(error) {
@ -77,13 +76,6 @@
song() {
return this.songs[this.$route.params.songId];
},
},
components: {},
watch: {
song: function() {
this.getPlays();
document.title = "Radiostats - " + this.song.song.title + " - " + this.song.song.artist;
},
}
};
</script>

View file

@ -28,7 +28,7 @@
<transition name="expand">
<div id="date" class="customRow" v-if="showDate">
<div>
<datepicker :language="de" v-model="date" :mondayFirst="true" :inline="true"
<datepicker :language="locale" v-model="date" :inline="true"
:highlighted="highlighted"></datepicker>
<div v-if="showMore" v-on:click="getMany" class="getMany">
@ -80,9 +80,7 @@
<td colspan="4" class="detailWrapper">
<router-view :songs="songs"
:color="{backgroundColor:channelData.primary_color,color:channelData.secondary_color}"
:momentDate="momentDate" :dateType="dateType">
<!-- here the ItemModal component will be rendered -->
</router-view>
:momentDate="momentDate" :dateType="dateType"></router-view>
</td>
</tr>
</template>
@ -102,8 +100,8 @@
import axios from "axios";
import moment from "moment";
import "moment/locale/de-at";
import Datepicker from 'vuejs-datepicker';
import {de} from 'vuejs-datepicker/dist/locale';
import Datepicker from 'vue3-datepicker';
import { deAT } from 'date-fns/locale'
import Info from "./Info.vue";
import {icon} from "./utils";
@ -130,7 +128,7 @@ export default {
to: new Date(),
},
showDate: false,
de: de
locale: deAT
};
},
props: ["channel"],
@ -203,7 +201,8 @@ export default {
}
})
.then(response => {
this.$set(this.songs, urlsongID, response.data);
this.songs[urlsongID] = response.data
// this.$set(this.songs, urlsongID, response.data);
});
console.log("Song not in view: " + urlsongID);
@ -291,7 +290,7 @@ export default {
},
watch: {
channel: function () {
document.title = "Radiostats - " + this.channelData.stationname;
// document.title = "Radiostats - " + this.channelData.stationname;
this.getPopular();
},
'$route.name': function (id) {

View file

@ -1,16 +1,20 @@
import Vue from 'vue';
import VueHead from 'vue-head';
import App from './App.vue';
import router from './routes';
import MatomoTracker from './MatomoTracker';
import {createApp} from 'vue';
import {router} from "./routes";
import App from "./App.vue";
Vue.use(VueHead);
let matomo = new MatomoTracker;
matomo.init();
// Vue.use(VueHead);
// let matomo = new MatomoTracker;
// matomo.init();
//
// let app = new Vue({
// el: '#app',
// router,
// render: h => h(App),
// comments: true
// });
let app = new Vue({
el: '#app',
router,
render: h => h(App),
comments: true
});
const app = createApp(App)
app.use(router)
app.mount('#app')

View file

@ -1,12 +1,9 @@
import Vue from 'vue';
import List from './List.vue';
import DetailView from './DetailView.vue';
import Router from 'vue-router';
import {createRouter, createWebHistory} from "vue-router";
Vue.use(Router);
let router = new Router({
mode: 'history',
export const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
@ -18,34 +15,33 @@ let router = new Router({
component: List,
props: true,
children: [
{path: '/:channel/song/:songId', component: DetailView, name: 'DetailView'}
{path: 'song/:songId', component: DetailView, name: 'DetailView'}
]
},
{
path: '*',
path: "/:pathMatch(.*)*",
redirect: '/'
}
]
});
function trackPageView() {
Vue.nextTick(function () {
_paq.push(['setDocumentTitle', document.title]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
});
}
// function trackPageView() {
// Vue.nextTick(function () {
// _paq.push(['setDocumentTitle', document.title]);
// _paq.push(['trackPageView']);
// _paq.push(['enableLinkTracking']);
// });
// }
router.afterEach((to, from) => {
_paq.push(['setCustomUrl', to.fullPath]);
_paq.push(['setGenerationTimeMs', 0]);
if (from.matched.length !== 0 && from.fullPath !== "/") {
_paq.push(['setReferrerUrl', from.fullPath]);
trackPageView();
} else {
setTimeout(trackPageView, 500); // first page load has to finish loading channels before title is set
}
});
export default router;
// router.afterEach((to, from) => {
// _paq.push(['setCustomUrl', to.fullPath]);
// _paq.push(['setGenerationTimeMs', 0]);
// if (from.matched.length !== 0 && from.fullPath !== "/") {
// _paq.push(['setReferrerUrl', from.fullPath]);
// trackPageView();
// } else {
// setTimeout(trackPageView, 500); // first page load has to finish loading channels before title is set
// }
//
//
// });

View file

@ -1,13 +1,13 @@
import {createVuePlugin} from 'vite-plugin-vue2'
import vue from '@vitejs/plugin-vue'
import {defineConfig} from 'vite'
export default defineConfig({
plugins: [
createVuePlugin()
vue()
],
server: {
proxy: {
"/api": "http://localhost:5000"
"/api": "http://127.0.0.1:5000"
}
},
build: {