Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-11-10 06:08:25 +00:00
Code Issues Actions Projects Releases Wiki Activity

finalization of my calendar ranges

Browse Source
This commit is contained in:
Julien Fastré
2022-06-30 17:40:43 +02:00
parent 9e93e2a3f9
commit 4aa8436399
6 changed files with 71 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue
View File

@@ -1,11 +1,20 @@
<template>
<div class="row">
<div class="col-sm">
<label>Localisation</label>
<vue-multiselect v-model="pickedLocation" :options="locations" :label="'name'" :track-by="'id'"></vue-multiselect>
<label class="form-label">Lieu des plages de disponibilités créées</label>
<vue-multiselect
v-model="pickedLocation"
:options="locations"
:label="'name'"
:track-by="'id'"
:selectLabel="'Presser \'Entrée\' pour choisir'"
:selectedLabel="'Choisir'"
:deselectLabel="'Presser \'Entrée\' pour enlever'"
:placeholder="'Choisir'"
></vue-multiselect>
</div>
</div>
<div class="display-options row justify-content-between">
<div class="display-options row justify-content-between" style="margin-top: 1rem;">
<div class="col-sm col-xs-12">
<div class="input-group mb-3">
<label class="input-group-text" for="slotDuration">Durée des créneaux</label>
@@ -51,9 +60,11 @@
</div>
<div class="col-sm col-xs-12">
<div class="float-end">
<div class="form-check form-switch">
<input id="showHideWE" class="form-check-input mt-0" type="checkbox" v-model="showWeekends">
<label for="showHideWE" class="form-check-label">Week-ends</label>
<div class="form-check input-group">
<span class="input-group-text">
<input id="showHideWE" class="mt-0" type="checkbox" v-model="showWeekends">
</span>
<label for="showHideWE" class="form-check-label input-group-text">Week-ends</label>
</div>
</div>
</div>
@@ -72,18 +83,26 @@
</FullCalendar>
<div id="copy-widget">
<h4 class="chill-red" style="margin-top: 2rem;">{{ $t('copy_range_from_to') }}</h4>
<div style="display: flex; margin-top: 1rem;">
<div class="col-sm-3" style="margin-right: 1rem">
<input class="form-control" type="date" v-model="copyFrom" />
<div class="container">
<div class="row align-items-center">
<div class="col-sm-4 col-xs-12">
<h6 class="chill-red">{{ $t('copy_range_from_to') }}</h6>
</div>
<div class="col-sm-3 col-xs-12">
<input class="form-control" type="date" v-model="copyFrom" />
</div>
<div class="col-sm-1 col-xs-12" style="text-align: center; font-size: x-large;">
<i class="fa fa-angle-double-right"></i>
</div>
<div class="col-sm-3 col-xs-12" >
<input class="form-control" type="date" v-model="copyTo" />
</div>
<div class="col-sm-1">
<button class="btn btn-action" @click="copyDay">
{{ $t('copy_range') }}
</button>
</div>
</div>
<i class="fa fa-angle-double-right" style="font-size: 2rem; margin-right: 1rem"></i>
<div class="col-sm-3" style="margin-right: 1rem">
<input class="form-control" type="date" v-model="copyTo" />
</div>
<button class="btn btn-action" @click="copyDay">
{{ $t('copy_range') }}
</button>
</div>
</div>
@@ -108,17 +127,20 @@ import frLocale from '@fullcalendar/core/locales/fr';
import interactionPlugin, {DropArg, EventResizeDoneArg} from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
import {EventApi, DateSelectArg, EventDropArg, EventClickArg} from "@fullcalendar/core";
import {ISOToDate, ISOToDatetime} from "../../../../../ChillMainBundle/Resources/public/chill/js/date";
import {ISOToDate} from "../../../../../ChillMainBundle/Resources/public/chill/js/date";
import VueMultiselect from "vue-multiselect";
import {Location} from "../../../../../ChillMainBundle/Resources/public/types";
import EditLocation from "./Components/EditLocation.vue";
import {useI18n} from "vue-i18n";
const store = useStore(key);
const {t} = useI18n();
const showWeekends = ref(false);
const slotDuration = ref('00:15:00');
const slotMinTime = ref('08:00:00');
const slotMaxTime = ref('19:00:00');
const slotDuration = ref('00:05:00');
const slotMinTime = ref('09:00:00');
const slotMaxTime = ref('18:00:00');
const copyFrom = ref<string | null>(null);
const copyTo = ref<string | null>(null);
const editLocation = ref<InstanceType<typeof EditLocation> | null>(null)
@@ -271,5 +293,11 @@ function copyDay() {
</script>
<style scoped>
#copy-widget {
position: sticky;
bottom: 0px;
background-color: white;
z-index: 9999999999;
padding: 0.25rem 0 0.25rem;
}
</style>