From 6468365f429f2ba87069a6165eaec6a55e44cdf4 Mon Sep 17 00:00:00 2001 From: yyc12345 Date: Wed, 10 Mar 2021 16:47:44 +0800 Subject: [PATCH] finish a half of datetimepicker --- src/static/css/datetimepicker.css | 50 ++++++++ src/static/i18n/strings_en-US.properties | 3 + src/static/i18n/strings_zh-CN.properties | 3 + src/static/js/datetimepicker.js | 4 + src/static/js/page/calendar.js | 1 + src/static/js/page/event.js | 6 +- src/static/js/template.js | 132 +++++--------------- src/static/tmpl/datetimepicker.tmpl | 148 +++++++++++++++++++++++ src/templates/calendar.html | 2 + src/templates/event.html | 2 + 10 files changed, 246 insertions(+), 105 deletions(-) create mode 100644 src/static/css/datetimepicker.css create mode 100644 src/static/tmpl/datetimepicker.tmpl diff --git a/src/static/css/datetimepicker.css b/src/static/css/datetimepicker.css new file mode 100644 index 0000000..dacdfb3 --- /dev/null +++ b/src/static/css/datetimepicker.css @@ -0,0 +1,50 @@ +div.perfectTable { + display: flex; + flex-flow: column; +} + +/* +div.perfectTable > div > div:nth-child(1) { + border-left: 1px solid black; +} + +div.perfectTable > div:nth-child(1) > div { + border-top: 1px solid black; +} +*/ + +div.perfectTable > div > div { + /*border-top: 0 solid black; + border-left: 0 solid black; + border-right: 1px solid black; + border-bottom: 1px solid black; + + padding: 0.75em;*/ + + flex-grow: 1; + flex-basis: 0; + flex-shrink: 0; + + overflow: hidden; + + display: flex; + justify-content: center; +} + +div.perfectTable > div { + display: flex; + flex-flow: row; +} + + +div.pickerContainer { + display: flex; + align-items: center; + flex-flow: row; +} + +div.pickerContainer > div { + flex-grow: 1; + flex-shrink: 1; + flex-basis: 0; +} \ No newline at end of file diff --git a/src/static/i18n/strings_en-US.properties b/src/static/i18n/strings_en-US.properties index 6d97250..ca927e0 100644 --- a/src/static/i18n/strings_en-US.properties +++ b/src/static/i18n/strings_en-US.properties @@ -43,6 +43,9 @@ ccn-i18n-universal-month-12=December ccn-i18n-messagebox-confirm=OK ccn-i18n-messagebox-title=Notification +ccn-i18n-datetimepicker-confirm=OK +ccn-i18n-datetimepicker-cancel=Cancel + ccn-i18n-js-fail-login=Fail to login. Please check your username or password. ccn-i18n-js-fail-logout=Fail to logout due to unknow reason. Consider refreshing page to solve problem. ccn-i18n-js-fail-get=A get operation failed. It may caused by server internal error or your limited permission. Refreshing page may fix system problem. Before refreshing page, please backup all your unsaved data. diff --git a/src/static/i18n/strings_zh-CN.properties b/src/static/i18n/strings_zh-CN.properties index 1dda84a..a4b7eb2 100644 --- a/src/static/i18n/strings_zh-CN.properties +++ b/src/static/i18n/strings_zh-CN.properties @@ -43,6 +43,9 @@ ccn-i18n-universal-month-12=12月 ccn-i18n-messagebox-confirm=确认 ccn-i18n-messagebox-title=通知 +ccn-i18n-datetimepicker-confirm=确认 +ccn-i18n-datetimepicker-cancel=取消 + ccn-i18n-js-fail-login=登陆失败，请检查您的用户名和密码。 ccn-i18n-js-fail-logout=由于未知原因，登出失败，请考虑刷新页面解决问题。 ccn-i18n-js-fail-get=一个获取操作失败了，可能是系统错误或者您的权限不足。刷新页面可能会解决问题。请在刷新页面前备份好自己的数据。 diff --git a/src/static/js/datetimepicker.js b/src/static/js/datetimepicker.js index 5535aa3..681880a 100644 --- a/src/static/js/datetimepicker.js +++ b/src/static/js/datetimepicker.js @@ -1,3 +1,7 @@ +function ccn_datetimepicker_Insert() { + $('body').append(ccn_template_datetimepicker.render()); +} + function ccn_datetimepicker_Init() { var nowtime = new Date(); diff --git a/src/static/js/page/calendar.js b/src/static/js/page/calendar.js index 652e230..bed607e 100644 --- a/src/static/js/page/calendar.js +++ b/src/static/js/page/calendar.js @@ -31,6 +31,7 @@ $(document).ready(function() { ccn_calendar_calendar_LoadCalendarBody(); // init datetimepicker + ccn_datetimepicker_Insert(); ccn_datetimepicker_Init(); // bind tab control switcher and set current tab diff --git a/src/static/js/page/event.js b/src/static/js/page/event.js index c2536f3..8c8f578 100644 --- a/src/static/js/page/event.js +++ b/src/static/js/page/event.js @@ -18,6 +18,10 @@ $(document).ready(function() { ccn_messagebox_Insert(); ccn_messagebox_BindEvent(); + // init datetimepicker + ccn_datetimepicker_Insert(); + ccn_datetimepicker_Init(); + // apply i18n ccn_i18n_LoadLanguage(); ccn_i18n_ApplyLanguage(); @@ -58,7 +62,7 @@ function ccn_event_Init() { .val(1); // now, init 3 datetimepicker - ccn_datetimepicker_Init(); + //ccn_datetimepicker_Init(); // in there, we need get uuid from meta var uuid = $('meta[name=uuid]').attr('content'); diff --git a/src/static/js/template.js b/src/static/js/template.js index 2ef0736..1122ff5 100644 --- a/src/static/js/template.js +++ b/src/static/js/template.js @@ -1,5 +1,6 @@ var ccn_template_headerNav = undefined; var ccn_template_messagebox = undefined; +var ccn_template_datetimepicker = undefined; var ccn_template_calendarItem = undefined; var ccn_template_scheduleItem = undefined; var ccn_template_ownedItem = undefined; @@ -12,115 +13,38 @@ var ccn_template_optionItem = undefined; var ccn_template_tokenItem = undefined; function ccn_template_Load() { + ccn_template_headerNav = ccn_template_TemplateLoader('headerNav'); + ccn_template_messagebox = ccn_template_TemplateLoader('messagebox'); + ccn_template_datetimepicker = ccn_template_TemplateLoader('datetimepicker'); + + ccn_template_calendarItem = ccn_template_TemplateLoader('calendarItem'); + ccn_template_scheduleItem = ccn_template_TemplateLoader('scheduleItem'); + ccn_template_displayOwnedItem = ccn_template_TemplateLoader('displayOwnedItem'); + ccn_template_displaySharedItem = ccn_template_TemplateLoader('displaySharedItem'); + + ccn_template_todoItem = ccn_template_TemplateLoader('todoItem'); + ccn_template_userItem = ccn_template_TemplateLoader('userItem'); + ccn_template_tokenItem = ccn_template_TemplateLoader('tokenItem'); + + ccn_template_ownedItem = ccn_template_TemplateLoader('ownedItem'); + ccn_template_sharingItem = ccn_template_TemplateLoader('sharingItem'); + ccn_template_optionItem = ccn_template_TemplateLoader('optionItem'); + +} + +function ccn_template_TemplateLoader(templateName) { + var elements = $("#jsrender-tmpl-" + templateName); + if (elements.length == 0) return undefined; + var cache = undefined; + $.ajax({ - url: $("#jsrender-tmpl-headerNav").attr('src'), + url: elements.attr('src'), type: "GET", async: false, success: function (data) { - ccn_template_headerNav = $.templates(data); - } - }); - $.ajax({ - url: $("#jsrender-tmpl-messagebox").attr('src'), - type: "GET", - async: false, - success: function (data) { - ccn_template_messagebox = $.templates(data); + cache = $.templates(data); } }); - switch(ccn_pages_currentPage) { - case ccn_pages_enumPages.home: - break; - case ccn_pages_enumPages.calendar: - $.ajax({ - url: $("#jsrender-tmpl-calendarItem").attr('src'), - type: "GET", - async: false, - success: function (data) { - ccn_template_calendarItem = $.templates(data); - } - }); - $.ajax({ - url: $("#jsrender-tmpl-scheduleItem").attr('src'), - type: "GET", - async: false, - success: function (data) { - ccn_template_scheduleItem = $.templates(data); - } - }); - $.ajax({ - url: $("#jsrender-tmpl-displayOwnedItem").attr('src'), - type: "GET", - async: false, - success: function (data) { - ccn_template_displayOwnedItem = $.templates(data); - } - }); - $.ajax({ - url: $("#jsrender-tmpl-displaySharedItem").attr('src'), - type: "GET", - async: false, - success: function (data) { - ccn_template_displaySharedItem = $.templates(data); - } - }); - break; - case ccn_pages_enumPages.todo: - $.ajax({ - url: $("#jsrender-tmpl-todoItem").attr('src'), - type: "GET", - async: false, - success: function (data) { - ccn_template_todoItem = $.templates(data); - } - }); - break; - case ccn_pages_enumPages.admin: - $.ajax({ - url: $("#jsrender-tmpl-userItem").attr('src'), - type: "GET", - async: false, - success: function (data) { - ccn_template_userItem = $.templates(data); - } - }); - $.ajax({ - url: $("#jsrender-tmpl-tokenItem").attr('src'), - type: "GET", - async: false, - success: function (data) { - ccn_template_tokenItem = $.templates(data); - } - }); - break; - case ccn_pages_enumPages.login: - break; - case ccn_pages_enumPages.collection: - $.ajax({ - url: $("#jsrender-tmpl-ownedItem").attr('src'), - type: "GET", - async: false, - success: function (data) { - ccn_template_ownedItem = $.templates(data); - } - }); - $.ajax({ - url: $("#jsrender-tmpl-sharingItem").attr('src'), - type: "GET", - async: false, - success: function (data) { - ccn_template_sharingItem = $.templates(data); - } - }); - case ccn_pages_enumPages.event: - $.ajax({ - url: $("#jsrender-tmpl-optionItem").attr('src'), - type: "GET", - async: false, - success: function (data) { - ccn_template_optionItem = $.templates(data); - } - }); - } + return cache; } \ No newline at end of file diff --git a/src/static/tmpl/datetimepicker.tmpl b/src/static/tmpl/datetimepicker.tmpl new file mode 100644 index 0000000..da7cd25 --- /dev/null +++ b/src/static/tmpl/datetimepicker.tmpl @@ -0,0 +1,148 @@ + \ No newline at end of file diff --git a/src/templates/calendar.html b/src/templates/calendar.html index 02ccd2d..b37b645 100644 --- a/src/templates/calendar.html +++ b/src/templates/calendar.html @@ -14,6 +14,7 @@ + @@ -32,6 +33,7 @@ + diff --git a/src/templates/event.html b/src/templates/event.html index 4dec07c..e60abae 100644 --- a/src/templates/event.html +++ b/src/templates/event.html @@ -17,6 +17,7 @@ + @@ -31,6 +32,7 @@ +