Selector/Selector.Web/scripts/past.ts

89 lines
2.4 KiB
TypeScript
Raw Normal View History

2022-10-10 11:44:47 +01:00
import * as signalR from "@microsoft/signalr";
// import { stringifyStyle } from "@vue/shared";
import * as Vue from "vue";
import { RankResult, RankEntry, PastParams } from "./HubInterfaces";
import { RankCard } from "./Past/RankCard";
2022-10-10 22:29:47 +01:00
import { CountCard } from "./Past/CountCard";
import { PlayCountChartCard } from "./Now/PlayCountGraph";
import { LastFmLogoLink } from "./Now/LastFm";
2022-11-19 11:47:23 +00:00
import { BarChartCard } from "./Past/BarGraphCard";
2022-10-10 11:44:47 +01:00
const connection = new signalR.HubConnectionBuilder()
.withUrl("/pasthub")
2022-11-19 11:47:23 +00:00
.withAutomaticReconnect()
2022-10-10 11:44:47 +01:00
.build();
connection.start()
.then(val => {
connection.invoke("OnConnected");
})
.catch(err => console.error(err));
const app = Vue.createApp({
data() {
return {
track: "",
album: "",
artist: "",
from: null,
to: null,
trackEntries: [],
albumEntries: [],
artistEntries: [],
2022-10-10 22:29:47 +01:00
resampledSeries: [],
totalCount: 0
2022-10-10 11:44:47 +01:00
}
},
created() {
connection.on("OnRankResult", (result: RankResult) =>
{
console.log(result);
this.trackEntries = result.trackEntries;
this.albumEntries = result.albumEntries;
this.artistEntries = result.artistEntries;
2022-10-10 22:29:47 +01:00
this.resampledSeries = result.resampledSeries;
this.totalCount = result.totalCount;
2022-10-10 11:44:47 +01:00
});
},
methods: {
submit() {
2022-10-10 22:29:47 +01:00
let context = {
2022-10-10 11:44:47 +01:00
track: this.track,
album: this.album,
artist: this.artist,
from: this.from,
to: this.to,
2022-10-10 22:29:47 +01:00
} as PastParams;
console.log(context);
2022-11-19 11:47:23 +00:00
this.trackEntries = [];
this.albumEntries = [];
this.artistEntries = [];
this.resampledSeries = [];
2022-10-10 22:29:47 +01:00
connection.invoke("OnSubmitted", context);
2022-10-10 11:44:47 +01:00
}
2022-11-19 11:47:23 +00:00
},
computed: {
mutatedAlbums() {
return this.albumEntries.map((e: RankEntry) => {
e.name = e.name.split(' // ')[0];
return e;
});
}
},
2022-10-10 11:44:47 +01:00
});
2022-10-10 22:29:47 +01:00
app.component("play-count-chart-card", PlayCountChartCard);
2022-11-19 11:47:23 +00:00
app.component("album-chart-card", BarChartCard);
2022-10-10 11:44:47 +01:00
app.component("rank-card", RankCard);
2022-10-10 22:29:47 +01:00
app.component("lastfm-logo", LastFmLogoLink);
app.component("count-card", CountCard);
2022-10-10 11:44:47 +01:00
const vm = app.mount('#pastapp');