yyc12345/coconut-leaf
1
0
Fork 0
Code Activity

finish a half of datetimepicker

Browse Source
This commit is contained in:
yyc12345
2021-03-10 16:47:44 +08:00
parent a0182ffc4f
commit 6468365f42
10 changed files with 246 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/static/css/datetimepicker.css Normal file
View File

@@ -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;
}

3
src/static/i18n/strings_en-US.properties
View File

@@ -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.

3
src/static/i18n/strings_zh-CN.properties
View File

@@ -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=一个获取操作失败了，可能是系统错误或者您的权限不足。刷新页面可能会解决问题。请在刷新页面前备份好自己的数据。

4
src/static/js/datetimepicker.js
View File

@@ -1,3 +1,7 @@
function ccn_datetimepicker_Insert() {
$('body').append(ccn_template_datetimepicker.render());
}
function ccn_datetimepicker_Init() {
var nowtime = new Date();

1
src/static/js/page/calendar.js
View File

@@ -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

6
src/static/js/page/event.js
View File

@@ -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');

132
src/static/js/template.js
View File

@@ -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;
}

148
src/static/tmpl/datetimepicker.tmpl Normal file
View File

@@ -0,0 +1,148 @@
<div id="ccn-datetimepicker-modal" class="modal is-active" style="float: left; position: fixed; top: 0; bottom: 0; left: 0; right: 0;">
<div class="modal-background"></div>
<div class="modal-card" style="height: 70%;">
<header class="modal-card-head">
<p id="ccn-datetimepicker-date" class="modal-card-title">2020年2月30日</p>
<p id="ccn-datetimepicker-time" class="modal-card-title">24：61</p>
</header>
<div class="modal-card-body pickerContainer">
<div style="display: none;">
<nav class="level is-mobile">
<div class="level-left">
<div class="level-item control">
<a class="button">
<span class="icon is-small"><i class="fas fa-chevron-circle-left"></i></span>
</a>
</div>
</div>
<div class="level-item">this is a title</div>
<div class="level-right">
<div class="level-item control">
<a class="button">
<span class="icon is-small"><i class="fas fa-chevron-circle-right"></i></span>
</a>
</div>
</div>
</nav>
<div class="perfectTable">
<div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
</div>
<div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
</div>
<div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
</div>
</div>
</div>
<div style="display: none;">
<nav class="level is-mobile">
<div class="level-left">
<div class="level-item control">
<a class="button">
<span class="icon is-small"><i class="fas fa-chevron-circle-left"></i></span>
</a>
</div>
</div>
<div class="level-item">this is a title</div>
<div class="level-right">
<div class="level-item control">
<a class="button">
<span class="icon is-small"><i class="fas fa-chevron-circle-right"></i></span>
</a>
</div>
</div>
</nav>
<div class="perfectTable">
<div>
<div i18n-name="ccn-i18n-universal-month-1"></div>
<div i18n-name="ccn-i18n-universal-month-2"></div>
<div i18n-name="ccn-i18n-universal-month-3"></div>
<div i18n-name="ccn-i18n-universal-month-4"></div>
</div>
<div>
<div i18n-name="ccn-i18n-universal-month-5"></div>
<div i18n-name="ccn-i18n-universal-month-6"></div>
<div i18n-name="ccn-i18n-universal-month-7"></div>
<div i18n-name="ccn-i18n-universal-month-8"></div>
</div>
<div>
<div i18n-name="ccn-i18n-universal-month-9"></div>
<div i18n-name="ccn-i18n-universal-month-10"></div>
<div i18n-name="ccn-i18n-universal-month-11"></div>
<div i18n-name="ccn-i18n-universal-month-12"></div>
</div>
</div>
</div>
<div>
<nav class="level is-mobile">
<div class="level-left">
<div class="level-item control">
<a class="button">
<span class="icon is-small"><i class="fas fa-chevron-circle-left"></i></span>
</a>
</div>
</div>
<div class="level-item">this is a title</div>
<div class="level-right">
<div class="level-item control">
<a class="button">
<span class="icon is-small"><i class="fas fa-chevron-circle-right"></i></span>
</a>
</div>
</div>
</nav>
<div class="perfectTable">
<div>
<div i18n-name="ccn-i18n-universal-week-1"></div>
<div i18n-name="ccn-i18n-universal-week-2"></div>
<div i18n-name="ccn-i18n-universal-week-3"></div>
<div i18n-name="ccn-i18n-universal-week-4"></div>
<div i18n-name="ccn-i18n-universal-week-5"></div>
<div i18n-name="ccn-i18n-universal-week-6"></div>
<div i18n-name="ccn-i18n-universal-week-7"></div>
</div>
<div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
</div>
</div>
</div>
<footer class="modal-card-foot">
<a id="ccn-datetimepicker-btnConfirm" class="button is-success">
<span i18n-name="ccn-i18n-datetimepicker-confirm"></span>
</a>
<a id="ccn-datetimepicker-btnCancel" class="button">
<span i18n-name="ccn-i18n-datetimepicker-cancel"></span>
</a>
</footer>
</div>
</div>

2
src/templates/calendar.html
View File

@@ -14,6 +14,7 @@
<script type="text/x-jsrender" id="jsrender-tmpl-headerNav" src="/static/tmpl/headerNav.tmpl"></script>
<script type="text/x-jsrender" id="jsrender-tmpl-messagebox" src="/static/tmpl/messagebox.tmpl"></script>
<script type="text/x-jsrender" id="jsrender-tmpl-datetimepicker" src="/static/tmpl/datetimepicker.tmpl"></script>
<script type="text/x-jsrender" id="jsrender-tmpl-calendarItem" src="/static/tmpl/calendarItem.tmpl"></script>
<script type="text/x-jsrender" id="jsrender-tmpl-scheduleItem" src="/static/tmpl/scheduleItem.tmpl"></script>
<script type="text/x-jsrender" id="jsrender-tmpl-displayOwnedItem" src="/static/tmpl/displayOwnedItem.tmpl"></script>
@@ -32,6 +33,7 @@
<script type="text/javascript" src="/static/js/page/calendar.js"></script>
<link rel="stylesheet" href="/static/css/calendar.css">
<link rel="stylesheet" href="/static/css/datetimepicker.css">
</head>
<body>

2
src/templates/event.html
View File

@@ -17,6 +17,7 @@
<script type="text/x-jsrender" id="jsrender-tmpl-headerNav" src="/static/tmpl/headerNav.tmpl"></script>
<script type="text/x-jsrender" id="jsrender-tmpl-messagebox" src="/static/tmpl/messagebox.tmpl"></script>
<script type="text/x-jsrender" id="jsrender-tmpl-datetimepicker" src="/static/tmpl/datetimepicker.tmpl"></script>
<script type="text/x-jsrender" id="jsrender-tmpl-optionItem" src="/static/tmpl/optionItem.tmpl"></script>
<script type="text/javascript" src="/static/js/localStorageAssist.js"></script>
@@ -31,6 +32,7 @@
<script type="text/javascript" src="/static/js/page/event.js"></script>
<link rel="stylesheet" href="/static/css/event.css">
<link rel="stylesheet" href="/static/css/datetimepicker.css">
</head>
<body>