devsam/core
3
6
Fork 1
Code Issues 60 Pull Requests Releases 1 Wiki Activity

refac: toast 출력을 bootstrap-vue-3 내부 toast로 변경

Browse Source 
- component로 src 내부 ts/vue 사용 시도 중
This commit is contained in:
Hide_D
2022-02-18 20:54:26 +09:00
parent 65aefadcdc
commit 5ea1b0bce4
13 changed files with 534 additions and 651 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hwe/ts/components/BettingDetail.vue
+36 -16
View File
@@ -66,7 +66,7 @@
<div class="col-5 text-center">대상</div>
<div class="col-2 text-center">베팅액</div>
<div class="col-3 text-center">내 베팅</div>
<div class="col-2 text-center">{{ info.finished? '배율':'기대 배율' }}</div>
<div class="col-2 text-center">{{ info.finished ? '배율' : '기대 배율' }}</div>
</div>
<template v-if="info.finished">
<div class="row" v-for="[betType, amount] of detailBet" :key="betType">
@@ -85,10 +85,12 @@
<div class="col-3 text-center" v-if="myBettings.has(betType)">
<template
v-for="subPoint of [myBettings.get(betType) ?? 0]"
>({{ subPoint.toLocaleString() }} -> {{ calculatedReward[matchPoint] == 0? 0 : (subPoint * calculatedReward[matchPoint] / (calculatedSubAmount.get(matchPoint)??1)).toFixed(1).toLocaleString() }})</template>
>({{ subPoint.toLocaleString() }} -> {{ calculatedReward[matchPoint] == 0 ? 0 : (subPoint * calculatedReward[matchPoint] / (calculatedSubAmount.get(matchPoint) ?? 1)).toFixed(1).toLocaleString() }})</template>
</div>
<div class="col-3 text-center" v-else></div>
<div class="col-2 text-end">{{ (calculatedReward[matchPoint] == 0? 0 : (calculatedReward[matchPoint] / (calculatedSubAmount.get(matchPoint)??1))).toFixed(1).toLocaleString() }}배</div>
<div
class="col-2 text-end"
>{{ (calculatedReward[matchPoint] == 0 ? 0 : (calculatedReward[matchPoint] / (calculatedSubAmount.get(matchPoint) ?? 1))).toFixed(1).toLocaleString() }}배</div>
</template>
</div>
</template>
@@ -107,7 +109,9 @@
>({{ subPoint.toLocaleString() }} -> {{ (subPoint * maxBettingReward / amount).toFixed(1).toLocaleString() }})</template>
</div>
<div class="col-3 text-center" v-else></div>
<div class="col-2 text-end">{{ (maxBettingReward / amount).toFixed(1).toLocaleString() }}배</div>
<div
class="col-2 text-end"
>{{ (maxBettingReward / amount).toFixed(1).toLocaleString() }}배</div>
</div>
</template>
</div>
@@ -343,9 +347,13 @@ async function loadBetting(bettingID: number) {
} catch (e) {
if (isString(e)) {
emit('reqToast', {
title: "에러",
content: e,
type: "danger",
content: {
title: "에러",
body: e
},
options: {
variant: 'danger',
}
});
}
console.error(e);
@@ -388,9 +396,13 @@ function toggleCandidate(idx: number) {
}
else {
emit('reqToast', {
title: '오류',
type: 'warning',
content: `이미 ${selectCnt}개를 선택했습니다.`,
content: {
title: '오류',
body: `이미 ${selectCnt}개를 선택했습니다.`,
},
options: {
variant: 'warning',
}
});
return;
}
@@ -416,17 +428,25 @@ async function submitBet(): Promise<void> {
amount,
});
emit('reqToast', {
title: '완료',
content: '베팅했습니다',
type: 'success'
content: {
title: '완료',
body: '베팅했습니다',
},
options: {
variant: 'success'
}
});
await loadBetting(bettingInfo.id);
} catch (e) {
if (isString(e)) {
emit('reqToast', {
title: "에러",
content: e,
type: "danger",
content: {
title: "에러",
body: e,
},
options: {
variant: "danger",
}
});
}
console.error(e);
hwe/ts/components/MyToast.vue
-103
View File
@@ -1,103 +0,0 @@
<template>
<CToaster class="my-toaster" placement="top-end" v-if="toasts.length > 0">
<template v-for="(toast, index) in toasts" :key="index">
<CToast :delay="toast.delay ?? delay">
<CToastHeader :class="['text-white', `bg-${toast.type ?? 'primary'}`]">
<span class="me-auto fw-bold">{{ toast.title }}</span>
<CToastClose class="my-close" color="secondary" size="sm" />
</CToastHeader>
<CToastBody> {{ toast.content }} </CToastBody>
</CToast>
</template>
</CToaster>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, watch } from "vue";
import { ToastType } from "@/defs";
import {
CToaster,
CToast,
CToastHeader,
CToastBody,
CToastClose,
} from "@coreui/vue/src/components/toast";
export default defineComponent({
components: {
CToaster,
CToast,
CToastHeader,
CToastBody,
CToastClose,
},
emits: ["update:modelValue"],
props: {
modelValue: {
type: Array as PropType<ToastType[]>,
required: true,
},
delay: {
type: Number,
required: false,
default: 5000,
},
},
setup(props, { emit }) {
let doneCnt = 0;
const doneMap = new Map<ToastType, boolean>();
let toasts = ref(props.modelValue);
function onClose(toast: ToastType) {
const status = doneMap.get(toast);
if (status === undefined) {
return;
}
if (status) {
return;
}
doneCnt -= 1;
if (doneCnt != 0) {
doneMap.set(toast, true);
return;
}
doneMap.clear();
toasts.value.length = 0;
emit("update:modelValue", toasts.value);
}
watch(props.modelValue, (values) => {
for (const item of values) {
if (!doneMap.has(item)) {
doneMap.set(item, false);
doneCnt += 1;
setTimeout(() => {
onClose(item);
}, (item.delay ?? props.delay) + 1000);
}
}
if (toasts.value !== values) {
toasts.value = values;
}
});
return {
onClose,
toasts,
};
},
});
</script>
<style>
.my-toaster {
z-index: 199;
}
.my-toaster .btn.btn-close.my-close,
.my-toaster .btn.btn-close.my-close:hover,
.my-toaster .btn.btn-close.my-close:active {
border: 0;
padding: 0;
}
</style>