92 lines
4.2 KiB
HTML
92 lines
4.2 KiB
HTML
<ion-page>
|
|
<ion-content>
|
|
<div class="timer-update-container">
|
|
<div class="page-header">
|
|
<button class="back-button" type="button" @click="goBack">
|
|
<ion-icon :icon="arrowBackOutline"></ion-icon>
|
|
Назад
|
|
</button>
|
|
<h1>{{ modeLabel }}</h1>
|
|
<p>Подстрой параметры под нужный режим работы.</p>
|
|
</div>
|
|
|
|
<div class="form-shell">
|
|
<div v-if="loading" class="state-card">Загрузка таймера...</div>
|
|
<div v-else-if="error" class="state-card error">{{ error }}</div>
|
|
|
|
<form v-else class="timer-form" @submit.prevent="saveTimer">
|
|
<label class="field-card">
|
|
<span class="field-label">Название</span>
|
|
<input
|
|
class="title-input"
|
|
:class="{ 'title-input--error': titleError }"
|
|
v-model="form.title"
|
|
type="text"
|
|
maxlength="100"
|
|
placeholder="Например, Утренний фокус"
|
|
/>
|
|
<p v-if="titleError" class="field-error">{{ titleError }}</p>
|
|
</label>
|
|
|
|
<section class="field-card tomato-card">
|
|
<div class="field-head">
|
|
<span class="field-label">Количество помидоров</span>
|
|
</div>
|
|
<div class="tomato-stage">
|
|
<div class="tomato-display">
|
|
<span class="tomato-emoji">🍅</span>
|
|
<strong>{{ form.count_pomodoro }}</strong>
|
|
</div>
|
|
<input
|
|
v-model.number="form.count_pomodoro"
|
|
type="range"
|
|
:min="LIMITS.countPomodoro.min"
|
|
:max="LIMITS.countPomodoro.max"
|
|
@input="onSliderInput('count_pomodoro', LIMITS.countPomodoro.min, LIMITS.countPomodoro.max, $event)"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="field-card slider-card">
|
|
<div class="field-head">
|
|
<span class="field-label">Длительность помидора</span>
|
|
</div>
|
|
<div class="slider-wrap">
|
|
<div class="value-pill">{{ form.pomodoro_time }}<small>мин</small></div>
|
|
<input v-model.number="form.pomodoro_time" type="range" :min="LIMITS.pomodoroTime.min" :max="LIMITS.pomodoroTime.max" @input="onSliderInput('pomodoro_time', LIMITS.pomodoroTime.min, LIMITS.pomodoroTime.max, $event)" />
|
|
</div>
|
|
<p class="range-note">Пределы: {{ LIMITS.pomodoroTime.min }} — {{ LIMITS.pomodoroTime.max }} минут</p>
|
|
</section>
|
|
|
|
<section class="field-card slider-card">
|
|
<div class="field-head">
|
|
<span class="field-label">Короткий перерыв</span>
|
|
</div>
|
|
<div class="slider-wrap">
|
|
<div class="value-pill">{{ form.break_time }}<small>мин</small></div>
|
|
<input v-model.number="form.break_time" type="range" :min="LIMITS.breakTime.min" :max="LIMITS.breakTime.max" @input="onSliderInput('break_time', LIMITS.breakTime.min, LIMITS.breakTime.max, $event)" />
|
|
</div>
|
|
<p class="range-note">Пределы: {{ LIMITS.breakTime.min }} — {{ LIMITS.breakTime.max }} минут</p>
|
|
</section>
|
|
|
|
<section class="field-card slider-card">
|
|
<div class="field-head">
|
|
<span class="field-label">Длинный перерыв</span>
|
|
</div>
|
|
<div class="slider-wrap">
|
|
<div class="value-pill">{{ form.break_long_time }}<small>мин</small></div>
|
|
<input v-model.number="form.break_long_time" type="range" :min="LIMITS.breakLongTime.min" :max="LIMITS.breakLongTime.max" @input="onSliderInput('break_long_time', LIMITS.breakLongTime.min, LIMITS.breakLongTime.max, $event)" />
|
|
</div>
|
|
<p class="range-note">Пределы: {{ LIMITS.breakLongTime.min }} — {{ LIMITS.breakLongTime.max }} минут</p>
|
|
</section>
|
|
|
|
<button class="save-button" type="submit">
|
|
<ion-icon :icon="checkmarkOutline"></ion-icon>
|
|
Сохранить и открыть
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</ion-content>
|
|
</ion-page>
|