feat: PageFront 메시지 입력(wip)
- '즐겨찾기' 기능 없음
This commit is contained in:
@@ -1,6 +1,38 @@
|
||||
<template>
|
||||
<div class="MessagePanel">
|
||||
<div class="MessageInputForm">메시지 입력</div>
|
||||
<div class="MessageInputForm row gx-0">
|
||||
<div id="mailbox_list-col" class="col-6 col-md-2 d-grid">
|
||||
<BFormSelect v-model="targetMailbox" class="bg-dark text-white">
|
||||
<optgroup
|
||||
v-for="group of mailboxList"
|
||||
:key="group.label"
|
||||
:label="group.label"
|
||||
:style="{
|
||||
backgroundColor: group.color,
|
||||
color: !group.color ? undefined : isBrightColor(group.color) ? '#000000' : '#ffffff',
|
||||
}"
|
||||
>
|
||||
<BFormSelectOption
|
||||
v-for="target of group.options"
|
||||
:key="target.value"
|
||||
:disabled="target.disabled"
|
||||
:value="target.value"
|
||||
:style="{
|
||||
backgroundColor: target.color ?? '#000000',
|
||||
color: isBrightColor(target.color ?? '#000000') ? '#000000' : '#ffffff',
|
||||
}"
|
||||
>{{ target.text }}
|
||||
</BFormSelectOption>
|
||||
</optgroup>
|
||||
</BFormSelect>
|
||||
</div>
|
||||
<div id="msg_input-col" class="col-12 col-md-8 d-grid">
|
||||
<input v-model="newMessageText" type="text" maxlength="99" @keydown.enter="sendMessage" class="form-control" />
|
||||
</div>
|
||||
<div id="msg_submit-col" class="col-6 col-md-2 d-grid">
|
||||
<BButton variant="primary" @click="sendMessage">서신전달&갱신</BButton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="PublicTalk">
|
||||
<div class="BoardHeader bg0">전체 메시지</div>
|
||||
<template v-if="messagePublic.length == 0">
|
||||
@@ -73,14 +105,15 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, toRef, type Ref } from "vue";
|
||||
import { onMounted, ref, toRef, watch, type Ref } from "vue";
|
||||
import { delay } from "@/util/delay";
|
||||
import { SammoAPI } from "@/SammoAPI";
|
||||
import { isString } from "lodash";
|
||||
import type { MsgItem, MsgResponse, MsgType } from "@/defs/API/Message";
|
||||
import type { MabilboxListResponse, MailboxItem, MsgItem, MsgResponse, MsgType } from "@/defs/API/Message";
|
||||
import MessagePlate from "@/components/MessagePlate.vue";
|
||||
import { useToast } from "bootstrap-vue-3";
|
||||
import { useToast, BFormSelect, BFormSelectOptionGroup } from "bootstrap-vue-3";
|
||||
import { unwrap } from "@/util/unwrap";
|
||||
import { isBrightColor } from "@/util/isBrightColor";
|
||||
|
||||
const toasts = unwrap(useToast());
|
||||
|
||||
@@ -100,6 +133,11 @@ const generalName = toRef(props, "generalName");
|
||||
const nationID = toRef(props, "nationID");
|
||||
const permissionLevel = toRef(props, "permissionLevel");
|
||||
|
||||
let nationMailbox = nationID.value + 9000;
|
||||
watch(nationID, (newVal) => {
|
||||
nationMailbox = newVal + 9000;
|
||||
});
|
||||
|
||||
const lastSequence = ref(-1);
|
||||
|
||||
const initRefreshLimit = 20;
|
||||
@@ -270,13 +308,176 @@ async function tryRefresh() {
|
||||
return waiterP;
|
||||
}
|
||||
|
||||
const targetMailbox = ref(nationID.value + 9000);
|
||||
type MailboxGroup = {
|
||||
label: string;
|
||||
color?: string;
|
||||
options: MailboxTarget[];
|
||||
};
|
||||
type MailboxTarget = {
|
||||
value: number;
|
||||
text: string;
|
||||
nationID: number;
|
||||
disabled?: true;
|
||||
color?: string;
|
||||
};
|
||||
const mailboxList = ref<MailboxGroup[]>([]);
|
||||
const newMessageText = ref<string>("");
|
||||
|
||||
function refreshMailboxList(obj: MabilboxListResponse) {
|
||||
let myNationColor = "#000000";
|
||||
const diplomacyMailboxList: MailboxGroup = {
|
||||
label: "외교메시지",
|
||||
color: "#000000",
|
||||
options: [],
|
||||
};
|
||||
const nationMailboxList: MailboxGroup[] = [];
|
||||
obj.nation.sort(function (lhs, rhs) {
|
||||
if (lhs.mailbox == nationMailbox) {
|
||||
return -1;
|
||||
}
|
||||
if (rhs.mailbox == nationMailbox) {
|
||||
return 1;
|
||||
}
|
||||
return lhs.mailbox - rhs.mailbox;
|
||||
});
|
||||
|
||||
for (const nation of obj.nation) {
|
||||
if (nationMailbox == nation.mailbox) {
|
||||
myNationColor = nation.color;
|
||||
//nationColor저장하는 코드가 있었음
|
||||
}
|
||||
|
||||
const nationBox: MailboxGroup = {
|
||||
label: nation.name,
|
||||
color: nation.color,
|
||||
options: [],
|
||||
};
|
||||
|
||||
nation.general.sort(function (lhs, rhs) {
|
||||
if (lhs[1] < rhs[1]) {
|
||||
return -1;
|
||||
}
|
||||
if (lhs[1] > rhs[1]) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
for (const [destGeneralID, destGeneralName, destGeneralFlag] of nation.general) {
|
||||
const isRuler = !!(destGeneralFlag & 0x1);
|
||||
const isAmbassador = !!(destGeneralFlag & 0x4);
|
||||
|
||||
if (destGeneralID == generalID.value) {
|
||||
continue;
|
||||
}
|
||||
|
||||
let textName = destGeneralName;
|
||||
if (isRuler) {
|
||||
textName = `*${textName}*`;
|
||||
} else if (isAmbassador) {
|
||||
textName = `#${textName}#`;
|
||||
}
|
||||
|
||||
const target: MailboxTarget = {
|
||||
value: destGeneralID,
|
||||
text: textName,
|
||||
nationID: nation.nationID,
|
||||
};
|
||||
|
||||
if (permissionLevel.value == 4 && isAmbassador && nationMailbox != nation.mailbox) {
|
||||
target.disabled = true;
|
||||
}
|
||||
nationBox.options.push(target);
|
||||
}
|
||||
nationMailboxList.push(nationBox);
|
||||
|
||||
if (permissionLevel.value < 4 || nationMailbox == nation.mailbox) {
|
||||
continue;
|
||||
}
|
||||
|
||||
diplomacyMailboxList.options.push({
|
||||
value: nation.mailbox,
|
||||
text: nation.name,
|
||||
nationID: nation.nationID,
|
||||
color: nation.color,
|
||||
});
|
||||
}
|
||||
|
||||
const favoriteBox: MailboxGroup = {
|
||||
label: "즐겨찾기",
|
||||
color: "#000000",
|
||||
options: [
|
||||
{
|
||||
value: nationMailbox,
|
||||
text: "【 아국 메세지 】",
|
||||
nationID: nationID.value,
|
||||
color: myNationColor,
|
||||
},
|
||||
{
|
||||
value: 9999,
|
||||
text: "【 전체 메세지 】",
|
||||
nationID: 0,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
mailboxList.value = [favoriteBox, diplomacyMailboxList, ...nationMailboxList];
|
||||
}
|
||||
|
||||
async function sendMessage() {
|
||||
const text = newMessageText.value;
|
||||
if (!text) {
|
||||
return tryRefresh();
|
||||
}
|
||||
const mailbox = targetMailbox.value;
|
||||
|
||||
try {
|
||||
const waiter = SammoAPI.Message.SendMessage({
|
||||
mailbox,
|
||||
text,
|
||||
});
|
||||
newMessageText.value = "";
|
||||
await waiter;
|
||||
await tryRefresh();
|
||||
} catch (e) {
|
||||
if (isString(e)) {
|
||||
toasts.warning({
|
||||
title: "메시지 전송 실패",
|
||||
body: e,
|
||||
});
|
||||
}
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
async function tryFullRefresh() {
|
||||
try {
|
||||
const refreshP = tryRefresh();
|
||||
const response = await SammoAPI.Message.GetContactList();
|
||||
refreshMailboxList(response);
|
||||
await refreshP;
|
||||
} catch (e) {
|
||||
if (isString(e)) {
|
||||
toasts.warning({
|
||||
title: " 실패했습니다.",
|
||||
body: e,
|
||||
});
|
||||
}
|
||||
console.error(e);
|
||||
return;
|
||||
}
|
||||
|
||||
beginRefreshTimer();
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
tryRefresh,
|
||||
tryFullRefresh,
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
beginRefreshTimer();
|
||||
await tryRefresh();
|
||||
await tryFullRefresh();
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -284,33 +485,31 @@ onMounted(async () => {
|
||||
@import "@scss/common/break_500px.scss";
|
||||
|
||||
.BoardHeader {
|
||||
color: white;
|
||||
outline-style: solid;
|
||||
outline-width: 1px;
|
||||
outline-color: gray;
|
||||
color: white;
|
||||
outline-style: solid;
|
||||
outline-width: 1px;
|
||||
outline-color: gray;
|
||||
}
|
||||
|
||||
.PublicTalk {
|
||||
|
||||
}
|
||||
|
||||
@include media-1000px {
|
||||
.MessagePanel{
|
||||
.MessagePanel {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.MessageInputForm{
|
||||
.MessageInputForm {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.PublicTalk{
|
||||
.PublicTalk {
|
||||
border-right: 1px solid gray;
|
||||
}
|
||||
|
||||
.PrivateTalk{
|
||||
.PrivateTalk {
|
||||
border-right: 1px solid gray;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user