Commit b66d8b9d authored by Magnus Westergaard's avatar Magnus Westergaard
Browse files

DEICH-5615: Clean up deviating opening hours when user toggles extended...

DEICH-5615: Clean up deviating opening hours when user toggles extended opening hours. Update datepicker date format.
parent e719c628
......@@ -4,9 +4,10 @@
const dispatch = createEventDispatcher()
export let isLoading = false
export let hideButtons = false
export let width = "narrow"
</script>
<div class="modal modal--visible">
<div class={`modal modal--visible modal--${width}`}>
<button class="overlay overlay--for-modal overlay--visible" on:click="{() => dispatch('cancel')}"></button>
<div class="modal__inner">
<header class="modal-card-head">
......
......@@ -43,6 +43,7 @@
options = {}
options.onChange = []
options.mode = "range"
options.dateFormat = "d.m.Y"
options.onChange.push((selectedDates) => {
if (selectedDates.length === 2) {
let periodStart = selectedDates[0]
......
......@@ -79,6 +79,10 @@
export function toggleManned(idx) {
values[idx].manned = !values[idx].manned
if (!values[idx].manned) {
values[idx].mannedFrom = null
values[idx].mannedTo = null
}
values = values
}
......
<script>
import EditTime from "./EditTime.svelte"
import Modal from "../Modal.svelte"
import { dayEnumToDay } from "../../lib/util.js"
import moment from "moment"
export let branch
let eohToggleConsequences = null
function requestToggleExtendedOpeningHours() {
// check if any deviating opening hours will be affected by toggling
if (branch.extendedOpeningHours) {
let dohToHaveEohRemoved = []
let dohToBeRemoved = []
for (const doh of branch.deviatingOpeningHours) {
if (doh.open) {
if (doh.manned) {
dohToHaveEohRemoved.push(doh)
} else {
dohToBeRemoved.push(doh)
}
}
}
if (dohToHaveEohRemoved.length > 0 || dohToBeRemoved.length > 0) {
eohToggleConsequences = {
dohToBeRemoved,
dohToHaveEohRemoved
}
} else {
toggleExtendedOpeningHours()
}
} else {
toggleExtendedOpeningHours()
}
}
function confirmToggleEoh() {
// filter out deviating opening hours with only extended opening hours
let mannedDohs = branch.deviatingOpeningHours.filter(doh => doh.manned)
// only keep manned opening hours for the remaining deviating hours
for (const doh of mannedDohs) {
if (doh.open) {
doh.openFrom = null
doh.openTo = null
}
}
branch.deviatingOpeningHours = mannedDohs
toggleExtendedOpeningHours()
eohToggleConsequences = null
}
function toggleExtendedOpeningHours() {
branch.extendedOpeningHours = !branch.extendedOpeningHours
setTimeout(() => {
branch.extendedOpeningHours = !branch.extendedOpeningHours
}, 50) // workaround to make false -> true transition render correctly
}
function setMannedFrom(day, mannedFrom) {
......@@ -27,8 +79,49 @@
// so we update this derived field, which can be bound
day.unmanned = wasMannedPreviously
}
function formatPeriod (doh) {
if (!doh.periodStart) {
return "Innslag uten dato"
}
const prettyDohStart = moment(doh.periodStart).format("DD.MM.YYYY")
const prettyDohEnd = moment(doh.periodEnd).format("DD.MM.YYYY")
return prettyDohStart === prettyDohEnd ? prettyDohStart : `${prettyDohStart} - ${prettyDohEnd}`
}
</script>
<style>
input[type="checkbox"] {
margin-right: 1em;
}
label {
font-weight: normal;
}
label:hover {
cursor: pointer;
}
th {
text-align: left;
padding-left: var(--spacing-3);
}
.tr-disabled {
color: #aaa;
}
.tr-disabled .bold {
font-weight: bold;
color: #000;
}
input[type="checkbox"] {
margin-right: 0;
}
</style>
<div class="branch-manned-opening-hours">
<div class="grid">
<div class="grid__item large--two-fifths">
......@@ -71,40 +164,61 @@
</div>
<div class="grid__item large--three-fifths">
<input type="checkbox" checked={branch.extendedOpeningHours} id="hasExtended"
on:input="{() => toggleExtendedOpeningHours(branch)}" />
on:click|preventDefault="{() => requestToggleExtendedOpeningHours()}" />
<label for="hasExtended"> Biblioteket er meråpent</label>
</div>
</div>
</div>
<style>
input[type="checkbox"] {
margin-right: 1em
}
label {
font-weight: normal
}
label:hover {
cursor: pointer
}
th {
text-align: left;
padding-left: var(--spacing-3);
}
.tr-disabled {
color: #aaa
}
.tr-disabled .bold {
font-weight: bold;
color: #000
}
input[type="checkbox"] {
margin-right: 0;
}
</style>
{#if eohToggleConsequences}
<Modal
width="medium"
on:confirm={confirmToggleEoh}
on:cancel={() => (eohToggleConsequences = null)}
>
<div slot="content">
<div class="block block--top-4">
<p class="text text--error">
Det finnes avvikende åpningstider som vil endres og/eller slettes dersom du skrur av meråpent for dette biblioteket:
</p>
</div>
{#if eohToggleConsequences.dohToHaveEohRemoved.length > 0}
<div class="block block--top-2">
<p class="text">
Meråpenttider vil tas vekk fra følgende:
</p>
<div>
<ul class="list--bulleted">
{#each eohToggleConsequences.dohToHaveEohRemoved as doh}
<li>
{formatPeriod(doh)}
</li>
{/each}
</ul>
</div>
</div>
{/if}
{#if eohToggleConsequences.dohToBeRemoved.length > 0}
<div class="block block--top-2">
<p class="text">
Følgende vil slettes, fordi ingen bemannet åpningstid er angitt:
</p>
<div>
<ul class="list--bulleted">
{#each eohToggleConsequences.dohToBeRemoved as doh}
<li>
{formatPeriod(doh)}
</li>
{/each}
</ul>
</div>
</div>
{/if}
<div class="block block--top-4">
<p>Dersom du vil rydde i avvikende åpningstider selv, kan du velge Avbryt. Hvis ikke, velg OK for å bekrefte at endringene kan gjøres automatisk.</p>
</div>
</div>
<span slot="confirmButtonLabel">OK</span>
<span slot="cancelButtonLabel">Avbryt</span>
</Modal>
{/if}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment