feat(WIP): processing을 vue로 전환
This commit is contained in:
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div v-for="(cityList, distance) in distanceList" :key="distance">
|
||||
{{ distance }}칸 떨어진 도시:
|
||||
<template v-for="(cityID, key) in cityList" :key="key">
|
||||
<template v-if="key !== 0">, </template>
|
||||
<a :style="{ color: colorMap[distance] ?? undefined, textDecoration:'underline' }" @click="$emit('selected', cityID)">{{
|
||||
citiesMap.get(cityID)?.name
|
||||
}}</a>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
distanceList: {
|
||||
type: Object as PropType<Record<number, number[]>>,
|
||||
required: true,
|
||||
},
|
||||
citiesMap: {
|
||||
type: Object as PropType<Map<number, { name: string }>>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ['selected'],
|
||||
data() {
|
||||
return {
|
||||
colorMap: {
|
||||
1: "magenta",
|
||||
2: "orange",
|
||||
3: "yellow",
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<v-multiselect
|
||||
v-model="selectedCity"
|
||||
:allow-empty="false"
|
||||
:options="citiesForFind"
|
||||
:group-select="false"
|
||||
label="searchText"
|
||||
track-by="value"
|
||||
open-direction="bottom"
|
||||
:show-labels="false"
|
||||
selectLabel="선택(엔터)"
|
||||
selectGroupLabel=""
|
||||
selectedLabel="선택됨"
|
||||
deselectLabel="해제(엔터)"
|
||||
deselectGroupLabel=""
|
||||
placeholder="턴 선택"
|
||||
:maxHeight="400"
|
||||
:searchable="searchMode"
|
||||
>
|
||||
<template v-slot:option="props">
|
||||
{{ props.option.title }}
|
||||
<span v-if="props.option.info">({{ props.option.info }})</span>
|
||||
</template>
|
||||
<template v-slot:singleLabel="props">
|
||||
{{ props.option.simpleName }}
|
||||
</template>
|
||||
</v-multiselect>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { filter초성withAlphabet } from "@/util/filter초성withAlphabet";
|
||||
import { defineComponent, PropType } from "vue";
|
||||
|
||||
type SelectedCity = {
|
||||
value: number;
|
||||
searchText: string;
|
||||
title: string;
|
||||
simpleName: string;
|
||||
info?: string;
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
cities: {
|
||||
type: Map as PropType<Map<number, { name: string; info?: string }>>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ["update:modelValue"],
|
||||
watch: {
|
||||
modelValue(val: number) {
|
||||
const target = this.targets.get(val);
|
||||
this.selectedCity = target;
|
||||
},
|
||||
selectedCity(val: SelectedCity){
|
||||
this.$emit('update:modelValue', val.value);
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const citiesForFind = [];
|
||||
const targets = new Map<number, SelectedCity>();
|
||||
let selectedCity;
|
||||
for (const [value, { name, info }] of this.cities.entries()) {
|
||||
const [filteredTextH, filteredTextA] = filter초성withAlphabet(name);
|
||||
const obj: SelectedCity = {
|
||||
value,
|
||||
title: name,
|
||||
info: info,
|
||||
simpleName: name,
|
||||
searchText: `${name} ${filteredTextH} ${filteredTextA}`
|
||||
};
|
||||
if (value == this.modelValue) {
|
||||
selectedCity = obj;
|
||||
}
|
||||
citiesForFind.push(obj);
|
||||
targets.set(value, obj);
|
||||
}
|
||||
return {
|
||||
selectedCity,
|
||||
searchMode: true,
|
||||
citiesForFind,
|
||||
targets,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<MapLegacyTemplate
|
||||
:isDetailMap="false"
|
||||
:clickableAll="true"
|
||||
:neutralView="true"
|
||||
:useCachedMap="true"
|
||||
:mapTheme="mapTheme"
|
||||
v-model="selectedCityObj"
|
||||
/>
|
||||
<div>
|
||||
선택된 도시로 강행합니다.<br />
|
||||
최대 3칸내 도시로만 강행이 가능합니다.<br />
|
||||
목록을 선택하거나 도시를 클릭하세요.<br />
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<CitySelect :cities="citiesMap" :modelValue="selectedCityID" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<b-button @click="submit">{{ commandName }}</b-button>
|
||||
</div>
|
||||
</div>
|
||||
<CityBasedOnDistance
|
||||
:citiesMap="citiesMap"
|
||||
:distanceList="distanceList"
|
||||
@selected="selected"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import "@/../css/map.css";
|
||||
import MapLegacyTemplate, {
|
||||
MapCityParsed,
|
||||
} from "@/components/MapLegacyTemplate.vue";
|
||||
import CitySelect from "@/processing/CitySelect.vue";
|
||||
import CityBasedOnDistance from "@/processing/CitiesBasedOnDistance.vue";
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { unwrap } from "@/util/unwrap";
|
||||
import { Args } from "@/processing/args";
|
||||
declare const mapTheme: string;
|
||||
declare const cities: [number, string][];
|
||||
declare const currentCity: number;
|
||||
declare const distanceList: Record<number, number[]>;
|
||||
declare const commandName: string;
|
||||
export default defineComponent({
|
||||
name: "che_강행",
|
||||
components: {
|
||||
MapLegacyTemplate,
|
||||
CitySelect,
|
||||
CityBasedOnDistance,
|
||||
},
|
||||
watch: {
|
||||
selectedCityObj(city: MapCityParsed) {
|
||||
this.selectedCityID = city.id;
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
console.log("start!");
|
||||
const citiesMap = new Map<
|
||||
number,
|
||||
{
|
||||
name: string;
|
||||
info?: string;
|
||||
}
|
||||
>();
|
||||
for (const [id, name] of cities) {
|
||||
citiesMap.set(id, { name });
|
||||
}
|
||||
console.log(citiesMap);
|
||||
|
||||
const selectedCityID = ref(currentCity);
|
||||
|
||||
function selected(cityID: number) {
|
||||
selectedCityID.value = cityID;
|
||||
}
|
||||
|
||||
async function submit(e: Event) {
|
||||
const event = new CustomEvent<Args>("customSubmit", {
|
||||
detail: {
|
||||
destCityID: selectedCityID.value,
|
||||
},
|
||||
});
|
||||
unwrap(e.target).dispatchEvent(event);
|
||||
}
|
||||
|
||||
return {
|
||||
mapTheme: ref(mapTheme),
|
||||
citiesMap: ref(citiesMap),
|
||||
selectedCityID,
|
||||
selectedCityObj: ref(undefined as MapCityParsed | undefined),
|
||||
distanceList,
|
||||
commandName,
|
||||
selected,
|
||||
submit,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1 @@
|
||||
export { default as che_강행 } from "./che_강행.vue";
|
||||
@@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
});
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
});
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,2 @@
|
||||
export * as che_발령 from "./che_발령.vue";
|
||||
export * as che_포상 from "./che_포상.vue";
|
||||
@@ -0,0 +1,83 @@
|
||||
import { isArray, isBoolean, isInteger, isString } from "lodash";
|
||||
|
||||
|
||||
const stringArgs = [
|
||||
'nationName', 'optionText', 'itemType', 'nationType', 'itemCode', 'commandType',
|
||||
] as const;
|
||||
const intArgs = [
|
||||
'crewType', 'destGeneralID', 'destCityID', 'destNationID',
|
||||
'amount', 'colorType',
|
||||
'year', 'month',
|
||||
'srcArmType', 'destArmType', //숙련전환 전용
|
||||
] as const;
|
||||
|
||||
const booleanArgs = [
|
||||
'isGold', 'buyRice',
|
||||
] as const;
|
||||
|
||||
const integerArrayArgs = [
|
||||
'destNationIDList', 'destGeneralIDList', 'amountList'
|
||||
] as const;
|
||||
|
||||
type StringKeys = typeof stringArgs[number];
|
||||
type IntKeys = typeof intArgs[number];
|
||||
type BooleanKeys = typeof booleanArgs[number];
|
||||
type IntegerArrayKeys = typeof integerArrayArgs[number];
|
||||
|
||||
|
||||
export type Args = {
|
||||
[key in StringKeys]?: string;
|
||||
} & {
|
||||
[key in IntKeys]?: number;
|
||||
} & {
|
||||
[key in BooleanKeys]?: boolean;
|
||||
} & {
|
||||
[key in IntegerArrayKeys]?: number[]
|
||||
};
|
||||
|
||||
|
||||
|
||||
export function testSubmitArgs(args: Args): true | ['int' | 'string' | 'boolean' | 'int[]', keyof Args, number | string | boolean | number[]] {
|
||||
for (const intKey of intArgs) {
|
||||
const testVal = args[intKey];
|
||||
if (testVal === undefined) {
|
||||
continue;
|
||||
}
|
||||
if (!isInteger(testVal)) {
|
||||
return ['int', intKey, testVal];
|
||||
}
|
||||
}
|
||||
for (const stringKey of stringArgs) {
|
||||
const testVal = args[stringKey];
|
||||
if (testVal === undefined) {
|
||||
continue;
|
||||
}
|
||||
if (!isString(testVal)) {
|
||||
return ['string', stringKey, testVal];
|
||||
}
|
||||
}
|
||||
for (const booleanKey of booleanArgs) {
|
||||
const testVal = args[booleanKey];
|
||||
if (testVal === undefined) {
|
||||
continue;
|
||||
}
|
||||
if (!isBoolean(testVal)) {
|
||||
return ['boolean', booleanKey, testVal];
|
||||
}
|
||||
}
|
||||
for (const integerArrayKey of integerArrayArgs) {
|
||||
const testVal = args[integerArrayKey];
|
||||
if (testVal === undefined) {
|
||||
continue;
|
||||
}
|
||||
if (!isArray(args[integerArrayKey])) {
|
||||
return ['int[]', integerArrayKey, testVal];
|
||||
}
|
||||
for (const value of testVal) {
|
||||
if (!isInteger(value)) {
|
||||
return ['int[]', integerArrayKey, testVal];
|
||||
}
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
Reference in New Issue
Block a user