View | Details | Raw Unified | Return to bug 28963
Collapse All | Expand All

(-)a/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss (-1 / +2 lines)
Lines 1-4 Link Here
1
@import "vars";
1
@import "flatpickr_vars";
2
2
3
@-webkit-keyframes fpFadeInDown {
3
@-webkit-keyframes fpFadeInDown {
4
    from {
4
    from {
Lines 69-74 Link Here
69
    direction: ltr;
69
    direction: ltr;
70
    display: none;
70
    display: none;
71
    font-size: 14px;
71
    font-size: 14px;
72
    gap: 2px;
72
    line-height: 24px;
73
    line-height: 24px;
73
    opacity: 0;
74
    opacity: 0;
74
    padding: 0;
75
    padding: 0;
(-)a/koha-tmpl/intranet-tmpl/prog/css/src/_vars.scss (-2 / +2 lines)
Lines 2-10 $bezier: cubic-bezier(0.23, 1, 0.32, 1); Link Here
2
$slideTime: 400ms;
2
$slideTime: 400ms;
3
3
4
4
5
$daySize: 39px;
5
$daySize: 39px !default;
6
$padding: $daySize / 16;
6
$padding: $daySize / 16;
7
$dayMargin: 2px;
7
$dayMargin: 2px !default;
8
$daysWidth: $daySize * 7 + $dayMargin * 14 + $padding * 2 + 2;
8
$daysWidth: $daySize * 7 + $dayMargin * 14 + $padding * 2 + 2;
9
$calendarWidth: $daysWidth;
9
$calendarWidth: $daysWidth;
10
10
(-)a/koha-tmpl/intranet-tmpl/prog/css/src/calendar.scss (+149 lines)
Line 0 Link Here
1
$daySize: 45px;
2
$exception_bg: #B3D4FF;
3
$holiday_bg: #FFAEAE;
4
$repeatableweekly_bg: #FFFF99;
5
$repeatableyearly_bg: #FFCC66;
6
$selected: #B9DB88;
7
8
@import "flatpickr";
9
10
.controls {
11
    display: block;
12
    padding: 3px 0;
13
}
14
15
.key {
16
    line-height: 230%;
17
    padding: 3px;
18
    white-space: nowrap;
19
20
    &.exception {
21
        background-color: $exception_bg;
22
    }
23
24
    &.holiday {
25
        background-color: $holiday_bg;
26
    }
27
28
    &.repeatableweekly {
29
        background-color: $repeatableweekly_bg;
30
    }
31
32
    &.repeatableyearly {
33
        background-color: $repeatableyearly_bg;
34
    }
35
}
36
37
.flatpickr-day {
38
    &.selected {
39
        background-color: $selected;
40
        border: 0;
41
    }
42
43
    &.exception {
44
        background-color: $exception_bg;
45
46
        &.selected {
47
            border: 3px solid $selected;
48
        }
49
    }
50
51
    &.holiday {
52
        background-color: $holiday_bg;
53
54
        &.selected {
55
            border: 3px solid $selected;
56
        }
57
    }
58
59
    &.repeatableweekly {
60
        background-color: $repeatableweekly_bg;
61
62
        &.selected {
63
            border: 3px solid $selected;
64
        }
65
    }
66
67
    &.repeatableyearly {
68
        background-color: $repeatableyearly_bg;
69
70
        &.selected {
71
            border: 3px solid $selected;
72
        }
73
    }
74
}
75
76
#holidayexceptions th.exception {
77
    background-color: $exception_bg;
78
}
79
80
#holidaysunique th.holiday {
81
    background-color: $holiday_bg;
82
83
    &.selected {
84
        border: 2px solid #fff4c6;
85
    }
86
}
87
88
#holidayweeklyrepeatable th.repeatableweekly {
89
    background-color: $repeatableweekly_bg;
90
}
91
92
#holidaysyearlyrepeatable th.repeatableyearly {
93
    background-color: $repeatableyearly_bg;
94
}
95
96
.panel {
97
    border: 1px solid #B9D8D9;
98
    border-radius: 4px;
99
    box-shadow: none;
100
    padding: 0;
101
    display: none;
102
    margin: 1em 0;
103
    z-index: 1;
104
}
105
106
fieldset.brief {
107
    border: 0;
108
    border-radius: 4px;
109
    margin: 0;
110
}
111
112
#showHoliday {
113
    margin: .5em 0;
114
}
115
116
fieldset.brief ol {
117
    font-size: 100%;
118
}
119
120
fieldset.brief li,
121
fieldset.brief li.radio {
122
    padding: 0.2em 0;
123
}
124
125
#holidayweeklyrepeatable,
126
#holidaysyearlyrepeatable,
127
#holidaysunique,
128
#holidayexceptions {
129
    font-size: 90%;
130
    margin-bottom: 1em;
131
}
132
133
#calendar-container {
134
    margin: 1em 0;
135
}
136
137
#calendar-anchor {
138
    display: none;
139
}
140
141
.flatpickr-calendar {
142
    border-radius: 0;
143
    border: 1px solid #B9D8D9;
144
    box-shadow: none;
145
}
146
147
.dayContainer {
148
    gap: 3px;
149
}
(-)a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/holidays.tt (-70 / +70 lines)
Lines 41-51 Link Here
41
                            [% PROCESS options_for_libraries libraries => Branches.all( selected => branch ) %]
41
                            [% PROCESS options_for_libraries libraries => Branches.all( selected => branch ) %]
42
                        </select>
42
                        </select>
43
43
44
                        <!-- ******************************** FLAT PANELS ******************************************* -->
45
                        <!-- *****           Makes all the flat panel to deal with holidays                     ***** -->
46
                        <!-- **************************************************************************************** -->
47
48
                        <!-- ********************** Panel for showing already loaded holidays *********************** -->
49
                        <div class="panel" id="showHoliday">
44
                        <div class="panel" id="showHoliday">
50
                            <form action="/cgi-bin/koha/tools/exceptionHolidays.pl" method="post">
45
                            <form action="/cgi-bin/koha/tools/exceptionHolidays.pl" method="post">
51
                                <input type="hidden" id="showHolidayType" name="showHolidayType" value="" />
46
                                <input type="hidden" id="showHolidayType" name="showHolidayType" value="" />
Lines 76-82 Link Here
76
                                        </li>
71
                                        </li>
77
                                        <li class="dateinsert">
72
                                        <li class="dateinsert">
78
                                            <strong>To date: </strong>
73
                                            <strong>To date: </strong>
79
                                            <input type="text" id="datecancelrange" name="datecancelrange" size="20" value="[% datecancelrange | html %]" class="datepicker"/>
74
                                            <input type="text" id="datecancelrange" name="datecancelrange" size="20" value="[% datecancelrange | html %]" />
80
                                        </li>
75
                                        </li>
81
                                        <li>
76
                                        <li>
82
                                            <label for="showTitle">Title: </label><input type="text" name="showTitle" id="showTitle" size="35" />
77
                                            <label for="showTitle">Title: </label><input type="text" name="showTitle" id="showTitle" size="35" />
Lines 141-147 Link Here
141
                            </form>
136
                            </form>
142
                        </div> <!-- /#showHoliday -->
137
                        </div> <!-- /#showHoliday -->
143
138
144
                        <!-- ***************************** Panel to deal with new holidays **********************  -->
139
                        <!-- Panel to deal with new holidays -->
145
                        <div class="panel" id="newHoliday">
140
                        <div class="panel" id="newHoliday">
146
                            <form action="/cgi-bin/koha/tools/newHolidays.pl" method="post">
141
                            <form action="/cgi-bin/koha/tools/newHolidays.pl" method="post">
147
                                <fieldset class="brief">
142
                                <fieldset class="brief">
Lines 174-180 Link Here
174
                                        </li>
169
                                        </li>
175
                                        <li class="dateinsert">
170
                                        <li class="dateinsert">
176
                                            <strong>To date: </strong>
171
                                            <strong>To date: </strong>
177
                                            <input type="text" id="dateofrange" name="dateofrange" size="20" value="[% dateofrange | html %]" class="datepicker" />
172
                                            <input type="text" id="dateofrange" name="dateofrange" size="20" value="[% dateofrange | html %]" />
178
                                        </li>
173
                                        </li>
179
                                        <li>
174
                                        <li>
180
                                            <label for="title">Title: </label>
175
                                            <label for="title">Title: </label>
Lines 228-242 Link Here
228
                            </form>
223
                            </form>
229
                        </div> <!-- /#newHoliday -->
224
                        </div> <!-- /#newHoliday -->
230
225
231
                        <!-- *************************************************************************************** -->
226
                        <div id="calendar-container">
232
                        <!-- ******                          END OF FLAT PANELS                               ****** -->
227
                            <h3>Calendar information</h3>
233
                        <!-- *************************************************************************************** -->
228
                            <span id="calendar-anchor"></span>
234
229
                        </div>
235
                        <!-- ************************************************************************************** -->
236
                        <!-- ******                              MAIN SCREEN CODE                            ****** -->
237
                        <!-- ************************************************************************************** -->
238
                        <h3>Calendar information</h3>
239
                        <div id="jcalendar-container"></div>
240
                        <div style="margin-top: 2em;">
230
                        <div style="margin-top: 2em;">
241
                            <form action="copy-holidays.pl" method="post">
231
                            <form action="copy-holidays.pl" method="post">
242
                                <input type="hidden" name="from_branchcode" value="[% branch | html %]" />
232
                                <input type="hidden" name="from_branchcode" value="[% branch | html %]" />
Lines 497-531 Link Here
497
            location.href='/cgi-bin/koha/tools/holidays.pl?branch=' + branch + '&calendardate=' + "[% calendardate | html %]";
487
            location.href='/cgi-bin/koha/tools/holidays.pl?branch=' + branch + '&calendardate=' + "[% calendardate | html %]";
498
        }
488
        }
499
489
500
        function Help() {
490
        /**
501
            newin=window.open("/cgi-bin/koha/help.pl","KohaHelp",'width=600,height=600,toolbar=false,scrollbars=yes');
491
        * Build settings to be passed to the formatDay function for each day in the calendar
502
        }
492
        * @param  {object} dayElem - HTML node passed from Flatpickr
503
493
        * @return {void}
504
        /* This function gives css clases to each kind of day */
494
        */
505
        function dateStatusHandler(date) {
495
        function dateStatusHandler( dayElem ) {
506
            date = new Date(date);
496
            var day = dayElem.dateObj.getDate();
507
            var day = date.getDate();
497
            var month = dayElem.dateObj.getMonth() + 1;
508
            var month = date.getMonth() + 1;
498
            var year = dayElem.dateObj.getFullYear();
509
            var year = date.getFullYear();
499
            var weekDay = dayElem.dateObj.getDay();
510
            var weekDay = date.getDay();
511
            var dayMonth = month + '/' + day;
500
            var dayMonth = month + '/' + day;
512
            var dateString = year + '/' + month + '/' + day;
501
            var dateString = year + '/' + month + '/' + day;
513
            if (exception_holidays[dateString] != null) {
502
            if (exception_holidays[dateString] != null) {
514
                return [true, "exception", _("Exception: %s").format(exception_holidays[dateString].title)];
503
                formatDay( [ "exception", _("Exception: %s").format(exception_holidays[dateString].title)], dayElem );
515
            } else if ( week_days[weekDay] != null ){
504
            } else if ( week_days[weekDay] != null ){
516
                return [true, "repeatableweekly", _("Weekly holiday: %s").format(week_days[weekDay].title)];
505
                formatDay( [ "repeatableweekly", _("Weekly holiday: %s").format(week_days[weekDay].title)], dayElem );
517
            } else if ( day_month_holidays[dayMonth] != null ) {
506
            } else if ( day_month_holidays[dayMonth] != null ) {
518
                return [true, "repeatableyearly", _("Yearly holiday: %s").format(day_month_holidays[dayMonth].title)];
507
                formatDay( [ "repeatableyearly", _("Yearly holiday: %s").format(day_month_holidays[dayMonth].title)], dayElem );
519
            } else if (holidays[dateString] != null) {
508
            } else if (holidays[dateString] != null) {
520
                return [true, "holiday", _("Single holiday: %s").format(holidays[dateString].title)];
509
                formatDay( [ "holiday", _("Single holiday: %s").format(holidays[dateString].title)], dayElem );
521
            } else {
510
            } else {
522
                return [true, "normalday", _("Normal day")];
511
                formatDay( [ "normalday", _("Normal day")], dayElem );
523
            }
512
            }
524
        }
513
        }
525
514
526
        /* This function is in charge of showing the correct panel considering the kind of holiday */
515
        /**
527
        function dateChanged(calendar) {
516
        * Adds style and title attribute to a day on the calendar
528
            calendar = new Date(calendar);
517
        * @param  {object} settings - span class attribute ([0]) and title attribute ([1])
518
        * @param  {node}   dayElem  - HTML node passed from Flatpickr
519
        * @return {void}
520
        */
521
        function formatDay( settings, dayElem ){
522
            $(dayElem).attr("title", settings[1]).addClass( settings[0]);
523
        }
524
525
        /**
526
        * Triggers an action based on a click on a calendar day: If a holiday exists on
527
        * that day it loads an edit form. If there is no existing holiday one can be created
528
        * @param  {object} calendar - a Date object corresponding to the clicked day
529
        * @return {void}
530
        */
531
        function dateChanged( calendar ) {
529
            var day = calendar.getDate();
532
            var day = calendar.getDate();
530
            var month = calendar.getMonth() + 1;
533
            var month = calendar.getMonth() + 1;
531
            var year = calendar.getFullYear();
534
            var year = calendar.getFullYear();
Lines 579-585 Link Here
579
                "sDom": 't',
582
                "sDom": 't',
580
                "bPaginate": false
583
                "bPaginate": false
581
            }));
584
            }));
582
            var tables = $("#holidayexceptions,#holidaysyearlyrepeatable,#holidaysunique").DataTable($.extend(true, {}, dataTablesDefaults, {
585
            var tables = $("#holidayexceptions, #holidaysyearlyrepeatable, #holidaysunique").DataTable($.extend(true, {}, dataTablesDefaults, {
583
                "sDom": 't',
586
                "sDom": 't',
584
                "bPaginate": false,
587
                "bPaginate": false,
585
                "createdRow": function( row, data, dataIndex ) {
588
                "createdRow": function( row, data, dataIndex ) {
Lines 597-642 Link Here
597
            $("a.helptext").click(function(){
600
            $("a.helptext").click(function(){
598
                $(this).parent().find(".hint").toggle(); return false;
601
                $(this).parent().find(".hint").toggle(); return false;
599
            });
602
            });
600
            $("#dateofrange").datepicker({
603
601
                beforeShow: function() {
604
            var dateofrange = $("#dateofrange").flatpickr();
602
                    var startdate = $("#jcalendar-container").datepicker("getDate");
605
603
                    if (startdate !== null) {
606
            var datecancelrange = $("#datecancelrange").flatpickr();
604
                        var sd = new Date(startdate);
607
605
                        var ed = new Date($(this).datepicker("getDate"));
606
                        if (ed < sd) {
607
                            $(this).datepicker("setDate", startdate);
608
                            $(this).datepicker("option", "defaultDate", startdate);
609
                        }
610
                    }
611
                }
612
            });
613
            $("#datecancelrange").datepicker();
614
            $("#dateofrange").each(function () { this.value = "" });
608
            $("#dateofrange").each(function () { this.value = "" });
615
            $("#datecancelrange").each(function () { this.value = "" });
609
            $("#datecancelrange").each(function () { this.value = "" });
616
            $("#jcalendar-container").datepicker({
610
617
                beforeShowDay: function(thedate) {
611
            var maincalendar = $("#calendar-anchor").flatpickr({
618
                    var day = thedate.getDate();
612
                inline: true,
619
                    var month = thedate.getMonth() + 1;
613
                onReady: function(){
620
                    var year = thedate.getFullYear();
614
                    return;
621
                    var dateString = year + '/' + month + '/' + day;
615
                },
622
                    return dateStatusHandler(dateString);
616
                onDayCreate: function( dObj, dStr, fp, dayElem ){
617
                    /* for each day on the calendar, get the
618
                      correct status information for the date */
619
                    dateStatusHandler( dayElem );
623
                },
620
                },
624
                onSelect: function(dateText, inst) {
621
                onChange: function( selectedDates, dateStr, instance ){
625
                    dateChanged($(this).datepicker("getDate"));
622
                    var fromdate = selectedDates[0];
626
                    var enddate = $("#dateofrange").datepicker("getDate");
623
                    var enddate = dateofrange.selectedDates[0];
627
                    $("#dateofrange").datepicker("option", "defaultDate", $(this).datepicker("getDate"));
624
628
                    $("#dateofrange").datepicker( "option", "minDate", $(this).datepicker("getDate")); //ensure end date can't be before start date
625
                    dateChanged( fromdate );
629
                    if (enddate !== null) {
626
630
                        var ed = new Date(enddate);
627
                    dateofrange.set( 'defaultDate', fromdate );
631
                        var sd = new Date($(this).datepicker("getDate"));
628
                    dateofrange.set( 'minDate', fromdate );
632
                        if (ed < sd) {
629
633
                            $("#dateofrange").datepicker("setDate", $(this).datepicker("getDate"));
630
                    if ( enddate != undefined ) {
634
                            $("#dateofrange").datepicker("option", "defaultDate", enddate);
631
                        if ( enddate < fromdate ) {
632
                            dateofrange.set("defaultDate", fromdate);
633
                            dateofrange.setDate(fromdate);
635
                        }
634
                        }
636
                    }
635
                    }
636
637
                },
637
                },
638
                defaultDate: new Date("[% keydate | html %]")
638
                defaultDate: new Date("[% keydate | html %]")
639
            });
639
            });
640
640
            $(".hidePanel").on("click",function(){
641
            $(".hidePanel").on("click",function(){
641
                if( $(this).hasClass("showHoliday") ){
642
                if( $(this).hasClass("showHoliday") ){
642
                    hidePanel("showHoliday");
643
                    hidePanel("showHoliday");
643
- 

Return to bug 28963