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

updated HomeView.vue to use <script setup lang="ts">

Browse Source
This commit is contained in:
vikingowl
2022-03-24 11:12:01 +01:00
parent a45215dce1
commit 8ed371d5fb
1 changed files with 47 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/views/HomeView.vue
View File

@@ -10,14 +10,14 @@
> >
<div <div
v-for="(player, id) in recentVisited" v-for="(player, id) in recentVisited"
:key="player.steamid64" :key="player.steamId64"
class="player-card" class="player-card"
tabindex="0" tabindex="0"
@keyup.enter="GoToPlayer(player.vanity_url || player.steamid64)" @keyup.enter="GoToPlayer(player.vanityUrl || player.steamId64)"
> >
<div <div
class="p-2" class="p-2"
@click="GoToPlayer(player.vanity_url || player.steamid64)" @click="GoToPlayer(player.vanityUrl || player.steamId64)"
> >
<div class="col-md-4 m-auto"> <div class="col-md-4 m-auto">
<img :alt="player.name" :src="player.avatar" /> <img :alt="player.name" :src="player.avatar" />
@@ -103,63 +103,60 @@
</div> </div>
</template> </template>
<script> <script setup lang="ts">
import { import {
GoToPlayer, GoToPlayer,
SaveLastVisitedToLocalStorage, SaveLastVisitedToLocalStorage,
setAppDivBackground,
setBgImgDisplay,
setTitle, setTitle,
} from "/src/utils"; } from "@/utils";
import { onBeforeMount, ref } from "vue"; import { onBeforeMount, ref } from "vue";
import { useStore } from "vuex"; import { usePlayerDetailsStore } from "@/stores/playerDetails";
export default { setTitle("Home");
name: "HomeView",
setup() {
setTitle("Home");
const store = useStore();
const recentVisited = ref([]); const playerDetailsStore = usePlayerDetailsStore();
const recentVisited = ref([]);
const loadRecentVisited = () => { const loadRecentVisited = () => {
recentVisited.value = JSON.parse(localStorage.getItem("recent-visited")); const localString = localStorage.getItem("recent-visited");
if (typeof localString === "string")
recentVisited.value = JSON.parse(localString);
if (recentVisited.value !== null) { if (recentVisited.value !== []) {
if (window.innerWidth < 768) { if (window.innerWidth < 768) {
recentVisited.value = recentVisited.value.filter( recentVisited.value = recentVisited.value.filter(
(i) => recentVisited.value.indexOf(i) < 6 (i) => recentVisited.value.indexOf(i) < 6
); );
} }
} }
};
const removeRecentVisited = (key) => {
if (recentVisited.value !== null) {
recentVisited.value.splice(key, 1);
recentVisited.value.reverse();
localStorage.clear();
if (recentVisited.value !== []) {
recentVisited.value.map((p) => {
SaveLastVisitedToLocalStorage(p);
});
}
}
loadRecentVisited();
};
onBeforeMount(() => {
loadRecentVisited();
store.commit("resetPlayerDetails");
document.getElementById("app").style.background = "none";
document.querySelector(".bg-img").style.display = "none";
});
return { recentVisited, GoToPlayer, removeRecentVisited };
},
}; };
const removeRecentVisited = (key: number) => {
if (recentVisited.value !== []) {
recentVisited.value.splice(key, 1);
recentVisited.value.reverse();
localStorage.clear();
if (recentVisited.value !== []) {
recentVisited.value.map((p) => {
SaveLastVisitedToLocalStorage(p);
});
}
}
loadRecentVisited();
};
onBeforeMount(() => {
loadRecentVisited();
playerDetailsStore.$reset();
setAppDivBackground("none", HTMLDivElement);
setBgImgDisplay("none", HTMLImageElement);
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>