広告の曜日を設定できるように (#10095)

* 曜日選択できるように

* ラベル選択でもチェックが変更されるように

* adを参照しないといけないかも

* smallint -> integer

* 異物混入だったので取りだし

* タイムゾーン指定(Date2つ使うのなんか違和感

* 未テスト

* これにすると出てこないかも

* UIチョット変更

* UI変更 fix bug

* 畳むように修正

* dayofweek->dayOfWeek

* マイグレ時にnot null,default設定してるのでnullable:falseでよさそう

* コメントの記載

* Update packages/backend/src/server/api/endpoints/meta.ts

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

---------

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>
This commit is contained in:
nenohi
2023-07-08 08:56:11 +09:00
committed by GitHub
parent 1f181536ae
commit 3c6175d959
7 changed files with 51 additions and 11 deletions

View File

@@ -36,6 +36,16 @@
<template #label>{{ i18n.ts.expiration }}</template>
</MkInput>
</FormSplit>
<MkFolder>
<template #label>{{ i18n.ts.advancedSettings }}</template>
<span>
{{ i18n.ts._ad.timezoneinfo }}
<div v-for="(day, index) in daysOfWeek" :key="index">
<input :id="`ad${ad.id}-${index}`" type="checkbox" :checked="(ad.dayOfWeek & (1 << index)) !== 0" @change="toggleDayOfWeek(ad, index)">
<label :for="`ad${ad.id}-${index}`">{{ day }}</label>
</div>
</span>
</MkFolder>
<MkTextarea v-model="ad.memo">
<template #label>{{ i18n.ts.memo }}</template>
</MkTextarea>
@@ -59,6 +69,7 @@ import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/MkInput.vue';
import MkTextarea from '@/components/MkTextarea.vue';
import MkRadios from '@/components/MkRadios.vue';
import MkFolder from '@/components/MkFolder.vue';
import FormSplit from '@/components/form/split.vue';
import * as os from '@/os';
import { i18n } from '@/i18n';
@@ -69,6 +80,7 @@ let ads: any[] = $ref([]);
// ISO形式はTZがUTCになってしまうので、TZ分ずらして時間を初期化
const localTime = new Date();
const localTimeDiff = localTime.getTimezoneOffset() * 60 * 1000;
const daysOfWeek: string[] = [i18n.ts._weekday.sunday, i18n.ts._weekday.monday, i18n.ts._weekday.tuesday, i18n.ts._weekday.wednesday, i18n.ts._weekday.thursday, i18n.ts._weekday.friday, i18n.ts._weekday.saturday];
os.api('admin/ad/list').then(adsResponse => {
ads = adsResponse.map(r => {
@@ -84,6 +96,11 @@ os.api('admin/ad/list').then(adsResponse => {
});
});
// 選択された曜日(index)のビットフラグを操作する
function toggleDayOfWeek(ad, index) {
ad.dayOfWeek ^= 1 << index;
}
function add() {
ads.unshift({
id: null,
@@ -95,6 +112,7 @@ function add() {
imageUrl: null,
expiresAt: null,
startsAt: null,
dayOfWeek: 0,
});
}
@@ -105,6 +123,7 @@ function remove(ad) {
}).then(({ canceled }) => {
if (canceled) return;
ads = ads.filter(x => x !== ad);
if (ad.id == null) return;
os.apiWithDialog('admin/ad/delete', {
id: ad.id,
});