Merge pull request 'fix: multiple Ads' bugs & feat: Ads widget' (#9668) from yawhn/elreqkey:9080_ads_widget into develop

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9668

packages/client/src/components/global/MkAd.vue

@@ -56,9 +56,12 @@ 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 (widgetAds.length !== 0) {
+			return widgetAds;
+	} else if (ads.length === 0) {
 		 if (lowPriorityAds.length !== 0) {
 			return lowPriorityAds[Math.floor(Math.random() * lowPriorityAds.length)];
 		} else {
@@ -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 ,

packages/client/src/pages/admin/promotions.vue

@@ -13,20 +13,12 @@
 				</MkInput>
 				<FormRadios v-model="ad.place" class="_formBlock">
 					<template #label>Form</template>
-					<option value="square">square</option>
+					<option value="widget">widget</option>
-					<option value="horizontal">horizontal</option>
+					<option value="inline">inline</option>
-					<option value="horizontal-big">horizontal-big</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,
 	});
 }
 

packages/client/src/ui/classic.widgets.vue

@@ -1,11 +1,10 @@
 <template>
-<div class="ddiqwdnk">
+	<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"/>
-	<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>
 </template>
 
 <script lang="ts">

packages/client/src/ui/deck/widgets-column.vue

@@ -1,12 +1,12 @@
 <template>
-<XColumn :menu="menu" :naked="true" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
+	<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>
+	</XColumn>
 </template>
 
 <script lang="ts" setup>

packages/client/src/ui/universal.widgets.vue

@@ -1,10 +1,10 @@
 <template>
-<div class="efzpzdvf">
+	<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>
+	</div>
 </template>
 
 <script lang="ts" setup>