mirror of
https://forgejo.merr.is/annika/isl-vue3.git
synced 2025-12-11 10:56:31 -05:00
Sync
This commit is contained in:
parent
aafd3c19de
commit
5c0d3c2fd7
3 changed files with 138 additions and 74 deletions
|
|
@ -1,12 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import type { PowerItem } from '@/types/PowerItem'
|
||||
import { getCurrentInstance } from 'vue'
|
||||
import {User} from "oidc-client";
|
||||
import axios from 'axios';
|
||||
|
||||
type EventItemListing = {
|
||||
name: string
|
||||
id: number
|
||||
}
|
||||
|
||||
const firstName = ref('')
|
||||
const loading = ref(false)
|
||||
|
||||
const itemType = ref(0)
|
||||
const itemName = ref('')
|
||||
const iconURL = ref('')
|
||||
|
|
@ -77,82 +82,130 @@ const maxPowerRules = [
|
|||
(v: number) =>
|
||||
v >= minPower.value ? true : 'Maximum power must be greater than or equal to minimum power.'
|
||||
]
|
||||
const listToProps = (item: EventItemListing) => ({ title: item.name })
|
||||
const listToProps = (item: EventItemListing) => ({ title: item.name, value: item.id })
|
||||
const yesNoProps = (item: EventItemListing) => ({ title: item.name, value: item.id === 1 })
|
||||
const submit = () => {
|
||||
loading.value = true
|
||||
try {
|
||||
// Get the user's JWT token
|
||||
getCurrentInstance()!
|
||||
.appContext.config.globalProperties.$zitadel!.oidcAuth.mgr.getUser()
|
||||
.then((oidcUser: User | null) => {
|
||||
if (oidcUser === null) {
|
||||
// TODO: Add some error handling to the page
|
||||
console.log("OIDC user was null")
|
||||
return
|
||||
}
|
||||
const newItem: PowerItem = {
|
||||
itemType: itemType.value,
|
||||
iconURL: iconURL.value,
|
||||
itemName: itemName.value,
|
||||
minItemPower: minPower.value,
|
||||
maxItemPower: maxPower.value,
|
||||
owned: 0,
|
||||
rarity: rarity.value,
|
||||
origin: origin.value,
|
||||
tooltip: tooltip.value,
|
||||
isEventItem: isEventItem.value
|
||||
}
|
||||
const userJWT = oidcUser.access_token
|
||||
axios.post()
|
||||
})
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
const clearForm = () => {
|
||||
itemType.value = 0
|
||||
itemName.value = ''
|
||||
iconURL.value = ''
|
||||
minPower.value = 0
|
||||
maxPower.value = 0
|
||||
rarity.value = 0
|
||||
origin.value = ''
|
||||
tooltip.value = ''
|
||||
isEventItem.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-container>
|
||||
<v-row justify="center">
|
||||
<v-col lg="8" sm="12">
|
||||
<v-card fluid>
|
||||
<v-card :loading="loading" color="deep-purple-darken-4">
|
||||
<v-card-title>Add New Item</v-card-title>
|
||||
<v-card-item>
|
||||
<v-form @submit.prevent>
|
||||
<v-sheet>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-select
|
||||
:items="eventItems"
|
||||
:item-props="listToProps"
|
||||
label="Item Type"
|
||||
></v-select>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-select
|
||||
:items="eventItems"
|
||||
:item-props="listToProps"
|
||||
v-model="itemType"
|
||||
label="Item Type"
|
||||
></v-select>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-text-field
|
||||
v-model="itemName"
|
||||
:rules="textRules"
|
||||
label="Item Name"
|
||||
></v-text-field>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-text-field
|
||||
v-model="iconURL"
|
||||
:rules="textRules"
|
||||
label="Image URL"
|
||||
disabled
|
||||
></v-text-field>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col class="pl-0">
|
||||
<v-text-field
|
||||
v-model="itemName"
|
||||
:rules="textRules"
|
||||
label="Item Name"
|
||||
v-model="minPower"
|
||||
:rules="minPowerRules"
|
||||
label="Minimum Power"
|
||||
></v-text-field>
|
||||
</v-row>
|
||||
<v-row>
|
||||
</v-col>
|
||||
<v-col class="pr-0">
|
||||
<v-text-field
|
||||
v-model="iconURL"
|
||||
:rules="textRules"
|
||||
label="Image URL"
|
||||
disabled
|
||||
v-model="maxPower"
|
||||
:rules="maxPowerRules"
|
||||
label="Maximum Power"
|
||||
></v-text-field>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col class="pl-0">
|
||||
<v-text-field
|
||||
v-model="minPower"
|
||||
:rules="minPowerRules"
|
||||
label="Minimum Power"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col class="pr-0">
|
||||
<v-text-field
|
||||
v-model="maxPower"
|
||||
:rules="maxPowerRules"
|
||||
label="Maximum Power"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-select :items="rarities" :item-props="listToProps" label="Rarity"></v-select>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-text-field v-model="origin" :rules="textRules" label="Origin"></v-text-field>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-text-field
|
||||
v-model="tooltip"
|
||||
:rules="textRules"
|
||||
label="Tooltip"
|
||||
></v-text-field>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-select
|
||||
:items="yesNo"
|
||||
:item-props="listToProps"
|
||||
label="Is From An Event?"
|
||||
></v-select>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-sheet>
|
||||
<v-btn type="submit" block>Submit</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-select
|
||||
v-model="rarity"
|
||||
:items="rarities"
|
||||
:item-props="listToProps"
|
||||
label="Rarity"
|
||||
></v-select>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-text-field v-model="origin" :rules="textRules" label="Origin"></v-text-field>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-text-field v-model="tooltip" :rules="textRules" label="Tooltip"></v-text-field>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-select
|
||||
v-model="isEventItem"
|
||||
:items="yesNo"
|
||||
:item-props="yesNoProps"
|
||||
label="Is From An Event?"
|
||||
></v-select>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-form>
|
||||
</v-card-item>
|
||||
<v-card-actions>
|
||||
<v-btn @click="submit">Submit</v-btn>
|
||||
<v-btn @click="clearForm">Clear</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
|
|
|||
|
|
@ -4,19 +4,19 @@ import { defineStore } from 'pinia'
|
|||
import { computed, ref, toRaw } from 'vue'
|
||||
import axiosRetry from 'axios-retry'
|
||||
import { getCurrentInstance } from 'vue'
|
||||
import { apiBaseURL as apiBaseURLKey } from '@/types/ConfigSymbols'
|
||||
import { apiBaseURL, apiBaseURL as apiBaseURLKey } from '@/types/ConfigSymbols'
|
||||
import { inject } from 'vue'
|
||||
|
||||
const BLESSING = 1
|
||||
const INTIMACY = 2
|
||||
const FELLOW = 3
|
||||
|
||||
const noCacheConfig:AxiosRequestConfig = {
|
||||
responseType: "json",
|
||||
const noCacheConfig: AxiosRequestConfig = {
|
||||
responseType: 'json',
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache',
|
||||
'Pragma': 'no-cache',
|
||||
'Expires': '0',
|
||||
Pragma: 'no-cache',
|
||||
Expires: '0'
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -28,17 +28,14 @@ export const usePowerItems = defineStore('powerItems', () => {
|
|||
const fellowPowerItems = ref(new Map<string, PowerItem>())
|
||||
const intimacyPowerItems = ref(new Map<string, PowerItem>())
|
||||
const isLoadComplete = ref(false)
|
||||
const auth = getCurrentInstance()?.appContext.config.globalProperties.$zitadel
|
||||
auth?.oidcAuth.mgr.getUser().then(res => console.log(res?.id_token))
|
||||
console.log(auth?.oidcAuth.accessToken)
|
||||
const apiBaseURL = inject(apiBaseURLKey)!
|
||||
|
||||
axiosRetry(axios, {
|
||||
retries: 3,
|
||||
retryDelay: axiosRetry.exponentialDelay,
|
||||
})
|
||||
retryDelay: axiosRetry.exponentialDelay
|
||||
})
|
||||
|
||||
async function fetchPowerItems() {
|
||||
const apiBaseURL = inject(apiBaseURLKey)
|
||||
axios
|
||||
.get(apiBaseURL + '/powerItems/byType/' + BLESSING + '/asMap', noCacheConfig)
|
||||
.then((resp) => {
|
||||
|
|
@ -131,6 +128,19 @@ export const usePowerItems = defineStore('powerItems', () => {
|
|||
}, {})
|
||||
}
|
||||
|
||||
function addPowerItem(newItem: PowerItem): Promise<PowerItem | null> {
|
||||
const resultPromise: Promise<PowerItem | null> = new Promise((resolve, reject) => {
|
||||
axios
|
||||
.post(apiBaseURL + '/powerItems/', newItem, noCacheConfig)
|
||||
.then((resp) => {
|
||||
resolve(resp.data)
|
||||
})
|
||||
.catch((rejected) => reject(rejected))
|
||||
})
|
||||
|
||||
return resultPromise
|
||||
}
|
||||
|
||||
const totalBlessingPower = computed(() =>
|
||||
[...blessingPowerItems.value.values()].reduce(
|
||||
(accumulator: number, currentValue: PowerItem) => {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
export type PowerItem = {
|
||||
itemType: number
|
||||
iconURL: string
|
||||
itemName: string
|
||||
minItemPower: number
|
||||
|
|
@ -7,5 +8,5 @@ export type PowerItem = {
|
|||
rarity: number
|
||||
origin: string
|
||||
tooltip: string
|
||||
isEventItem: string
|
||||
isEventItem: boolean
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue