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

updated ExploreView.vue to use new <script setup lang="ts"> syntax

Browse Source
This commit is contained in:
vikingowl
2022-03-22 10:11:12 +01:00
parent 012b56f184
commit d479573f41
1 changed files with 64 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/views/ExploreView.vue
View File

@@ -29,47 +29,44 @@
</div> </div>
</template> </template>
<script> <script setup lang="ts">
import { onBeforeUnmount, onMounted, reactive } from "vue"; import { onBeforeUnmount, onMounted, reactive } from "vue";
import { import { GetMatches, LoadMoreMatchesExplore } from "@/utils/ApiRequests";
GetMatches, import { LoadImage } from "@/utils/Display";
LoadImage, import { MatchNotParsedTime } from "@/utils/DateTime";
LoadMoreMatchesExplore, import { scrollToPos } from "@/utils/Utils";
MatchNotParsedTime,
scrollToPos,
} from "/src/utils";
import { useStore } from "vuex"; import { useStore } from "vuex";
import router from "/src/router"; import router from "@/router";
import MatchesTable from "/src/components/MatchesTable"; import MatchesTable from "@/components/MatchesTable.vue";
import type { Match } from "@/api";
import { useScrollStateStore } from "@/stores/scrollState";
import { useMatchDetailsStore } from "@/stores/matchDetails";
export default { document.title = "Matches | csgoWTF";
name: "ExploreView",
components: { MatchesTable },
setup() {
document.title = "Matches | csgoWTF";
const store = useStore(); const store = useStore();
const scrollStateStore = useScrollStateStore();
const matchDetailsStore = useMatchDetailsStore();
const data = reactive({ const data = reactive({
matches: [], matches: ([] as Match[]) || null,
}); });
const setMoreMatches = async () => { const setMoreMatches = async () => {
const res = await LoadMoreMatchesExplore( const res = await LoadMoreMatchesExplore(
store, matchDetailsStore,
data.matches[data.matches.length - 1].date data.matches[data.matches.length - 1].date
); );
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);
};
// console.log(data.matches) onMounted(async () => {
}; const res = await GetMatches(matchDetailsStore);
if (res !== null) data.matches = res;
onMounted(async () => {
data.matches = await GetMatches(store);
if (data.matches !== null) { if (data.matches !== null) {
if (data.matches[0].map) { if (data.matches[0].map) {
@@ -84,33 +81,28 @@ export default {
await LoadImage("random"); await LoadImage("random");
} }
} else { } else {
document.querySelector(".bg-img").style.display = "none"; const bgImg = document.querySelector(".bg-img") as HTMLImageElement;
bgImg.style.display = "none";
} }
scrollToPos(store.state.scroll_state); scrollToPos(scrollStateStore.scrollState);
// if (data.matches) { const appDiv = document.getElementById("app") as HTMLDivElement;
// console.log(data.matches) appDiv.style.background = "rgba(0, 0, 0, .7)";
// } const bgImg = document.querySelector(".bg-img") as HTMLImageElement;
bgImg.style.display = "initial";
});
document.getElementById("app").style.background = "rgba(0, 0, 0, .7)"; onBeforeUnmount(() => {
document.querySelector(".bg-img").style.display = "initial"; scrollStateStore.scrollState = window.scrollY;
});
onBeforeUnmount(() => {
store.commit("changeScrollState", window.scrollY);
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
if (!to.fullPath.match("/match/") && !from.fullPath.match("/match/")) { if (!to.fullPath.match("/match/") && !from.fullPath.match("/match/")) {
store.commit("changeScrollState", 0); scrollStateStore.scrollState = 0;
} }
next(); next();
}); });
}); });
return { data, setMoreMatches, store, scrollToPos };
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>