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

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

Browse Source
This commit is contained in:
vikingowl
2022-03-22 10:11:27 +01:00
parent d479573f41
commit d0d17ccd3d
1 changed files with 70 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
src/components/NavComponent.vue
View File

@@ -65,120 +65,90 @@
</nav>
</template>
<script>
<script setup lang="ts">
import { reactive } from "vue";
import { useStore } from "vuex";
import { closeNav, GetUser, GoToPlayer } from "/src/utils";
import { closeNav, closeNavEventListener, GetUser, GoToPlayer } from "@/utils";
import {
CUSTOM_URL_PATTERN,
ID64_PATTERN,
PROFILE_URL_PATTERN,
VANITY_PATTERN,
} from "@/constants";
import { StatusCodes as STATUS } from "http-status-codes";
import { useSearchParamsStore } from "@/stores/searchParams";
import type { infoState } from "@/stores/infoState";
import { useInfoStateStore } from "@/stores/infoState";
import { usePlayerDetailsStore } from "@/stores/playerDetails";
export default {
name: "NavComponent",
setup() {
const store = useStore();
const data = reactive({
searchInput: "",
});
const searchParamsStore = useSearchParamsStore();
const infoStateStore = useInfoStateStore();
const playerDetailsStore = usePlayerDetailsStore();
const parseSearch = async () => {
const input = data.searchInput;
const customUrlPattern = "https://steamcommunity.com/id/";
const profileUrlPattern = "https://steamcommunity.com/profiles/";
const id64Pattern = /^\d{17}$/;
const vanityPattern = /^[A-Za-z0-9-_]{3,32}$/;
const data = reactive({
searchInput: "",
});
store.commit({
type: "changeVanityUrl",
id: "",
});
store.commit({
type: "changeId64",
id: "",
});
const parseSearch = async () => {
const input = data.searchInput;
if (data.searchInput !== "") {
if (id64Pattern.test(input)) {
store.commit({
type: "changeId64",
id: input,
});
} else if (input.match(customUrlPattern)) {
store.commit({
type: "changeVanityUrl",
id: input.split("/")[4].split("?")[0],
});
} else if (input.match(profileUrlPattern)) {
const tmp = input.split("/")[4].split("?")[0];
if (id64Pattern.test(tmp)) {
store.commit({
type: "changeId64",
id: tmp,
});
}
} else {
store.commit({
type: "changeVanityUrl",
id: input,
});
}
searchParamsStore.vanity_url = "";
searchParamsStore.id64 = "";
if (
store.state.vanityUrl &&
!vanityPattern.test(store.state.vanityUrl)
) {
store.commit({
type: "changeInfoState",
data: {
statuscode: STATUS.NOT_ACCEPTABLE,
message:
'Only alphanumeric symbols, "_", and "-", between 3-32 characters',
type: "warning",
},
});
store.commit({
type: "changeVanityUrl",
id: "",
});
data.searchInput = "";
}
if (data.searchInput !== "") {
if (ID64_PATTERN.test(input)) {
searchParamsStore.id64 = input;
} else if (input.match(CUSTOM_URL_PATTERN)) {
searchParamsStore.vanity_url = input.split("/")[4].split("?")[0];
} else if (input.match(PROFILE_URL_PATTERN)) {
const tmp = input.split("/")[4].split("?")[0];
if (ID64_PATTERN.test(tmp)) {
searchParamsStore.id64 = tmp;
}
} else {
searchParamsStore.vanity_url = input;
}
if (store.state.id64 !== "" || store.state.vanityUrl !== "") {
const resData = await GetUser(
store,
store.state.vanityUrl || store.state.id64
);
if (
searchParamsStore.vanity_url !== "" &&
!VANITY_PATTERN.test(searchParamsStore.vanity_url)
) {
const info: infoState = {
statuscode: STATUS.NOT_ACCEPTABLE,
message:
'Only alphanumeric symbols, "_", and "-", between 3-32 characters',
type: "warning",
};
infoStateStore.addInfo(info);
searchParamsStore.vanity_url = "";
data.searchInput = "";
}
if (resData !== null) {
data.searchInput = "";
document.activeElement.blur();
if (searchParamsStore.id64 !== "" || searchParamsStore.vanity_url !== "") {
const resData = await GetUser(
playerDetailsStore,
searchParamsStore.vanity_url || searchParamsStore.id64
);
store.commit({
type: "changePlayerDetails",
data: resData,
});
if (resData !== null) {
data.searchInput = "";
const activeElem = document.activeElement as HTMLInputElement;
activeElem.blur();
if (store.state.vanityUrl) {
closeNav("mainNav");
GoToPlayer(store.state.vanityUrl);
} else if (store.state.id64) {
closeNav("mainNav");
GoToPlayer(store.state.id64);
}
}
playerDetailsStore.playerDetails = resData;
if (searchParamsStore.vanity_url) {
closeNav("mainNav");
GoToPlayer(searchParamsStore.vanity_url);
} else if (searchParamsStore.id64) {
closeNav("mainNav");
GoToPlayer(searchParamsStore.id64);
}
}
};
document.addEventListener("click", (e) => {
if (!e.target.attributes.id) closeNav("mainNav");
});
return {
data,
parseSearch,
closeNav,
};
},
}
}
};
closeNavEventListener("mainNav");
</script>
<style lang="scss" scoped>