From bf3dc6775453cd647d42f38ff2f99ad1d11078b4 Mon Sep 17 00:00:00 2001 From: yyc12345 Date: Wed, 7 Apr 2021 15:22:53 +0800 Subject: [PATCH] fix various bugs --- src/static/css/datetimepicker.css | 5 +- src/static/js/datetime.js | 4 +- src/static/js/datetimepicker.js | 59 ++++++++++++------- src/static/js/page/calendar.js | 7 ++- src/static/js/page/event.js | 46 ++++++++++++++- src/templates/calendar.html | 6 +- src/templates/event.html | 95 +++---------------------------- 7 files changed, 106 insertions(+), 116 deletions(-) diff --git a/src/static/css/datetimepicker.css b/src/static/css/datetimepicker.css index 51d77f2..f0fc54b 100644 --- a/src/static/css/datetimepicker.css +++ b/src/static/css/datetimepicker.css @@ -29,6 +29,9 @@ div.perfectTable > div > div { display: flex; justify-content: center; + + padding-top: 1rem; + padding-bottom: 1rem; } div.perfectTable > div { @@ -95,7 +98,7 @@ header.pickerHeader { display: flex; flex-flow: row; - flex-grow: 1; + flex-grow: 0; flex-basis: 0; flex-shrink: 0; diff --git a/src/static/js/datetime.js b/src/static/js/datetime.js index dcc4a3e..f4cf14f 100644 --- a/src/static/js/datetime.js +++ b/src/static/js/datetime.js @@ -3,8 +3,8 @@ var ccn_datetime_monthDayCount = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 var ccn_datetime_MIN_YEAR = 1950; var ccn_datetime_MAX_YEAR = 2200; -var ccn_datetime_MIN_DATETIME = new Date(Date.UTC(ccn_datetime_MIN_YEAR, 1, 1, 0, 0, 0, 0)); -var ccn_datetime_MAX_DATETIME = new Date(Date.UTC(ccn_datetime_MAX_YEAR, 1, 1, 0, 0, 0, 0)); +var ccn_datetime_MIN_DATETIME = new Date(Date.UTC(ccn_datetime_MIN_YEAR, 0, 1, 0, 0, 0, 0)); +var ccn_datetime_MAX_DATETIME = new Date(Date.UTC(ccn_datetime_MAX_YEAR, 0, 1, 0, 0, 0, 0)); var ccn_datetime_MIN_TIMESTAMP = Math.floor(ccn_datetime_MIN_DATETIME.getTime() / 60000); var ccn_datetime_MAX_TIMESTAMP = Math.floor(ccn_datetime_MAX_DATETIME.getTime() / 60000); diff --git a/src/static/js/datetimepicker.js b/src/static/js/datetimepicker.js index 9c3df4c..d5b37a3 100644 --- a/src/static/js/datetimepicker.js +++ b/src/static/js/datetimepicker.js @@ -116,6 +116,7 @@ function ccn_datetimepicker_Modal(mode, pickerIndex, isUTC) { } function ccn_datetimepicker_Confirm() { + // update and call callback func ccn_datetimepicker_Set( ccn_datetimepicker_pickerIndex, ccn_datetimepicker_internalDateTime, @@ -211,7 +212,7 @@ function ccn_datetimepicker_RefreshDisplay(tab) { var gottenYear = ccn_datetimepicker_displayCacheDateTime.getFullYear(); var gottenMonth = ccn_datetimepicker_displayCacheDateTime.getMonth() + 1; var counter = -ccn_datetime_DayOfWeek(gottenYear, gottenMonth, 1); - var days = ccn_datetime_monthDayCount[gottenMonth - 1] + ((gottenMonth == 2 && ccn_datetime_IsLeapYear(year)) ? 1 : 0); + var days = ccn_datetime_monthDayCount[gottenMonth - 1] + ((gottenMonth == 2 && ccn_datetime_IsLeapYear(gottenYear)) ? 1 : 0); for(var i = 0; i < 6; i++) { for(var j = 0; j < 7; j++, counter++) { var ele = $('#ccn-datetimepiacker-panelDay-table > div:nth-child({0}) > div:nth-child({1})'.format(i + 2, j + 1)); @@ -356,9 +357,17 @@ function ccn_datetimepicker_ClickDay() { function ccn_datetimepicker_StartDragHour() { ccn_datetimepicker_enableHourDrag = true; } function ccn_datetimepicker_DraggingHour(e) { - var offset = $('#ccn-datetimepicker-panelHour').offset(); - var x = e.pageX - offset.left - ccn_datetimepicker_dialPlateRadius; - var y = -(e.pageY - offset.top - ccn_datetimepicker_dialPlateRadius); + if (!ccn_datetimepicker_enableHourDrag) return; + + var ele = $('#ccn-datetimepicker-panelHour') + var offset = { + left: ele.offset().left, + top: ele.offset().top, + width: ele.width(), + height: ele.height() + } + var x = (e.pageX - offset.left) / width * ccn_datetimepicker_dialPlateWidth - ccn_datetimepicker_dialPlateRadius; + var y = -((e.pageY - offset.top) / height * ccn_datetimepicker_dialPlateWidth - ccn_datetimepicker_dialPlateRadius); var distance = Math.sqrt(x * x + y * y); var angle = Math.asin(y / distance); @@ -392,9 +401,17 @@ function ccn_datetimepicker_StopDragHour() { function ccn_datetimepicker_StartDragMinute() { ccn_datetimepicker_enableMinuteDrag = true; } function ccn_datetimepicker_DraggingMinute(e) { - var offset = $('#ccn-datetimepicker-panelMinute').offset(); - var x = e.pageX - offset.left - ccn_datetimepicker_dialPlateRadius; - var y = -(e.pageY - offset.top - ccn_datetimepicker_dialPlateRadius); + if (!ccn_datetimepicker_enableMinuteDrag) return; + + var ele = $('#ccn-datetimepicker-panelMinute') + var offset = { + left: ele.offset().left, + top: ele.offset().top, + width: ele.width(), + height: ele.height() + } + var x = (e.pageX - offset.left) / offset.width * ccn_datetimepicker_dialPlateWidth - ccn_datetimepicker_dialPlateRadius; + var y = -((e.pageY - offset.top) / offset.height * ccn_datetimepicker_dialPlateWidth - ccn_datetimepicker_dialPlateRadius); var distance = Math.sqrt(x * x + y * y); var angle = Math.asin(y / distance); @@ -434,19 +451,23 @@ function ccn_datetimepicker_ClampDateTime(dateObj) { function ccn_datetimepicker_Set(pickerIndex, dt, isUTC, mode) { var ele = $('[datetimepicker=' + pickerIndex + ']'); - if (mode < ccn_datetimepicker_tabType.year) return; - ele.attr('datetimepicker-year', isUTC ? dt.getUTCFullYear() : dt.getFullYear()); - if (mode < ccn_datetimepicker_tabType.month) return; - ele.attr('datetimepicker-month', (isUTC ? dt.getUTCMonth() : dt.getMonth()) + 1); - if (mode < ccn_datetimepicker_tabType.day) return; - ele.attr('datetimepicker-day', isUTC ? dt.getUTCDate() : dt.getDate()); - if (mode < ccn_datetimepicker_tabType.hour) return; - ele.attr('datetimepicker-hour', isUTC ? dt.getUTCHours() : dt.getHours()); - if (mode < ccn_datetimepicker_tabType.minute) return; - ele.attr('datetimepicker-minute', isUTC ? dt.getUTCMinutes() : dt.getMinutes()); + while(true) { + if (mode < ccn_datetimepicker_tabType.year) break; + ele.attr('datetimepicker-year', isUTC ? dt.getUTCFullYear() : dt.getFullYear()); + if (mode < ccn_datetimepicker_tabType.month) break; + ele.attr('datetimepicker-month', (isUTC ? dt.getUTCMonth() : dt.getMonth()) + 1); + if (mode < ccn_datetimepicker_tabType.day) break; + ele.attr('datetimepicker-day', isUTC ? dt.getUTCDate() : dt.getDate()); + if (mode < ccn_datetimepicker_tabType.hour) break; + ele.attr('datetimepicker-hour', isUTC ? dt.getUTCHours() : dt.getHours()); + if (mode < ccn_datetimepicker_tabType.minute) break; + ele.attr('datetimepicker-minute', isUTC ? dt.getUTCMinutes() : dt.getMinutes()); - if (typeof(ele.prop('callbackFunc')) == 'function') - ele.prop('callbackFunc')(); + break; + } + + if (typeof(ele.prop('funcs')) != 'undefined' && typeof(ele.prop('funcs').callback) == 'function') + ele.prop('funcs').callback(); } function ccn_datetimepicker_Get(pickerIndex, isUTC) { diff --git a/src/static/js/page/calendar.js b/src/static/js/page/calendar.js index fb6faa5..74a290d 100644 --- a/src/static/js/page/calendar.js +++ b/src/static/js/page/calendar.js @@ -61,9 +61,12 @@ $(document).ready(function() { $('#ccn-calendar-collection-btnRefresh').click(ccn_calendar_collection_Refresh); $('#ccn-calendar-calendar-btnJump') - .prop('callbackFunc', ccn_calendar_calendar_btnRefresh) + .prop('funcs', {callback: ccn_calendar_calendar_btnRefresh}) .click(function() { - ccn_datetimepicker_Modal(ccn_datetimepicker_tabType.month, 1, false); + ccn_datetimepicker_Modal( + ccn_datetimepicker_tabType.month, + 1, + false); }); $('#ccn-calendar-calendar-btnToday').click(ccn_calendar_calendar_btnToday); $('#ccn-calendar-calendar-btnAdd').click(ccn_calendar_calendar_btnAdd); diff --git a/src/static/js/page/event.js b/src/static/js/page/event.js index ff8f967..e6b6dd6 100644 --- a/src/static/js/page/event.js +++ b/src/static/js/page/event.js @@ -37,6 +37,15 @@ $(document).ready(function() { $('#ccn-event-btnCancel').click(ccn_event_btnCancel); $('#ccn-event-btnSpot').click(ccn_event_btnSpot); $('#ccn-event-btnFullDay').click(ccn_event_btnFullDay); + $('#ccn-event-btnStartDateTime') + .prop('funcs', {callback: function() {ccn_event_UpdateDateTimePickerButton(1);}}) + .click(ccn_event_btnDateTimePicker); + $('#ccn-event-btnEndDateTime') + .prop('funcs', {callback: function() {ccn_event_UpdateDateTimePickerButton(2);}}) + .click(ccn_event_btnDateTimePicker); + $('#ccn-event-btnLoopStopDateTime') + .prop('funcs', {callback: function() {ccn_event_UpdateDateTimePickerButton(3);}}) + .click(ccn_event_btnDateTimePicker); // init form ccn_event_Init(); @@ -60,9 +69,6 @@ function ccn_event_Init() { .attr('step', 1) .val(1); - // now, init 3 datetimepicker - //ccn_datetimepicker_Init(); - // in there, we need get uuid from meta var uuid = $('meta[name=uuid]').attr('content'); if (uuid != "") @@ -242,6 +248,26 @@ function ccn_event_RefreshLoopMonthType() { $('#ccn-event-loopMonth-textD').text($.i18n.prop('ccn-i18n-event-loopWeek-optionD').format(data[4], data[5] + 1)); } +function ccn_event_UpdateDateTimePickerButton(index) { + switch(index) { + case 1: + $('#ccn-event-btnStartDateTime-text').text( + ccn_datetimepicker_Get(1, false).toLocaleString() + ); + break; + case 2: + $('#ccn-event-btnEndDateTime-text').text( + ccn_datetimepicker_Get(2, false).toLocaleString() + ); + break; + case 3: + $('#ccn-event-btnLoopStopDateTime-text').text( + ccn_datetimepicker_Get(3, false).toLocaleDateString() + ); + break; + } +} + // return undefined to indicate an error // or // [belongTo, title, description, eventDateTimeStart, eventDateTimeEnd, timezoneOffset, loopRules] @@ -365,6 +391,20 @@ function ccn_event_btnFullDay() { ccn_datetimepicker_Set(2, datetime, false); } +function ccn_event_btnDateTimePicker() { + switch(parseInt($(this).attr('datetimepicker'))) { + case 1: + ccn_datetimepicker_Modal(ccn_datetimepicker_tabType.minute, 1, false); + break; + case 2: + ccn_datetimepicker_Modal(ccn_datetimepicker_tabType.minute, 2, false); + break; + case 3: + ccn_datetimepicker_Modal(ccn_datetimepicker_tabType.day, 3, false); + break; + } +} + function ccn_event_btnCancel() { window.location.href = '/web/calendar'; } diff --git a/src/templates/calendar.html b/src/templates/calendar.html index 23468f3..ffc3287 100644 --- a/src/templates/calendar.html +++ b/src/templates/calendar.html @@ -55,14 +55,14 @@ -