fix: multiple Ads' bugs.

feat: Ads widget

https://codeberg.org/calckey/calckey/issues/9138
https://codeberg.org/calckey/calckey/issues/9080
This commit is contained in:
yawhn 2023-02-24 13:58:45 +02:00
parent 6ac1e417dd
commit fce27471ab
5 changed files with 41 additions and 41 deletions

View file

@ -56,10 +56,13 @@ const choseAd = (): Ad | null => {
}
const lowPriorityAds = ads.filter(ad => ad.ratio === 0);
const widgetAds = ads.filter(ad => ad.place === 'widget');
ads = ads.filter(ad => ad.ratio !== 0);
if (ads.length === 0) {
if (lowPriorityAds.length !== 0) {
if (widgetAds.length !== 0) {
return widgetAds;
} else if (ads.length === 0) {
if (lowPriorityAds.length !== 0) {
return lowPriorityAds[Math.floor(Math.random() * lowPriorityAds.length)];
} else {
return null;
@ -132,7 +135,7 @@ function reduceFrequency(): void {
}
}
&.square {
&.widget {
> a ,
> a > img {
max-width: min(300px, 100%);
@ -140,7 +143,7 @@ function reduceFrequency(): void {
}
}
&.horizontal {
&.inline {
padding: 8px;
> a ,
@ -150,7 +153,7 @@ function reduceFrequency(): void {
}
}
&.horizontal-big {
&.inline-big {
padding: 8px;
> a ,

View file

@ -13,20 +13,12 @@
</MkInput>
<FormRadios v-model="ad.place" class="_formBlock">
<template #label>Form</template>
<option value="square">square</option>
<option value="horizontal">horizontal</option>
<option value="horizontal-big">horizontal-big</option>
<option value="widget">widget</option>
<option value="inline">inline</option>
<option value="inline-big">inline-big</option>
</FormRadios>
<!--
<div style="margin: 32px 0;">
{{ i18n.ts.priority }}
<MkRadio v-model="ad.priority" value="high">{{ i18n.ts.high }}</MkRadio>
<MkRadio v-model="ad.priority" value="middle">{{ i18n.ts.middle }}</MkRadio>
<MkRadio v-model="ad.priority" value="low">{{ i18n.ts.low }}</MkRadio>
</div>
-->
<FormSplit>
<MkInput v-model="ad.ratio" type="number">
<MkInput :disabled="ad.place === 'widget'" v-model="ad.ratio" type="number">
<template #label>{{ i18n.ts.ratio }}</template>
</MkInput>
<MkInput v-model="ad.expiresAt" type="date">
@ -56,23 +48,29 @@ import FormSplit from '@/components/form/split.vue';
import * as os from '@/os';
import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';
import { formatDateTimeString } from '@/scripts/format-time-string';
let ads: any[] = $ref([]);
os.api('admin/ad/list').then(adsResponse => {
ads = adsResponse;
// The date format should be changed to yyyy-MM-dd in order to be properly displayed
for (let i in ads) {
ads[i].expiresAt = ads[i].expiresAt.substr(0, 10);
}
});
function add() {
const tomorrow = formatDateTimeString(new Date(new Date().setDate(new Date().getDate() + 1)), 'yyyy-MM-dd');
ads.unshift({
id: null,
memo: '',
place: 'square',
place: 'widget',
priority: 'middle',
ratio: 1,
url: '',
imageUrl: null,
expiresAt: null,
expiresAt: tomorrow,
});
}

View file

@ -1,11 +1,10 @@
<template>
<div class="ddiqwdnk">
<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value.filter(w => w.place === place)" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
<MkAd class="a" :prefer="['square']"/>
<button v-if="editMode" class="_textButton edit" style="font-size: 0.9em;" @click="editMode = false"><i class="ph-check-bold ph-lg"></i> {{ i18n.ts.editWidgetsExit }}</button>
<button v-else class="_textButton edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ph-pencil-bold ph-lg"></i> {{ i18n.ts.editWidgets }}</button>
</div>
<div class="ddiqwdnk">
<MkAd class="a" :prefer="['widget']"/>
<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value.filter(w => w.place === place)" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
<button v-if="editMode" class="_textButton edit" style="font-size: 0.9em;" @click="editMode = false"><i class="ph-check-bold ph-lg"></i> {{ i18n.ts.editWidgetsExit }}</button>
<button v-else class="_textButton edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ph-pencil-bold ph-lg"></i> {{ i18n.ts.editWidgets }}</button>
</div>
</template>
<script lang="ts">

View file

@ -1,12 +1,12 @@
<template>
<XColumn :menu="menu" :naked="true" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
<template #header><i class="ph-browser-bold ph-lg" style="margin-right: 8px;"></i>{{ column.name }}</template>
<div class="wtdtxvec">
<div v-if="!(column.widgets && column.widgets.length > 0) && !edit" class="intro">{{ i18n.ts._deck.widgetsIntroduction }}</div>
<XWidgets :edit="edit" :widgets="column.widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="edit = false"/>
</div>
</XColumn>
<XColumn :menu="menu" :naked="true" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
<template #header><i class="ph-browser-bold ph-lg" style="margin-right: 8px;"></i>{{ column.name }}</template>
<div class="wtdtxvec">
<MkAd class="a" :prefer="['widget']"/>
<div v-if="!(column.widgets && column.widgets.length > 0) && !edit" class="intro">{{ i18n.ts._deck.widgetsIntroduction }}</div>
<XWidgets :edit="edit" :widgets="column.widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="edit = false"/>
</div>
</XColumn>
</template>
<script lang="ts" setup>

View file

@ -1,10 +1,10 @@
<template>
<div class="efzpzdvf">
<XWidgets :edit="editMode" :widgets="defaultStore.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
<button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="ph-check-bold ph-lg"></i> {{ i18n.ts.editWidgetsExit }}</button>
<button v-else class="_textButton mk-widget-edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ph-pencil-bold ph-lg"></i> {{ i18n.ts.editWidgets }}</button>
</div>
<div class="efzpzdvf">
<MkAd class="a" :prefer="['widget']"/>
<XWidgets :edit="editMode" :widgets="defaultStore.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
<button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="ph-check-bold ph-lg"></i> {{ i18n.ts.editWidgetsExit }}</button>
<button v-else class="_textButton mk-widget-edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ph-pencil-bold ph-lg"></i> {{ i18n.ts.editWidgets }}</button>
</div>
</template>
<script lang="ts" setup>