CSGOWTF/csgowtf
3
2
Fork 1
Code Issues 18 Pull Requests Projects Releases 7 Wiki Activity

updated ExploreView.vue

Browse Source
This commit is contained in:
vikingowl
2022-03-24 11:35:03 +01:00
parent 7daa47bb64
commit 5cb339483a
1 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/views/ExploreView.vue
View File

@@ -11,7 +11,7 @@
<div class="load-more text-center"> <div class="load-more text-center">
<button <button
:key="scrollToPos(store.state.scroll_state)" :key="scrollToPos(scrollStateStore.scrollState)"
class="btn border-2 btn-outline-info" class="btn border-2 btn-outline-info"
@click="setMoreMatches" @click="setMoreMatches"
> >
@@ -31,41 +31,45 @@
<script setup lang="ts"> <script setup lang="ts">
import { onBeforeUnmount, onMounted, reactive } from "vue"; import { onBeforeUnmount, onMounted, reactive } from "vue";
import { GetMatches, LoadMoreMatchesExplore } from "@/utils/ApiRequests"; import {
import { LoadImage } from "@/utils/Display"; scrollToPos,
import { MatchNotParsedTime } from "@/utils/DateTime"; setAppDivBackground,
import { scrollToPos } from "@/utils/Utils"; setBgImgDisplay,
MatchNotParsedTime,
import { useStore } from "vuex"; LoadImage,
GetMatches, LoadMoreMatchesExplore
} from "@/utils";
import router from "@/router"; import router from "@/router";
import MatchesTable from "@/components/MatchesTable.vue"; import MatchesTable from "@/components/MatchesTable.vue";
import type { Match } from "@/api"; import type { Match } from "@/types";
import { useScrollStateStore } from "@/stores/scrollState"; import { useScrollStateStore } from "@/stores/scrollState";
import { useMatchDetailsStore } from "@/stores/matchDetails"; import { useMatchDetailsStore } from "@/stores/matchDetails";
import {useInfoStateStore} from "@/stores/infoState";
document.title = "Matches | csgoWTF"; document.title = "Matches | csgoWTF";
const store = useStore();
const scrollStateStore = useScrollStateStore(); const scrollStateStore = useScrollStateStore();
const matchDetailsStore = useMatchDetailsStore(); const matchDetailsStore = useMatchDetailsStore();
const infoStateStore = useInfoStateStore()
const data = reactive({ const data = reactive({
matches: ([] as Match[]) || null, matches: ([] as Match[]) || null,
}); });
const setMoreMatches = async () => { const setMoreMatches = async () => {
const res = await LoadMoreMatchesExplore( const [res, info] = await LoadMoreMatchesExplore(
matchDetailsStore,
data.matches[data.matches.length - 1].date data.matches[data.matches.length - 1].date
); );
if (info.message !== "") infoStateStore.addInfo(info)
if (res !== null) res.forEach((e) => data.matches.push(e)); if (res !== null) res.forEach((e) => data.matches.push(e));
scrollToPos(window.scrollY); scrollToPos(window.scrollY);
}; };
onMounted(async () => { onMounted(async () => {
const res = await GetMatches(matchDetailsStore); const [res, info] = await GetMatches();
if (info.message !== "") infoStateStore.addInfo(info)
if (res !== null) data.matches = res; if (res !== null) data.matches = res;
if (data.matches !== null) { if (data.matches !== null) {
@@ -81,16 +85,12 @@ onMounted(async () => {
await LoadImage("random"); await LoadImage("random");
} }
} else { } else {
const bgImg = document.querySelector(".bg-img") as HTMLImageElement; setBgImgDisplay("none", HTMLImageElement);
bgImg.style.display = "none";
} }
scrollToPos(scrollStateStore.scrollState); scrollToPos(scrollStateStore.scrollState);
setAppDivBackground("rgba(0, 0, 0, 0.7)", HTMLDivElement);
const appDiv = document.getElementById("app") as HTMLDivElement; setBgImgDisplay("initial", HTMLImageElement);
appDiv.style.background = "rgba(0, 0, 0, .7)";
const bgImg = document.querySelector(".bg-img") as HTMLImageElement;
bgImg.style.display = "initial";
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {