diff --git a/src/components/Nav.vue b/src/components/Nav.vue index 301bb3e..0bda491 100644 --- a/src/components/Nav.vue +++ b/src/components/Nav.vue @@ -113,9 +113,9 @@ export default { } if (store.state.id64 !== '' || store.state.vanityUrl !== '') { - const [res, resData] = await GetUser(store.state.vanityUrl || store.state.id64) + const resData = await GetUser(store.state.vanityUrl || store.state.id64) - if (res === 200) { + if (resData) { data.searchInput = '' document.activeElement.blur() @@ -131,17 +131,6 @@ export default { closeNav('mainNav') GoToPlayer(store.state.id64) } - - } else if (res === 404) { - data.searchInput = '' - data.error = `${resData} - Try again` - // TODO: needs 404 - } else if (res === 502) { - data.searchInput = '' - data.error = 'Server not available' - } else { - console.log(res, resData) - // TODO: needs 404 } } diff --git a/src/router/index.js b/src/router/index.js index d5773e6..2664a79 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -8,6 +8,10 @@ function lazyLoadComponent(view) { return () => import(`@/components/${view}.vue`) } +function lazyLoadErrorPages(view) { + return () => import(`@/views/errorPages/${view}.vue`) +} + const routes = [ { path: '/', @@ -75,13 +79,27 @@ const routes = [ score: lazyLoadComponent('DamageSite') } } - ], - scrollBehavior(to, from, savedPosition) { - if (savedPosition) { - return savedPosition - } else { - return {x: 0, y: 0} - } + ] + }, + { + path: '/404', + name: '404', + components: { + main: lazyLoadErrorPages('404') + } + }, + { + path: '/500', + name: '500', + components: { + main: lazyLoadErrorPages('500') + } + }, + { + path: '/502', + name: '502', + components: { + main: lazyLoadErrorPages('502') } }, { @@ -92,7 +110,14 @@ const routes = [ const router = createRouter({ history: createWebHistory(process.env.BASE_URL), - routes + routes, + scrollBehavior(to, from, savedPosition) { + if (savedPosition) { + return savedPosition + } else { + return {x: 0, y: 0} + } + } }) export default router diff --git a/src/utils/ApiRequests.js b/src/utils/ApiRequests.js index 5966aaf..3c6d408 100644 --- a/src/utils/ApiRequests.js +++ b/src/utils/ApiRequests.js @@ -1,4 +1,5 @@ import axios from "axios"; +import {errorHandling} from "@/utils/Utils"; const API_URL = process.env.VUE_APP_API_URL @@ -9,8 +10,7 @@ export const GetMatches = async () => { if (res.status === 200) return res.data } catch (err) { - // TODO: Error handling - // console.log(err.response.status, err.response.statusText) + errorHandling(err.response.status) } } @@ -19,10 +19,9 @@ export const GetUser = async (id) => { const res = await axios.get(`${API_URL}/player/${id}`) if (res.status === 200) - return [res.status, res.data] + return res.data } catch (err) { - if (err.response) - return [err.response.status, err.response.statusText] + errorHandling(err.response.status) } } @@ -59,7 +58,7 @@ export const TrackMe = async (id64, authcode, sharecode = '') => { statusError = 'Userinput was wrong' status = err.response.status } else { - console.log(`${err.response.status}: ${err.response.statusText}`) + errorHandling(err.response.status) } } @@ -74,7 +73,7 @@ export const GetPlayerValue = async (match_id) => { return res.data } } catch (err) { - console.log(err.response.status, err.response.statusText) + errorHandling(err.response.status) } } @@ -86,8 +85,7 @@ export const GetMatchDetails = async (match_id) => { return res.data } } catch (err) { - // TODO: 400, 404 - console.log(err.response.status, err.response.statusText) + errorHandling(err.response.status) } } @@ -99,8 +97,7 @@ export const LoadMoreMatches = async (player_id, date) => { return res.data } } catch (err) { - // TODO: 400, 404 - console.log(err.response.status, err.response.statusText) + errorHandling(err.response.status) } } @@ -113,8 +110,7 @@ export const GetPlayerMeta = async (player_id, limit = 4) => { return res.data } } catch (err) { - // TODO: 400, 404 - console.log(err.response.status, err.response.statusText) + errorHandling(err.response.status) } } @@ -125,9 +121,8 @@ export const GetWeaponDmg = async (match_id) => { if (res.status === 200) { return res.data } - } catch (e) { - // TODO: 400, 404 - console.log(e) + } catch (err) { + errorHandling(err.response.status) } } @@ -139,7 +134,6 @@ export const LoadMoreMatchesExplore = async (date) => { return res.data } } catch (err) { - // TODO: 400, 404 - console.log(err.response.status, err.response.statusText) + errorHandling(err.response.status) } } diff --git a/src/utils/GoTo.js b/src/utils/GoTo.js index 6beebdd..81dfd9f 100644 --- a/src/utils/GoTo.js +++ b/src/utils/GoTo.js @@ -1,13 +1,17 @@ import router from "../router"; export const GoToMatch = (id) => { - router.push({name: 'Match', params: {match_id: id}}) + router.push({name: 'Match', params: {match_id: id}}) } export const GoToPlayer = (id) => { - router.push({name: 'Player', params: {id: id}}) + router.push({name: 'Player', params: {id: id}}) +} + +export const GoToError = (code) => { + router.push({name: code}) } export const GoToLink = (link) => { - router.replace(link) + router.replace(link) } diff --git a/src/utils/Utils.js b/src/utils/Utils.js index bd9f4d9..6c016b9 100644 --- a/src/utils/Utils.js +++ b/src/utils/Utils.js @@ -1,3 +1,17 @@ +import {GoToError} from "@/utils/GoTo"; + +export const errorHandling = (code) => { + if (code === 404) { + GoToError('404') + } else if (code === 500) { + GoToError('500') + } else if (code === 502) { + GoToError('502') + } else { + GoToError('404') + } +} + export const setTitle = (title) => { document.title = `${title} | csgoWTF` } diff --git a/src/utils/index.js b/src/utils/index.js index 0c59a0c..d5245a7 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -34,7 +34,8 @@ import { truncate, scrollToPos, StripControlCodes, - ProcessName + ProcessName, + errorHandling } from "./Utils"; export { @@ -72,5 +73,6 @@ export { LoadMoreMatchesExplore, scrollToPos, StripControlCodes, - ProcessName + ProcessName, + errorHandling } diff --git a/src/views/Explore.vue b/src/views/Explore.vue index 9bd784e..87f2559 100644 --- a/src/views/Explore.vue +++ b/src/views/Explore.vue @@ -25,7 +25,6 @@ import router from "@/router"; export default { name: 'Explore', components: {MatchesTable}, - // TODO: Events / Lans etc. + setup() { document.title = "Matches | csgoWTF" diff --git a/src/views/Match.vue b/src/views/Match.vue index b23d374..87134fc 100644 --- a/src/views/Match.vue +++ b/src/views/Match.vue @@ -57,7 +57,7 @@
+ title="Click for more" @click.prevent="handleDownloadMenu">
@@ -128,13 +128,14 @@ import {onBeforeMount, onBeforeUnmount, onMounted, reactive, watch} from "vue"; import { closeNav, CreatePlayersArray, - DisplayRank, + DisplayRank, errorHandling, FixMapName, FormatDuration, FormatFullDate, GetMatchDetails, GoToLink, - LoadImage, ProcessName + LoadImage, + ProcessName } from "../utils"; import {useStore} from "vuex"; import {useRoute} from 'vue-router' @@ -163,36 +164,37 @@ export default { if (matchIdPattern.test(props.match_id)) { const res = await GetMatchDetails(props.match_id) - if (res.map) - document.title = `${FixMapName(res.map)} ► ${res.score[0]} : ${res.score[1]} ◄ ${DateTime.fromSeconds(res.date).toLocaleString(DateTime.DATETIME_SHORT)} | csgoWTF` - else - document.title = `Match-Details | csgoWTF` + if (res) { + if (res.map) + document.title = `${FixMapName(res.map)} ► ${res.score[0]} : ${res.score[1]} ◄ ${DateTime.fromSeconds(res.date).toLocaleString(DateTime.DATETIME_SHORT)} | csgoWTF` + else + document.title = `Match-Details | csgoWTF` - store.commit({ - type: 'changeMatchDetails', - data: res - }) + store.commit({ + type: 'changeMatchDetails', + data: res + }) - data.matchDetails = store.state.matchDetails + data.matchDetails = store.state.matchDetails - data.matchDetails.stats.forEach(p => { - p.player.name = ProcessName(p.player.name) - }) + data.matchDetails.stats.forEach(p => { + p.player.name = ProcessName(p.player.name) + }) - data.stats = data.matchDetails.stats - data.score = data.matchDetails.score + data.stats = data.matchDetails.stats + data.score = data.matchDetails.score - LoadImage(data.matchDetails.map ? data.matchDetails.map : 'random') + LoadImage(data.matchDetails.map ? data.matchDetails.map : 'random') - store.commit({ - type: 'changePlayesArr', - data: CreatePlayersArray(data.stats) - }) + store.commit({ + type: 'changePlayesArr', + data: CreatePlayersArray(data.stats) + }) - console.log(data.matchDetails) + console.log(data.matchDetails) + } } else { - console.log('Match not found') - // TODO: needs 404 + errorHandling(404) } } @@ -202,15 +204,13 @@ export default { if (matchIdPattern.test(props.match_id)) GoToLink(`/match/${props.match_id}/${sub}`) else { - console.log('Match not found') - // TODO: needs 404 + errorHandling(404) } } else if (route.fullPath.split('/')[3] === undefined) { if (matchIdPattern.test(props.match_id)) GoToLink(`/match/${props.match_id}/overview`) else { - console.log('Match not found') - // TODO: needs 404 + errorHandling(404) } } } diff --git a/src/views/Player.vue b/src/views/Player.vue index 112ec23..acfd74a 100644 --- a/src/views/Player.vue +++ b/src/views/Player.vue @@ -149,7 +149,6 @@ import { GetPlayerMeta, GetUser, GetWinLoss, - GoToLink, GoToPlayer, LoadImage, LoadMoreMatches, @@ -246,9 +245,9 @@ export default { const GetPlayer = async (reset = false) => { if (props.id) { - const [res, resData] = await GetUser(props.id) + const resData = await GetUser(props.id) - if (res === 200 && resData) { + if (resData) { if (resData.steamid64 !== store.state.playerDetails.steamid64 || reset) { resData.name = ProcessName(resData.name) @@ -262,13 +261,7 @@ export default { await SetPlayerData() console.log(store.state.playerDetails) - } else { - GoToLink('/') - // TODO: needs 404 } - } else { - GoToLink('/') - // TODO: needs 404 } } diff --git a/src/views/errorPages/404.vue b/src/views/errorPages/404.vue new file mode 100644 index 0000000..1f25199 --- /dev/null +++ b/src/views/errorPages/404.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/src/views/errorPages/500.vue b/src/views/errorPages/500.vue new file mode 100644 index 0000000..48d7e4a --- /dev/null +++ b/src/views/errorPages/500.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/src/views/errorPages/502.vue b/src/views/errorPages/502.vue new file mode 100644 index 0000000..7b5d77f --- /dev/null +++ b/src/views/errorPages/502.vue @@ -0,0 +1,16 @@ + + + + +