support event color feature

2021-03-07 21:01:51 +08:00
parent 5d3f32ff21
commit 2e25631a97
9 changed files with 82 additions and 21 deletions
--- a/src/static/css/calendar.css
+++ b/src/static/css/calendar.css
@@ -55,15 +55,22 @@ div.schedule-event-list {
    flex-flow: column;
 }

-div.schedule-event {
+div.schedule-event-outter {
    display: flex;
    flex-flow: row;
    align-items: flex-start;

-    padding: 1.25rem;
    margin-bottom: 1.25rem;
 }

+div.schedule-event-inner {
+    display: flex;
+    flex-flow: row;
+    align-items: flex-start;
+    
+    padding: 1.25rem;
+}
+
 div.schedule-event-words {
    display: flex;
    flex-flow: column;
--- a/src/static/i18n/strings_en-US.properties
+++ b/src/static/i18n/strings_en-US.properties
@@ -71,6 +71,7 @@ ccn-i18n-calendar-tabcontrol-tabDisplay=Display
 ccn-i18n-event-header=Edit Event
 ccn-i18n-event-title=Title
 ccn-i18n-event-description=Description
+ccn-i18n-event-color=Color
 ccn-i18n-event-collection=Collection
 ccn-i18n-event-startDateTime=Start Date Time
 ccn-i18n-event-endDateTime=Stop Date Time
--- a/src/static/i18n/strings_zh-CN.properties
+++ b/src/static/i18n/strings_zh-CN.properties
@@ -77,6 +77,7 @@ ccn-i18n-collection-sharing-editing=正在编辑集合：
 ccn-i18n-event-header=编辑事件
 ccn-i18n-event-title=标题
 ccn-i18n-event-description=描述
+ccn-i18n-event-color=颜色
 ccn-i18n-event-collection=集合
 ccn-i18n-event-startDateTime=开始时间
 ccn-i18n-event-endDateTime=结束时间
--- a/src/static/js/api.js
+++ b/src/static/js/api.js
@@ -88,6 +88,28 @@ function ccn_api_boolTemplate(_url, _data) {
    return (IsResponseOK(gotten_data) && gotten_data['data']);
 }

+// deserialize & serialize calendar description function
+
+function ccn_api_serializeDescription(_description, _color) {
+    var sobj = {
+        description: _description,
+        color: _color
+    }
+    return JSON.stringify(sobj);
+}
+
+function ccn_api_deserializeDescription(strl) {
+    try {
+        return $.parseJSON(strl);
+    } catch(err) {
+        return {
+            description: "",
+            color: DefaultColor
+        };
+    }
+    
+}
+
 // ====================================================== common

 function ccn_api_common_webLogin(_username, _password) {
--- a/src/static/js/page/calendar.js
+++ b/src/static/js/page/calendar.js
@@ -107,7 +107,7 @@ function ccn_calendar_calendar_Analyse() {
            month: gottenDateTime.getMonth() + 1,
            day: gottenDateTime.getDate(),
            dayOfWeek: gottenDateTime.getWeekday() + 1,
-            subcalendar: "       -",
+            subcalendar: "",
            events: new Array()
        });
        gottenDateTime.setTime(gottenDateTime.getTime() + ccn_datetime_DAY1_SPAN * 60000);
@@ -117,6 +117,7 @@ function ccn_calendar_calendar_Analyse() {
    // then analyse each event
    for(var index in ccn_calendar_calendar_listCache) {
        var item = ccn_calendar_calendar_listCache[index];
+        var deserializedDescription = ccn_api_deserializeDescription(item[3]);
        
        var minStartTimestamp = startTimestamp - (item[6] - item[5]);
        var result = ccn_datetime_ResolveLoopRules4Event(
@@ -141,7 +142,8 @@ function ccn_calendar_calendar_Analyse() {
                        uuid: item[0],
                        belongTo: item[1],
                        title: item[2],
-                        description: item[3],
+                        description: deserializedDescription.description,
+                        color: deserializedDescription.color,
                        isVisible: true,
                        isLocked: typeof(ccn_calendar_owned_displayCache[item[0]]) != 'undefined',
                        loopText: " ",  // todo: finish this
@@ -175,7 +177,7 @@ function ccn_calendar_calendar_Render() {
        for(var j = 0; j < 7; j++) {
            var item = ccn_calendar_calendar_displayCache[counter];
            $('#ccn-calendarItem-title-' + i + '-' + j).text(item.day);
-            $('#ccn-calendarItem-desc-' + i + '-' + j).text(item.subcalendar);
+            $('#ccn-calendarItem-desc-' + i + '-' + j).html(item.subcalendar == '' ? '&nbsp;' : item.subcalendar);
            $('#ccn-calendarItem-task-' + i + '-' + j).text(item.events.length.toString());
            counter++;
        }
@@ -203,6 +205,8 @@ function ccn_calendar_calendar_Render() {
    var listDOM = $('#ccn-calendar-scheduleList');
    listDOM.empty();
    listDOM.append(ccn_template_scheduleItem.render({renderdata: ccn_calendar_calendar_displayCache}));
+    // link click event
+    $('div.schedule-event-outter').click(ccn_calendar_calendar_ItemUpdate);
    ccn_i18n_ApplyLanguage2Content(listDOM);
 }

--- a/src/static/js/page/event.js
+++ b/src/static/js/page/event.js
@@ -67,13 +67,17 @@ function ccn_event_Init() {
    // if ccn_event_editingEvent is undefined, init following content with add mode
    // otherwise, init as update mode
    var isAdd = typeof(ccn_event_editingEvent) == 'undefined';
+    var deserializeDescription = isAdd ? undefined : ccn_api_deserializeDescription(ccn_event_editingEvent[3]);

    // init title and description
    $('#ccn-event-inputTitle').val(
        isAdd ? '' : ccn_event_editingEvent[2]
    );
    $('#ccn-event-inputDescription').val(
-        isAdd ? '' : ccn_event_editingEvent[3]
+        isAdd ? '' : deserializeDescription.description
+    );
+    $('#ccn-event-inputColor').val(
+        isAdd ? DefaultColor : deserializeDescription.color
    );

    // init collection picker, first we need query data
@@ -244,6 +248,8 @@ function ccn_event_GetForm() {
    if (title == '') return undefined;
    var description = $('#ccn-event-inputDescription').val();
    if (description == '') return undefined;
+    var color = $('#ccn-event-inputColor').val();
+    if (color == '') return undefined;
    var belongTo = $('#ccn-event-inputCollection').val();
    if (belongTo == null) return undefined; // if no selected item, val return null, not undefined

@@ -326,7 +332,18 @@ function ccn_event_GetForm() {
        }
    }

-    return [belongTo, title, description, eventDateTimeStart, eventDateTimeEnd, timezoneOffset, loopRules];
+    return [
+        belongTo, 
+        title, 
+        ccn_api_serializeDescription(
+            description,
+            color
+        ), 
+        eventDateTimeStart, 
+        eventDateTimeEnd, 
+        timezoneOffset, 
+        loopRules
+    ];
 }

 function ccn_event_btnSpot() {
--- a/src/static/js/utils.js
+++ b/src/static/js/utils.js
@@ -15,6 +15,7 @@ function ComputeSHA256(strl) {
    return hashHex.toLowerCase();
 }
 */
+var DefaultColor = '#536dfe';

 function IsResponseOK(data) {
    if (typeof (data) == 'undefined') {
--- a/src/static/tmpl/scheduleItem.tmpl
+++ b/src/static/tmpl/scheduleItem.tmpl
@@ -8,19 +8,22 @@
    <div class="schedule-event-list">
        {{for events}}
        {{if isVisible}}
-        <div class="schedule-event card">
-            <div class="schedule-event-words">
-                <p class="level-item"><b>{{>title}}</b></p>
-                <p class="level-item">{{>description}}</p>
-                <p class="level-item"><span>{{>start}}</span>-<span>{{>end}}</span></p>
-            </div>
-            <div class="schedule-event-icon">
-                {{if isLocked}}
-                <span class="icon is-small"><i class="fas fa-lock"></i></span>
-                {{/if}}
-                {{if timezoneWarning}}
-                <span class="icon is-small"><i class="fas fa-globe"></i></span>
-                {{/if}}
+        <div class="schedule-event-outter card" uuid="{{:uuid}}">
+            <div style="background: {{:color}}; width: 0.75rem; height: 100%;"></div>
+            <div class="schedule-event-inner">
+                <div class="schedule-event-words">
+                    <p class="level-item"><b>{{>title}}</b></p>
+                    <p class="level-item">{{>description}}</p>
+                    <p class="level-item"><span>{{>start}}</span>-<span>{{>end}}</span></p>
+                </div>
+                <div class="schedule-event-icon">
+                    {{if isLocked}}
+                    <span class="icon is-small"><i class="fas fa-lock"></i></span>
+                    {{/if}}
+                    {{if timezoneWarning}}
+                    <span class="icon is-small"><i class="fas fa-globe"></i></span>
+                    {{/if}}
+                </div>
            </div>
        </div>
        {{/if}}
--- a/src/templates/event.html
+++ b/src/templates/event.html
@@ -52,7 +52,12 @@
                    <textarea id="ccn-event-inputDescription" class="textarea"></textarea>
                </div>
            </div>
-
+            <div class="field">
+                <label class="label" i18n-name="ccn-i18n-event-color"></label>
+                <div class="control">
+                    <input id="ccn-event-inputColor" class="input" type="color">
+                </div>
+            </div>
            <div class="field">
                <label class="label" i18n-name="ccn-i18n-event-collection"></label>
                <div class="control">