generated from VLADIMIR/template_frontend
update design
This commit is contained in:
parent
980bdd0bdc
commit
81151ec4a6
@ -61,7 +61,7 @@
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--color-text);
|
||||
background: #eee;
|
||||
background: #ccc;
|
||||
transition:
|
||||
color 0.5s,
|
||||
background-color 0.5s;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { apiGetDays } from './client';
|
||||
import type { Schedule } from './models';
|
||||
import { formatRussianDate, formatTime, getRelativeDayName, timeAgo, formatTimeRange } from './date';
|
||||
import { formatRussianDate, cleanTime, getRelativeDayName, timeAgo, formatTimeRange } from './date';
|
||||
import { capitalizeFirstLetter } from './text';
|
||||
|
||||
const schedule = ref<Schedule>({ updateTime: "", days: [] })
|
||||
@ -17,12 +17,13 @@ onMounted(async () => {
|
||||
<div>
|
||||
<div v-for="day in schedule.days" :key="day.date" class="day-block">
|
||||
{{ capitalizeFirstLetter(formatRussianDate(day.date)) }}
|
||||
<span v-if="getRelativeDayName(day.date) !== ''">({{ getRelativeDayName(day.date) }})</span>
|
||||
<span v-if="getRelativeDayName(day.date) !== ''" class="relative-day-name">{{ getRelativeDayName(day.date)
|
||||
}}</span>
|
||||
<div v-for="(performance, index) in day.performances" :key="performance.name" class="performance-block">
|
||||
<hr v-if="index > 0" class="hr">
|
||||
<div v-if="performance.timeCollection !== '' && performance.timeCollection !== '-'"
|
||||
class="time-collection-block">
|
||||
Сбор: {{ formatTime(performance.timeCollection) }}
|
||||
Сбор: {{ cleanTime(performance.timeCollection) }}
|
||||
</div>
|
||||
<div>
|
||||
Время:
|
||||
@ -55,16 +56,18 @@ onMounted(async () => {
|
||||
|
||||
<style scoped>
|
||||
.day-block {
|
||||
border: solid 2px #000058;
|
||||
margin: 10px 0;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
font-weight: 700;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.time-collection-block {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 25px;
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
.place-block {
|
||||
@ -84,4 +87,12 @@ onMounted(async () => {
|
||||
.hr {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.relative-day-name {
|
||||
background-color: #70e5ff;
|
||||
padding: 3px 10px 6px 10px;
|
||||
border-radius: 15px;
|
||||
float: right;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -149,18 +149,6 @@ export function timeAgo(goDateStr: string): string {
|
||||
});
|
||||
}
|
||||
|
||||
export function formatTime(timeStr: string): string {
|
||||
if (!timeStr) {
|
||||
return "";
|
||||
}
|
||||
|
||||
return timeStr
|
||||
// 1. Убираем абсолютно все пробелы (включая табы и неразрывные пробелы)
|
||||
.replace(/\s+/g, "")
|
||||
// 2. Заменяем все точки на двоеточия
|
||||
.replace(/\./g, ":");
|
||||
}
|
||||
|
||||
export function formatTimeRange(text: string): string {
|
||||
if (!text) {
|
||||
return "";
|
||||
@ -185,3 +173,21 @@ export function formatTimeRange(text: string): string {
|
||||
.trim();
|
||||
}
|
||||
|
||||
|
||||
export function cleanTime(text: string): string {
|
||||
if (!text) return text;
|
||||
|
||||
// Ищем шаблон: 1-2 цифры, затем [двоеточие или точка] с возможными пробелами, затем 2 цифры
|
||||
const match = text.match(/\d{1,2}\s*[:.]\s*\d{2}/);
|
||||
|
||||
if (match) {
|
||||
// Берем найденный кусок (например, "8. 00")
|
||||
const extractedTime = match[0];
|
||||
|
||||
// Удаляем все пробелы и заменяем точку на двоеточие
|
||||
return extractedTime.replace(/\s+/g, '').replace('.', ':');
|
||||
}
|
||||
|
||||
// Если время не найдено, возвращаем исходный текст
|
||||
return text;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user