519 lines
13 KiB
Vue
519 lines
13 KiB
Vue
<template>
|
|
<div class="commandPad chiefReservedCommand">
|
|
<div class="commandTable">
|
|
<DragSelect
|
|
:style="rowGridStyle"
|
|
attribute="turnIdx"
|
|
@dragStart="isDragSingle = true"
|
|
@dragDone="
|
|
isDragSingle = false;
|
|
selectTurn(...$event);
|
|
"
|
|
v-slot="{ selected }"
|
|
>
|
|
<div
|
|
v-for="(turnObj, turnIdx) in reservedCommandList"
|
|
:key="turnIdx"
|
|
:turnIdx="turnIdx"
|
|
class="time_pad center f_tnum"
|
|
:style="{
|
|
backgroundColor: 'black',
|
|
whiteSpace: 'nowrap',
|
|
overflow: 'hidden',
|
|
color:
|
|
isDragSingle && selected.has(`${turnIdx}`) ? 'cyan' : undefined,
|
|
}"
|
|
>{{ turnObj.time }}</div>
|
|
</DragSelect>
|
|
<DragSelect
|
|
:style="rowGridStyle"
|
|
attribute="turnIdx"
|
|
@dragStart="isDragToggle = true"
|
|
@dragDone="
|
|
isDragToggle = false;
|
|
toggleTurn(...$event);
|
|
"
|
|
v-slot="{ selected }"
|
|
>
|
|
<div
|
|
v-for="(turnObj, turnIdx) in reservedCommandList"
|
|
:key="turnIdx"
|
|
:turnIdx="turnIdx"
|
|
class="idx_pad center d-grid"
|
|
>
|
|
<b-button
|
|
size="sm"
|
|
:variant="
|
|
isDragToggle && selected.has(`${turnIdx}`)
|
|
? 'light'
|
|
: turnList.has(turnIdx)
|
|
? 'info'
|
|
: turnList.size == 0 && prevTurnList.has(turnIdx)
|
|
? 'success'
|
|
: 'primary'
|
|
"
|
|
>{{ turnIdx + 1 }}</b-button>
|
|
</div>
|
|
</DragSelect>
|
|
<div :style="rowGridStyle">
|
|
<div
|
|
v-for="(turnObj, turnIdx) in reservedCommandList"
|
|
:key="turnIdx"
|
|
class="turn_pad center"
|
|
@click="chooseCommand(turnObj.action)"
|
|
>
|
|
<span
|
|
class="turn_text"
|
|
:style="turnObj.style"
|
|
v-b-tooltip.hover
|
|
:title="turnObj.tooltip"
|
|
v-html="turnObj.brief"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row gx-0">
|
|
<div class="col-2 d-grid">
|
|
<b-button
|
|
:pressed="searchModeOn"
|
|
@click="toggleSearchCommand()"
|
|
:variant="searchModeOn ? 'info' : 'primary'"
|
|
v-b-tooltip.hover
|
|
title="검색 기능을 활성화합니다."
|
|
>
|
|
<i class="bi bi-search"></i>
|
|
</b-button>
|
|
</div>
|
|
<div class="col-7">
|
|
<v-multiselect
|
|
v-model="selectedCommand"
|
|
:allow-empty="false"
|
|
:options="commandList"
|
|
:group-select="false"
|
|
group-values="values"
|
|
group-label="category"
|
|
label="searchText"
|
|
track-by="value"
|
|
open-direction="top"
|
|
:show-labels="false"
|
|
selectLabel="선택(엔터)"
|
|
selectGroupLabel
|
|
selectedLabel="선택됨"
|
|
deselectLabel="해제(엔터)"
|
|
deselectGroupLabel
|
|
placeholder="턴 선택"
|
|
:maxHeight="400"
|
|
:searchable="searchModeOn"
|
|
>
|
|
<template v-slot:noResult>검색 결과가 없습니다.</template>
|
|
<template v-slot:option="props">
|
|
<!--FIXME: 카테고리-->
|
|
<template v-if="props.option.title">
|
|
<span class="compensatePositive" v-if="props.option.compensation > 0">▲</span>
|
|
<span class="compensateNegative" v-else-if="props.option.compensation < 0">▼</span>
|
|
<span class="compensateNeutral" v-else></span>
|
|
<span
|
|
:class="[props.option.possible ? '' : 'commandImpossible']"
|
|
>{{ props.option.title }}</span>
|
|
</template>
|
|
<template v-else-if="props.option.category">{{ props.option.category }}</template>
|
|
</template>
|
|
<template v-slot:singleLabel="props">{{ props.option.simpleName }}</template>
|
|
</v-multiselect>
|
|
</div>
|
|
<div class="col-3 d-grid">
|
|
<b-button @click="reserveCommand()" variant="primary">실행</b-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import addMinutes from "date-fns/esm/addMinutes";
|
|
import { stringifyUrl } from "query-string";
|
|
import { defineProps, defineEmits, onMounted, ref, watch, type PropType } from "vue";
|
|
import { formatTime } from "@util/formatTime";
|
|
import { joinYearMonth } from "@util/joinYearMonth";
|
|
import { mb_strwidth } from "@util/mb_strwidth";
|
|
import { parseTime } from "@util/parseTime";
|
|
import { parseYearMonth } from "@util/parseYearMonth";
|
|
import { convertSearch초성 } from "@util/convertSearch초성";
|
|
import VueTypes from "vue-types";
|
|
import DragSelect from "@/components/DragSelect.vue";
|
|
import { isString } from "lodash";
|
|
import { SammoAPI } from "@/SammoAPI";
|
|
import type { ChiefResponse, CommandItem, TurnObj } from "@/defs";
|
|
|
|
|
|
type TurnObjWithTime = TurnObj & {
|
|
time: string;
|
|
year?: number;
|
|
month?: number;
|
|
tooltip?: string;
|
|
style?: Record<string, unknown>;
|
|
};
|
|
|
|
const searchModeKey = `sammo_searchModeOn`;
|
|
|
|
const props = defineProps({
|
|
maxTurn: VueTypes.integer.isRequired,
|
|
maxPushTurn: VueTypes.integer.isRequired,
|
|
date: VueTypes.string.isRequired,
|
|
year: VueTypes.integer.isRequired,
|
|
month: VueTypes.integer.isRequired,
|
|
turnTerm: VueTypes.integer.isRequired,
|
|
turnTime: VueTypes.string.isRequired,
|
|
selectedTurn: {
|
|
type: Object as PropType<Set<number>>,
|
|
required: false,
|
|
default: () => new Set(),
|
|
},
|
|
turn: {
|
|
type: Array as PropType<TurnObj[]>,
|
|
required: true,
|
|
},
|
|
commandList: {
|
|
type: Object as PropType<ChiefResponse['commandList']>,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
|
|
const serverNowObj = ref(parseTime(props.date));
|
|
const clientNowObj = ref(new Date());
|
|
const timeDiff = ref(serverNowObj.value.getTime() - clientNowObj.value.getTime());
|
|
|
|
const listReqArgCommand = new Set<string>();
|
|
for (const commandCategories of props.commandList) {
|
|
if (!commandCategories.values) {
|
|
continue;
|
|
}
|
|
for (const commandObj of commandCategories.values) {
|
|
if (!commandObj.reqArg) {
|
|
continue;
|
|
}
|
|
listReqArgCommand.add(commandObj.value);
|
|
}
|
|
}
|
|
|
|
const selectedCommand = ref(props.commandList[0].values[0]);
|
|
for (const subCategory of props.commandList) {
|
|
for (const command of subCategory.values) {
|
|
if (command.searchText) {
|
|
continue;
|
|
}
|
|
command.searchText = convertSearch초성(command.simpleName).join("|");
|
|
}
|
|
}
|
|
|
|
const invCommandMap: Record<string, CommandItem> = {};
|
|
for (const category of props.commandList) {
|
|
for (const command of category.values) {
|
|
invCommandMap[command.value] = command;
|
|
}
|
|
}
|
|
|
|
const searchModeOn = ref((localStorage.getItem(searchModeKey) ?? "0") != "0");
|
|
|
|
const emptyTurn: TurnObjWithTime[] = Array.from<TurnObjWithTime>({
|
|
length: props.maxTurn,
|
|
}).fill({
|
|
arg: {},
|
|
brief: "",
|
|
action: "",
|
|
year: undefined,
|
|
month: undefined,
|
|
time: "",
|
|
});
|
|
|
|
const prevTurnList = ref(new Set([0]));
|
|
|
|
const rowGridStyle = ref({
|
|
display: "grid",
|
|
gridTemplateRows: `repeat(${props.maxTurn}, 30px)`,
|
|
});
|
|
|
|
const updated = ref(false);
|
|
const isDragSingle = ref(false);
|
|
const isDragToggle = ref(false);
|
|
const reservedCommandList = ref(emptyTurn);
|
|
const turnList = ref(props.selectedTurn);
|
|
const autorun_limit = ref<number | null>(null);
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'raiseReload'): void,
|
|
(event: 'update:selectedTurn', value: Set<number>): void,
|
|
}>();
|
|
|
|
function triggerUpdateCommandList(type?: string) {
|
|
console.log("try update", type);
|
|
updated.value = false;
|
|
setTimeout(() => {
|
|
updateCommandList();
|
|
}, 1);
|
|
}
|
|
function toggleTurn(...reqTurnList: number[] | string[]) {
|
|
for (let turnIdx of reqTurnList) {
|
|
if (isString(turnIdx)) {
|
|
turnIdx = parseInt(turnIdx);
|
|
}
|
|
if (turnList.value.has(turnIdx)) {
|
|
turnList.value.delete(turnIdx);
|
|
} else {
|
|
turnList.value.add(turnIdx);
|
|
}
|
|
}
|
|
emit("update:selectedTurn", turnList.value);
|
|
}
|
|
|
|
function selectTurn(...reqTurnList: number[] | string[]) {
|
|
turnList.value.clear();
|
|
for (const turnIdx of reqTurnList) {
|
|
if (isString(turnIdx)) {
|
|
turnList.value.add(parseInt(turnIdx));
|
|
} else {
|
|
turnList.value.add(turnIdx);
|
|
}
|
|
}
|
|
emit("update:selectedTurn", turnList.value);
|
|
}
|
|
|
|
function updateCommandList() {
|
|
if (updated.value) {
|
|
return;
|
|
}
|
|
console.log("do update!");
|
|
const _reservedCommandList: TurnObjWithTime[] = [];
|
|
let yearMonth = joinYearMonth(props.year, props.month);
|
|
|
|
const turnTime = parseTime(props.turnTime);
|
|
let nextTurnTime = new Date(turnTime);
|
|
|
|
const autorunLimitYearMonth = autorun_limit.value ?? yearMonth - 1;
|
|
const [autorunLimitYear, autorunLimitMonth] = parseYearMonth(
|
|
autorunLimitYearMonth
|
|
);
|
|
|
|
for (const obj of props.turn) {
|
|
const [year, month] = parseYearMonth(yearMonth);
|
|
let tooltip: string[] = [];
|
|
let style: Record<string, unknown> = {};
|
|
|
|
const brief = obj.brief;
|
|
|
|
if (yearMonth <= autorunLimitYearMonth) {
|
|
if (obj.brief == "휴식") {
|
|
obj.brief = "휴식<small>(자율 행동)</small>";
|
|
}
|
|
style.color = "#aaffff";
|
|
|
|
tooltip.push(
|
|
`자율 행동 기간: ${autorunLimitYear}년 ${autorunLimitMonth}월까지`
|
|
);
|
|
}
|
|
|
|
if (mb_strwidth(brief) > 22) {
|
|
tooltip.push(brief);
|
|
}
|
|
|
|
_reservedCommandList.push({
|
|
...obj,
|
|
year,
|
|
month,
|
|
time: formatTime(
|
|
nextTurnTime,
|
|
props.turnTerm >= 5 ? "HH:mm" : "mm:ss"
|
|
),
|
|
tooltip: tooltip.length == 0 ? undefined : tooltip.join("\n"),
|
|
style,
|
|
});
|
|
|
|
yearMonth += 1;
|
|
nextTurnTime = addMinutes(nextTurnTime, props.turnTerm);
|
|
}
|
|
reservedCommandList.value = _reservedCommandList;
|
|
|
|
const serverNowObj = parseTime(props.date);
|
|
const clientNowObj = new Date();
|
|
timeDiff.value = serverNowObj.getTime() - clientNowObj.getTime();
|
|
updated.value = true;
|
|
}
|
|
|
|
async function reserveCommand() {
|
|
let reqTurnList: number[];
|
|
if (turnList.value.size == 0) {
|
|
reqTurnList = Array.from(prevTurnList.value.values());
|
|
} else {
|
|
reqTurnList = Array.from(turnList.value.values());
|
|
}
|
|
|
|
if (reqTurnList.length == 0) {
|
|
reqTurnList.push(0);
|
|
}
|
|
|
|
const commandName = selectedCommand.value.value;
|
|
|
|
if (listReqArgCommand.has(commandName)) {
|
|
document.location.href = stringifyUrl({
|
|
url: "v_processing.php",
|
|
query: {
|
|
command: commandName,
|
|
turnList: reqTurnList.join("_"),
|
|
is_chief: true,
|
|
},
|
|
});
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await SammoAPI.NationCommand.ReserveCommand({
|
|
turnList: reqTurnList,
|
|
action: commandName,
|
|
});
|
|
|
|
if (turnList.value.size > 0) {
|
|
prevTurnList.value.clear();
|
|
for (const v of reqTurnList) {
|
|
prevTurnList.value.add(v);
|
|
}
|
|
turnList.value.clear();
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
alert(`실패했습니다: ${e}`);
|
|
return;
|
|
}
|
|
emit("raiseReload");
|
|
}
|
|
function toggleSearchCommand() {
|
|
searchModeOn.value = !searchModeOn.value;
|
|
localStorage.setItem(searchModeKey, searchModeOn.value ? "1" : "0");
|
|
}
|
|
|
|
function chooseCommand(val: string) {
|
|
selectedCommand.value = invCommandMap[val];
|
|
}
|
|
|
|
|
|
watch(() => props.date, () => {
|
|
triggerUpdateCommandList("date");
|
|
})
|
|
watch(() => props.year, () => {
|
|
triggerUpdateCommandList("year");
|
|
})
|
|
watch(() => props.month, () => {
|
|
triggerUpdateCommandList("month");
|
|
})
|
|
watch(() => props.turnTime, () => {
|
|
triggerUpdateCommandList("turnTime");
|
|
})
|
|
watch(() => props.commandList, () => {
|
|
triggerUpdateCommandList("commandList");
|
|
})
|
|
watch(() => props.selectedTurn, (val: Set<number>) => {
|
|
console.log(val);
|
|
if (val === turnList.value) {
|
|
console.log("pass!");
|
|
return;
|
|
}
|
|
turnList.value.clear();
|
|
for (const t of val.values()) {
|
|
turnList.value.add(t);
|
|
}
|
|
})
|
|
|
|
watch(turnList, () => {
|
|
console.log(turnList.value);
|
|
emit("update:selectedTurn", turnList.value);
|
|
})
|
|
|
|
|
|
onMounted(() => {
|
|
updateCommandList();
|
|
})
|
|
|
|
</script>
|
|
<style lang="scss">
|
|
@import "@scss/common/break_500px.scss";
|
|
@import "@scss/common/variables.scss";
|
|
@import "@scss/common/bootswatch_custom_variables.scss";
|
|
|
|
.chiefReservedCommand {
|
|
background-color: $gray-900;
|
|
|
|
.commandTable {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: minmax(39.67px, 1fr) minmax(28px, 1fr) 5fr;
|
|
//30, 70, 37.65, 160
|
|
}
|
|
|
|
@include media-1000px {
|
|
.turn_pad {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.multiselect__content-wrapper {
|
|
margin-left: calc(-100% / 7 * 2);
|
|
width: calc(100% / 7 * 12);
|
|
}
|
|
|
|
.multiselect__single {
|
|
display: inline-block;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
@include media-500px {
|
|
.dropdown-item {
|
|
padding: 8px;
|
|
}
|
|
|
|
.multiselect__content-wrapper {
|
|
margin-left: calc(-100% / 7 * 2);
|
|
width: calc(100% / 7 * 12);
|
|
}
|
|
|
|
.commandPad {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
|
|
.btn {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
.month_pad,
|
|
.time_pad,
|
|
.turn_pad {
|
|
padding: 6px;
|
|
}
|
|
}
|
|
|
|
.month_pad:hover {
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.month_pad,
|
|
.time_pad,
|
|
.turn_pad {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.turn_pad {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.turn_pad .turn_text {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
</style> |