sf-i-events 1.0.1

package/sf-i-events.js

@@ -0,0 +1,617 @@
+/**
+ * @license
+ * Copyright 2022 Superflow.dev
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+// import {customElement, query, queryAssignedElements, property} from 'lit/decorators.js';
+import { customElement, query, property } from 'lit/decorators.js';
+import Util from './util';
+// import {LitElement, html, css} from 'lit';
+// import {customElement} from 'lit/decorators.js';
+/*
+
+Modes: View, Add, Edit, Delete, Admin
+DB: partitionKey, rangeKey, values
+
+*/
+/**
+ * SfIEvents element.
+ * @fires renderComplete - When the list is populated
+ * @fires valueChanged - When the value is changed
+ * @property apiId - backend api id
+ * @property label - input label
+ * @property name - name of the input
+ * @property mode - mode of operation
+ * @property selectedId - id to preselect
+ * @property selectedValue - callback function
+ */
+let SfIEvents = class SfIEvents extends LitElement {
+    constructor() {
+        super();
+        this.calendar = [];
+        this.monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+        this.events = null;
+        this.getApiBodyList = () => {
+            return JSON.parse(this.apiBodyList);
+        };
+        this.getApiBodyDetail = () => {
+            return JSON.parse(this.apiBodyDetail);
+        };
+        this.flow = "";
+        this.prepareXhr = async (data, url, loaderElement, authorization) => {
+            if (loaderElement != null) {
+                loaderElement.innerHTML = '<div class="lds-dual-ring"></div>';
+            }
+            return await Util.callApi(url, data, authorization);
+        };
+        this.clearMessages = () => {
+            this._SfRowError.style.display = 'none';
+            this._SfRowErrorMessage.innerHTML = '';
+            this._SfRowSuccess.style.display = 'none';
+            this._SfRowSuccessMessage.innerHTML = '';
+        };
+        this.setError = (msg) => {
+            this._SfRowError.style.display = 'flex';
+            this._SfRowErrorMessage.innerHTML = msg;
+            this._SfRowSuccess.style.display = 'none';
+            this._SfRowSuccessMessage.innerHTML = '';
+        };
+        this.setSuccess = (msg) => {
+            this._SfRowError.style.display = 'none';
+            this._SfRowErrorMessage.innerHTML = '';
+            this._SfRowSuccess.style.display = 'flex';
+            this._SfRowSuccessMessage.innerHTML = msg;
+        };
+        this.getLastDayOfLastMonth = (month, year) => {
+            const date = new Date(year, month, 0);
+            console.log('last date of last month', month, date.getDate());
+            return date.getDate();
+        };
+        this.getLastDayOfMonth = (month, year) => {
+            const date = new Date(year, month + 1, 0);
+            return date.getDate();
+        };
+        this.getBlanks = (month, year) => {
+            const date = new Date(("0" + (month + 1)).slice(-2) + '/01/' + year);
+            const day = date.getDay();
+            return day;
+        };
+        this.insertDates = (month, year) => {
+            var html = "";
+            html += '<div class="d-flex align-center flex-grow flex-wrap">';
+            const dateNumber = this.getLastDayOfLastMonth(month, year);
+            for (var i = 0; i < this.getBlanks(month, year); i++) {
+                html += '<div class="day-item date-item-before">';
+                html += dateNumber - (this.getBlanks(month, year) - i - 1);
+                html += '</div>';
+            }
+            for (i = 0; i < this.getLastDayOfMonth(month, year); i++) {
+                const mmdd = ("0" + month).slice(-2) + "/" + ("0" + (i + 1)).slice(-2);
+                if (this.events[mmdd] != null) {
+                    console.log('found not null event');
+                    html += '<div class="day-item date-item-selected">';
+                    html += (i + 1);
+                    html += '</div>';
+                }
+                else {
+                    html += '<div class="day-item date-item">';
+                    html += (i + 1);
+                    html += '</div>';
+                }
+            }
+            for (i = 0; i < 42 - (this.getBlanks(month, year) + this.getLastDayOfMonth(month, year)); i++) {
+                html += '<div class="day-item date-item-before">';
+                html += (i + 1);
+                html += '</div>';
+            }
+            html += '</div>';
+            return html;
+        };
+        this.insertDayNames = () => {
+            var html = "";
+            html += '<div class="d-flex align-center flex-grow">';
+            html += '<div class="day-item">';
+            html += 'S';
+            html += '</div>';
+            html += '<div class="day-item">';
+            html += 'M';
+            html += '</div>';
+            html += '<div class="day-item">';
+            html += 'T';
+            html += '</div>';
+            html += '<div class="day-item">';
+            html += 'W';
+            html += '</div>';
+            html += '<div class="day-item">';
+            html += 'T';
+            html += '</div>';
+            html += '<div class="day-item">';
+            html += 'F';
+            html += '</div>';
+            html += '<div class="day-item">';
+            html += 'S';
+            html += '</div>';
+            html += '</div>';
+            return html;
+        };
+        this.renderCalendar = () => {
+            console.log('redering calendar', this.events);
+            var startDate = new Date(this.calendarStartMM + '/' + this.calendarStartDD + '/' + this.calendarStartYYYY);
+            var html = '';
+            for (var i = 0; i < 12; i++) {
+                html += '<div class="calendar-item d-flex flex-col flex-grow">';
+                html += '<div class="d-flex">';
+                html += '<div class="title-item">' + this.monthNames[startDate.getMonth()] + '&nbsp;&nbsp;' + startDate.getFullYear() + '</div>';
+                html += '</div>';
+                html += this.insertDayNames();
+                html += this.insertDates(startDate.getMonth(), startDate.getFullYear());
+                html += '</div>';
+                startDate.setMonth(startDate.getMonth() + 1);
+            }
+            this._SfCalendarContainer.innerHTML = html;
+        };
+        this.processEvent = (value) => {
+            console.log('processing due date', value.duedate.replace(/['"]+/g, ''));
+            const duedateArr = value.duedate.replace(/['"]+/g, '').split(",");
+            const startMonth = parseInt(this.calendarStartMM) - 1;
+            for (var i = 0; i < duedateArr.length; i++) {
+                const dateArr = duedateArr[i].split("/");
+                console.log('datearr', dateArr);
+                if (dateArr[2] == "*") {
+                    if (dateArr[1] == "*") {
+                        var j = startMonth;
+                        while (true) {
+                            if (j === (startMonth - 1)) {
+                                break;
+                            }
+                            const mmdd = ("0" + j).slice(-2) + "/" + ("0" + dateArr[0]).slice(-2);
+                            if (this.events == null) {
+                                this.events = {};
+                            }
+                            this.events[mmdd] = value;
+                            j++;
+                            if (j === 12) {
+                                j = 0;
+                            }
+                        }
+                    }
+                    else {
+                        const mmdd = ("0" + dateArr[1]).slice(-2) + "/" + ("0" + dateArr[0]).slice(-2);
+                        if (this.events == null) {
+                            this.events = {};
+                        }
+                        this.events[mmdd] = value;
+                    }
+                }
+            }
+            console.log('calendar processed', this.calendar);
+            console.log('event processed', this.events);
+        };
+        this.fetchDetail = async (value) => {
+            const body = this.getApiBodyList();
+            body.id = value;
+            console.log('detail', value, body);
+            let url = "https://" + this.apiIdDetail + ".execute-api.us-east-1.amazonaws.com/test/" + this.apiMethodDetail;
+            const authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
+            const xhr = (await this.prepareXhr(body, url, this._SfLoader, authorization));
+            this._SfLoader.innerHTML = '';
+            if (xhr.status == 200) {
+                const jsonRespose = JSON.parse(xhr.responseText);
+                console.log('jsonResponse', jsonRespose);
+                this.processEvent(jsonRespose.data.value);
+            }
+            else {
+                const jsonRespose = JSON.parse(xhr.responseText);
+                this.setError(jsonRespose.error);
+            }
+        };
+        this.fetchList = async () => {
+            const body = this.getApiBodyList();
+            let url = "https://" + this.apiIdList + ".execute-api.us-east-1.amazonaws.com/test/" + this.apiMethodList;
+            const authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
+            const xhr = (await this.prepareXhr(body, url, this._SfLoader, authorization));
+            this._SfLoader.innerHTML = '';
+            if (xhr.status == 200) {
+                const jsonRespose = JSON.parse(xhr.responseText);
+                const fieldArr = JSON.parse(jsonRespose.data.value[this.apiResponseFieldList]);
+                for (var i = 0; i < fieldArr.length; i++) {
+                    console.log(fieldArr[i]);
+                    await this.fetchDetail(fieldArr[i]);
+                }
+            }
+            else {
+                const jsonRespose = JSON.parse(xhr.responseText);
+                this.setError(jsonRespose.error);
+            }
+        };
+        this.initCalendar = async () => {
+            var newDate = null;
+            var newMonth = null;
+            var newYear = null;
+            var startDate = new Date(this.calendarStartMM + '/' + this.calendarStartDD + '/' + this.calendarStartYYYY);
+            console.log('startDate', startDate);
+            do {
+                this.calendar.push(startDate);
+                startDate.setDate(startDate.getDate() + 1);
+                newDate = ("0" + startDate.getDate()).slice(-2);
+                newMonth = ("0" + startDate.getMonth()).slice(-2);
+                newYear = (startDate.getFullYear());
+            } while (!(newDate == this.calendarStartDD && newMonth == (("0" + ((parseInt(this.calendarStartMM) - 1) + "")).slice(-2)) && newYear === (parseInt(this.calendarStartYYYY) + 1)));
+            console.log(this.calendar);
+        };
+        this.initInputs = () => {
+            this.calendarStartDD = ("0" + this.calendarStartDD).slice(-2);
+            this.calendarStartMM = ("0" + this.calendarStartMM).slice(-2);
+        };
+        this.loadMode = async () => {
+            this.initInputs();
+            this.initCalendar();
+            await this.fetchList();
+            this.renderCalendar();
+        };
+    }
+    firstUpdated(_changedProperties) {
+        this.loadMode();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    render() {
+        return html `
+          
+      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+      <div class="SfIEventsC">
+        
+        <div class="d-flex justify-center">
+            <div class="loader-element"></div>
+        </div>
+        <div class="d-flex justify-center">
+          <div class="lb"></div>
+          <div class="d-flex flex-grow flex-wrap justify-center align-start" id="calendar-container">
+            
+          </div>
+          <div class="rb"></div>
+        </div>
+        <div class="d-flex justify-between">
+            <div class="lb"></div>
+            <div>
+              <div class="div-row-error div-row-submit gone">
+                <div part="errormsg" class="div-row-error-message"></div>
+              </div>
+              <div class="div-row-success div-row-submit gone">
+                <div part="successmsg" class="div-row-success-message"></div>
+              </div>
+            </div>
+            <div class="rb"></div>
+          </div>
+      </div>
+
+    `;
+    }
+};
+SfIEvents.styles = css `
+
+    
+    .SfIEventsC {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      justify-content: space-between;
+    }
+
+    .flex-grow {
+      flex-grow: 1;
+    }
+
+    .flex-wrap {
+      flex-wrap: wrap;
+    }
+
+    .left-sticky {
+      left: 0px;
+      position: sticky;
+    }
+
+    .link {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+
+    .gone {
+      display: none
+    }
+
+    .loader-element {
+      position: fixed;
+      right: 10px;
+      top: 10px;
+      margin-left: 5px;
+    }
+
+    #calendar-container {
+      width: 90%;
+    }
+
+    .day-item {
+      width: 14%;
+      margin-bottom: 5px;
+      text-align: center;
+    }
+
+    .date-item {
+      font-size: 80%;
+      color: #333;
+    }
+
+    .date-item-before {
+      font-size: 80%;
+      color: #999;
+    }
+
+    .date-item-selected {
+      color: white;
+      background-color: #cd0078;
+      border-radius: 8px;
+    }
+
+    .title-item {
+      margin-bottom: 10px;
+    }
+
+    .calendar-item {
+      width: 90%;
+      margin-bottom: 20px;
+    }
+
+    .td-head {
+      text-transform: capitalize;
+    }
+
+    .td-body {
+      padding: 5px;
+    }
+
+    .td-dark {
+      background-color: #e9e9e9;
+    }
+
+    .td-highlight {
+      background-color: black;
+      color: white;
+    }
+
+    .td-light {
+      background-color: #f6f6f6;
+    }
+
+    td {
+      white-space: nowrap;
+    }
+
+    .align-start {
+      align-items: flex-start;
+    }
+
+    .align-end {
+      align-items: flex-end;
+    }
+
+    .align-center {
+      align-items: center;
+    }
+    
+    .lds-dual-ring {
+      display: inline-block;
+      width: 50px;
+      height: 50px;
+    }
+    .lds-dual-ring:after {
+      content: " ";
+      display: block;
+      width: 50px;
+      height: 50px;
+      margin: 0px;
+      border-radius: 50%;
+      border: 2px solid #fff;
+      border-color: #888 #ddd #888 #ddd;
+      background-color: white;
+      animation: lds-dual-ring 0.8s linear infinite;
+    }
+
+    .lds-dual-ring-lg {
+      display: inline-block;
+      width: 30px;
+      height: 30px;
+    }
+    .lds-dual-ring-lg:after {
+      content: " ";
+      display: block;
+      width: 30px;
+      height: 30px;
+      margin: 0px;
+      border-radius: 50%;
+      border: 3px solid #fff;
+      border-color: #888 #ddd #888 #ddd;
+      animation: lds-dual-ring 0.8s linear infinite;
+    }
+
+    .div-row-error {
+      display: flex;
+      justify-content: center;
+      position: fixed;
+      position: fixed;
+      top: 0px;
+      right: 0px;
+      margin-top: 20px;
+      margin-right: 20px;
+      display: none;
+      align-items:center;
+      background-color: white;
+      border: dashed 1px red;
+      padding: 20px;
+    }
+
+    .div-row-error-message {
+      color: red;
+      padding: 5px;
+      background-color: white;
+      text-align: center;
+    }
+
+    .div-row-success {
+      display: flex;
+      justify-content: center;
+      position: fixed;
+      top: 0px;
+      right: 0px;
+      margin-top: 20px;
+      margin-right: 20px;
+      display: none;
+      align-items:center;
+      background-color: white;
+      border: dashed 1px green;
+      padding: 20px;
+    }
+
+    .div-row-success-message {
+      color: green;
+      padding: 5px;
+      background-color: white;
+      text-align: center;
+    }
+
+    .d-flex {
+      display: flex;
+    }
+
+    .flex-col {
+      flex-direction: column;
+    }
+
+    .justify-center {
+      justify-content: center;
+    }
+
+    .justify-between {
+      justify-content: space-between;
+    }
+
+    .justify-end {
+      justify-content: flex-end;
+    }
+
+    @keyframes lds-dual-ring {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }  
+
+    .hide {
+      display: none;
+    }
+
+    .lb {
+      width: 5%
+    }
+    .rb {
+      width: 5%
+    }
+
+    @media (orientation: landscape) {
+
+      .lb {
+        width: 30%
+      }
+      .rb {
+        width: 30%
+      }
+
+      #calendar-container {
+        width: 40%;
+      }
+
+      .calendar-item {
+        width: 25%;
+      }
+
+    }
+
+  `;
+__decorate([
+    property()
+], SfIEvents.prototype, "apiIdList", void 0);
+__decorate([
+    property()
+], SfIEvents.prototype, "apiIdDetail", void 0);
+__decorate([
+    property()
+], SfIEvents.prototype, "apiMethodList", void 0);
+__decorate([
+    property()
+], SfIEvents.prototype, "apiMethodDetail", void 0);
+__decorate([
+    property()
+], SfIEvents.prototype, "apiBodyList", void 0);
+__decorate([
+    property()
+], SfIEvents.prototype, "apiBodyDetail", void 0);
+__decorate([
+    property()
+], SfIEvents.prototype, "apiResponseFieldList", void 0);
+__decorate([
+    property()
+], SfIEvents.prototype, "calendarStartDD", void 0);
+__decorate([
+    property()
+], SfIEvents.prototype, "calendarStartMM", void 0);
+__decorate([
+    property()
+], SfIEvents.prototype, "calendarStartYYYY", void 0);
+__decorate([
+    property()
+], SfIEvents.prototype, "calendar", void 0);
+__decorate([
+    property()
+], SfIEvents.prototype, "monthNames", void 0);
+__decorate([
+    property()
+], SfIEvents.prototype, "events", void 0);
+__decorate([
+    property()
+], SfIEvents.prototype, "mode", void 0);
+__decorate([
+    property()
+], SfIEvents.prototype, "flow", void 0);
+__decorate([
+    query('.div-row-error')
+], SfIEvents.prototype, "_SfRowError", void 0);
+__decorate([
+    query('.div-row-error-message')
+], SfIEvents.prototype, "_SfRowErrorMessage", void 0);
+__decorate([
+    query('.div-row-success')
+], SfIEvents.prototype, "_SfRowSuccess", void 0);
+__decorate([
+    query('.div-row-success-message')
+], SfIEvents.prototype, "_SfRowSuccessMessage", void 0);
+__decorate([
+    query('.loader-element')
+], SfIEvents.prototype, "_SfLoader", void 0);
+__decorate([
+    query('#calendar-container')
+], SfIEvents.prototype, "_SfCalendarContainer", void 0);
+SfIEvents = __decorate([
+    customElement('sf-i-events')
+], SfIEvents);
+export { SfIEvents };
+//# sourceMappingURL=sf-i-events.js.map

package/sf-i-events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sf-i-events.js","sourceRoot":"","sources":["src/sf-i-events.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Superflow.dev\n * SPDX-License-Identifier: MIT\n */\n\nimport {LitElement, html, css, PropertyValueMap} from 'lit';\n// import {customElement, query, queryAssignedElements, property} from 'lit/decorators.js';\nimport {customElement, query, property} from 'lit/decorators.js';\nimport Util from './util';\n// import {LitElement, html, css} from 'lit';\n// import {customElement} from 'lit/decorators.js';\n\n\n/*\n\nModes: View, Add, Edit, Delete, Admin\nDB: partitionKey, rangeKey, values\n\n*/\n\n/**\n * SfIEvents element.\n * @fires renderComplete - When the list is populated\n * @fires valueChanged - When the value is changed\n * @property apiId - backend api id\n * @property label - input label\n * @property name - name of the input\n * @property mode - mode of operation\n * @property selectedId - id to preselect\n * @property selectedValue - callback function\n */\n@customElement('sf-i-events')\nexport class SfIEvents extends LitElement {\n  \n  @property()\n  apiIdList!: string;\n\n  @property()\n  apiIdDetail!: string;\n\n  @property()\n  apiMethodList!: string;\n\n  @property()\n  apiMethodDetail!: string;\n\n  @property()\n  apiBodyList!: string;\n\n  @property()\n  apiBodyDetail!: string;\n\n  @property()\n  apiResponseFieldList!: string;\n\n  @property()\n  calendarStartDD!: string;\n\n  @property()\n  calendarStartMM!: string;\n\n  @property()\n  calendarStartYYYY!: string;\n\n  @property()\n  calendar: Date [] = [];\n\n  @property()\n  monthNames: string []  = [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"];\n\n  @property()\n  events: any = null;\n\n  getApiBodyList = () => {\n    return JSON.parse(this.apiBodyList);\n  }\n\n  getApiBodyDetail = () => {\n    return JSON.parse(this.apiBodyDetail);\n  }\n\n  @property()\n  mode!: string;\n\n  @property()\n  flow: string = \"\";\n\n  static override styles = css`\n\n    \n    .SfIEventsC {\n      display: flex;\n      flex-direction: column;\n      align-items: stretch;\n      justify-content: space-between;\n    }\n\n    .flex-grow {\n      flex-grow: 1;\n    }\n\n    .flex-wrap {\n      flex-wrap: wrap;\n    }\n\n    .left-sticky {\n      left: 0px;\n      position: sticky;\n    }\n\n    .link {\n      text-decoration: underline;\n      cursor: pointer;\n    }\n\n    .gone {\n      display: none\n    }\n\n    .loader-element {\n      position: fixed;\n      right: 10px;\n      top: 10px;\n      margin-left: 5px;\n    }\n\n    #calendar-container {\n      width: 90%;\n    }\n\n    .day-item {\n      width: 14%;\n      margin-bottom: 5px;\n      text-align: center;\n    }\n\n    .date-item {\n      font-size: 80%;\n      color: #333;\n    }\n\n    .date-item-before {\n      font-size: 80%;\n      color: #999;\n    }\n\n    .date-item-selected {\n      color: white;\n      background-color: #cd0078;\n      border-radius: 8px;\n    }\n\n    .title-item {\n      margin-bottom: 10px;\n    }\n\n    .calendar-item {\n      width: 90%;\n      margin-bottom: 20px;\n    }\n\n    .td-head {\n      text-transform: capitalize;\n    }\n\n    .td-body {\n      padding: 5px;\n    }\n\n    .td-dark {\n      background-color: #e9e9e9;\n    }\n\n    .td-highlight {\n      background-color: black;\n      color: white;\n    }\n\n    .td-light {\n      background-color: #f6f6f6;\n    }\n\n    td {\n      white-space: nowrap;\n    }\n\n    .align-start {\n      align-items: flex-start;\n    }\n\n    .align-end {\n      align-items: flex-end;\n    }\n\n    .align-center {\n      align-items: center;\n    }\n    \n    .lds-dual-ring {\n      display: inline-block;\n      width: 50px;\n      height: 50px;\n    }\n    .lds-dual-ring:after {\n      content: \" \";\n      display: block;\n      width: 50px;\n      height: 50px;\n      margin: 0px;\n      border-radius: 50%;\n      border: 2px solid #fff;\n      border-color: #888 #ddd #888 #ddd;\n      background-color: white;\n      animation: lds-dual-ring 0.8s linear infinite;\n    }\n\n    .lds-dual-ring-lg {\n      display: inline-block;\n      width: 30px;\n      height: 30px;\n    }\n    .lds-dual-ring-lg:after {\n      content: \" \";\n      display: block;\n      width: 30px;\n      height: 30px;\n      margin: 0px;\n      border-radius: 50%;\n      border: 3px solid #fff;\n      border-color: #888 #ddd #888 #ddd;\n      animation: lds-dual-ring 0.8s linear infinite;\n    }\n\n    .div-row-error {\n      display: flex;\n      justify-content: center;\n      position: fixed;\n      position: fixed;\n      top: 0px;\n      right: 0px;\n      margin-top: 20px;\n      margin-right: 20px;\n      display: none;\n      align-items:center;\n      background-color: white;\n      border: dashed 1px red;\n      padding: 20px;\n    }\n\n    .div-row-error-message {\n      color: red;\n      padding: 5px;\n      background-color: white;\n      text-align: center;\n    }\n\n    .div-row-success {\n      display: flex;\n      justify-content: center;\n      position: fixed;\n      top: 0px;\n      right: 0px;\n      margin-top: 20px;\n      margin-right: 20px;\n      display: none;\n      align-items:center;\n      background-color: white;\n      border: dashed 1px green;\n      padding: 20px;\n    }\n\n    .div-row-success-message {\n      color: green;\n      padding: 5px;\n      background-color: white;\n      text-align: center;\n    }\n\n    .d-flex {\n      display: flex;\n    }\n\n    .flex-col {\n      flex-direction: column;\n    }\n\n    .justify-center {\n      justify-content: center;\n    }\n\n    .justify-between {\n      justify-content: space-between;\n    }\n\n    .justify-end {\n      justify-content: flex-end;\n    }\n\n    @keyframes lds-dual-ring {\n      0% {\n        transform: rotate(0deg);\n      }\n      100% {\n        transform: rotate(360deg);\n      }\n    }  \n\n    .hide {\n      display: none;\n    }\n\n    .lb {\n      width: 5%\n    }\n    .rb {\n      width: 5%\n    }\n\n    @media (orientation: landscape) {\n\n      .lb {\n        width: 30%\n      }\n      .rb {\n        width: 30%\n      }\n\n      #calendar-container {\n        width: 40%;\n      }\n\n      .calendar-item {\n        width: 25%;\n      }\n\n    }\n\n  `;\n\n  @query('.div-row-error')\n  _SfRowError: any;\n\n  @query('.div-row-error-message')\n  _SfRowErrorMessage: any;\n\n  @query('.div-row-success')\n  _SfRowSuccess: any;\n\n  @query('.div-row-success-message')\n  _SfRowSuccessMessage: any;\n\n  @query('.loader-element')\n  _SfLoader: any;\n\n  @query('#calendar-container')\n  _SfCalendarContainer: any;\n\n  prepareXhr = async (data: any, url: string, loaderElement: any, authorization: any) => {\n\n    \n    if(loaderElement != null) {\n      loaderElement.innerHTML = '<div class=\"lds-dual-ring\"></div>';\n    }\n    return await Util.callApi(url, data, authorization);\n\n  }\n\n  clearMessages = () => {\n    this._SfRowError.style.display = 'none';\n    this._SfRowErrorMessage.innerHTML = '';\n    this._SfRowSuccess.style.display = 'none';\n    this._SfRowSuccessMessage.innerHTML = '';\n  }\n\n  setError = (msg: string) => {\n    this._SfRowError.style.display = 'flex';\n    this._SfRowErrorMessage.innerHTML = msg;\n    this._SfRowSuccess.style.display = 'none';\n    this._SfRowSuccessMessage.innerHTML = '';\n  }\n\n  setSuccess = (msg: string) => {\n    this._SfRowError.style.display = 'none';\n    this._SfRowErrorMessage.innerHTML = '';\n    this._SfRowSuccess.style.display = 'flex';\n    this._SfRowSuccessMessage.innerHTML = msg;\n  }\n\n  getLastDayOfLastMonth = (month: number, year: number) => {\n    const date = new Date(year, month, 0);\n    console.log('last date of last month', month, date.getDate());\n    return date.getDate()\n  }\n\n  getLastDayOfMonth = (month: number, year: number) => {\n    const date = new Date(year, month + 1, 0);\n    return date.getDate()\n  }\n\n  getBlanks = (month: number, year: number) => {\n\n    const date = new Date((\"0\" + (month+1)).slice(-2) + '/01/' + year);\n    const day = date.getDay();\n    return day;\n\n  }\n\n  insertDates = (month: number, year: number) => {\n\n    var html = \"\";\n\n    html += '<div class=\"d-flex align-center flex-grow flex-wrap\">';\n\n    const dateNumber = this.getLastDayOfLastMonth(month, year);\n\n    for(var i = 0; i < this.getBlanks(month, year); i++) {\n\n      html += '<div class=\"day-item date-item-before\">';\n      html += dateNumber-(this.getBlanks(month, year) - i - 1);\n      html += '</div>';  \n\n    }\n\n    for(i = 0; i < this.getLastDayOfMonth(month, year); i++) {\n\n      const mmdd = (\"0\" + month).slice(-2) + \"/\" + (\"0\" + (i+1)).slice(-2);\n\n      if(this.events[mmdd] != null) {\n\n        console.log('found not null event');\n\n        html += '<div class=\"day-item date-item-selected\">';\n        html += (i + 1);\n        html += '</div>';  \n  \n      } else {\n\n        html += '<div class=\"day-item date-item\">';\n        html += (i + 1);\n        html += '</div>';  \n  \n      }\n\n    }\n\n    for(i = 0; i < 42 - (this.getBlanks(month, year) + this.getLastDayOfMonth(month, year)); i++) {\n      html += '<div class=\"day-item date-item-before\">';\n      html += (i+1);\n      html += '</div>'; \n    }\n\n    html += '</div>';\n\n    return html;\n\n  }\n\n  insertDayNames = () => {\n\n    var html = \"\";\n\n    html += '<div class=\"d-flex align-center flex-grow\">';\n\n    html += '<div class=\"day-item\">';\n    html += 'S';\n    html += '</div>';\n\n    html += '<div class=\"day-item\">';\n    html += 'M';\n    html += '</div>';\n\n    html += '<div class=\"day-item\">';\n    html += 'T';\n    html += '</div>';\n\n    html += '<div class=\"day-item\">';\n    html += 'W';\n    html += '</div>';\n\n    html += '<div class=\"day-item\">';\n    html += 'T';\n    html += '</div>';\n\n    html += '<div class=\"day-item\">';\n    html += 'F';\n    html += '</div>';\n\n    html += '<div class=\"day-item\">';\n    html += 'S';\n    html += '</div>';\n\n    html += '</div>';\n\n    return html;\n\n  }\n\n  renderCalendar = () => {\n\n    console.log('redering calendar', this.events);\n\n    var startDate = new Date(this.calendarStartMM + '/' + this.calendarStartDD + '/' + this.calendarStartYYYY);\n\n    var html = '';\n\n    for(var i = 0; i < 12; i++) {\n\n      html += '<div class=\"calendar-item d-flex flex-col flex-grow\">';\n      html += '<div class=\"d-flex\">';\n      html += '<div class=\"title-item\">' + this.monthNames[startDate.getMonth()] + '&nbsp;&nbsp;' + startDate.getFullYear() + '</div>';\n      html += '</div>';\n      html += this.insertDayNames();\n      html += this.insertDates(startDate.getMonth(), startDate.getFullYear());\n      html += '</div>';\n\n      startDate.setMonth(startDate.getMonth() + 1);\n  \n    }\n\n    (this._SfCalendarContainer as HTMLDivElement).innerHTML = html;\n\n  }\n\n  processEvent = (value: any) => {\n\n    console.log('processing due date', value.duedate.replace(/['\"]+/g, ''));\n    const duedateArr = value.duedate.replace(/['\"]+/g, '').split(\",\") as Array<string>;\n\n    const startMonth = parseInt(this.calendarStartMM) - 1;\n\n    for(var i = 0; i < duedateArr.length; i++) {\n\n      const dateArr = duedateArr[i].split(\"/\");\n      console.log('datearr', dateArr);\n\n      if(dateArr[2] == \"*\") {\n        if(dateArr[1] == \"*\") {\n\n          var j = startMonth;\n\n          while(true) {\n\n            if(j === (startMonth - 1)) {\n              break;\n            }\n\n            const mmdd =  (\"0\" +j).slice(-2) + \"/\" + (\"0\" + dateArr[0]).slice(-2);\n\n            if(this.events == null) {\n              this.events = {};\n            }\n            this.events[mmdd] = value;\n\n            j++;\n\n            if(j === 12) {\n              j = 0;\n            }\n\n          } \n\n        } else {\n\n            const mmdd =  (\"0\" +dateArr[1]).slice(-2) + \"/\" + (\"0\" + dateArr[0]).slice(-2);\n\n            if(this.events == null) {\n              this.events = {};\n            }\n            this.events[mmdd] = value;\n\n        }\n      }\n\n    }\n\n    console.log('calendar processed', this.calendar);\n    console.log('event processed', this.events);\n\n  }\n\n  fetchDetail = async (value: any) => {\n\n    const body: any = this.getApiBodyList();\n    body.id = value;\n    console.log('detail', value, body);\n    let url = \"https://\"+this.apiIdDetail+\".execute-api.us-east-1.amazonaws.com/test/\" + this.apiMethodDetail;\n\n    const authorization = btoa(Util.readCookie('email') + \":\" + Util.readCookie('accessToken'));\n    const xhr : any = (await this.prepareXhr(body, url, this._SfLoader, authorization)) as any;\n    this._SfLoader.innerHTML = '';\n    if(xhr.status == 200) {\n\n      const jsonRespose = JSON.parse(xhr.responseText);\n      console.log('jsonResponse', jsonRespose);\n      this.processEvent(jsonRespose.data.value)\n      \n    } else {\n      const jsonRespose = JSON.parse(xhr.responseText);\n      this.setError(jsonRespose.error);\n    }\n\n  }\n\n  fetchList = async () => {\n\n    const body: any = this.getApiBodyList();\n    let url = \"https://\"+this.apiIdList+\".execute-api.us-east-1.amazonaws.com/test/\" + this.apiMethodList;\n\n    const authorization = btoa(Util.readCookie('email') + \":\" + Util.readCookie('accessToken'));\n    const xhr : any = (await this.prepareXhr(body, url, this._SfLoader, authorization)) as any;\n    this._SfLoader.innerHTML = '';\n    if(xhr.status == 200) {\n\n      const jsonRespose = JSON.parse(xhr.responseText);\n      const fieldArr = JSON.parse(jsonRespose.data.value[this.apiResponseFieldList]) as Array<string>;\n\n      for(var i = 0; i < fieldArr.length; i++) {\n\n        console.log(fieldArr[i]);\n        await this.fetchDetail(fieldArr[i])\n\n      }\n      \n    } else {\n      const jsonRespose = JSON.parse(xhr.responseText);\n      this.setError(jsonRespose.error);\n    }\n\n  }\n\n  initCalendar = async () => {\n\n    var newDate = null;\n    var newMonth = null;\n    var newYear = null;\n    var startDate = new Date(this.calendarStartMM + '/' + this.calendarStartDD + '/' + this.calendarStartYYYY);\n\n    console.log('startDate', startDate);\n    \n    do {\n\n      this.calendar.push(startDate);\n      startDate.setDate(startDate.getDate() + 1);\n\n      newDate = (\"0\" + startDate.getDate()).slice(-2);\n      newMonth = (\"0\" + startDate.getMonth()).slice(-2);\n      newYear = (startDate.getFullYear());\n\n    } while(!(newDate == this.calendarStartDD && newMonth == ((\"0\" + ((parseInt(this.calendarStartMM) - 1) + \"\")).slice(-2)) && newYear === (parseInt(this.calendarStartYYYY) + 1)));\n\n    console.log(this.calendar);\n\n  }\n\n  initInputs = () => {\n\n    this.calendarStartDD = (\"0\" + this.calendarStartDD).slice(-2);\n    this.calendarStartMM = (\"0\" + this.calendarStartMM).slice(-2);\n\n  }\n\n  loadMode = async () => {\n\n    this.initInputs();\n    this.initCalendar();\n    await this.fetchList();\n    this.renderCalendar();\n\n  }\n\n  constructor() {\n    super();\n  }\n\n  protected override firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n\n    this.loadMode();\n\n  }\n  \n  override connectedCallback() {\n    super.connectedCallback()\n  }\n  \n  override render() {\n\n    return html`\n          \n      <link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\n      <div class=\"SfIEventsC\">\n        \n        <div class=\"d-flex justify-center\">\n            <div class=\"loader-element\"></div>\n        </div>\n        <div class=\"d-flex justify-center\">\n          <div class=\"lb\"></div>\n          <div class=\"d-flex flex-grow flex-wrap justify-center align-start\" id=\"calendar-container\">\n            \n          </div>\n          <div class=\"rb\"></div>\n        </div>\n        <div class=\"d-flex justify-between\">\n            <div class=\"lb\"></div>\n            <div>\n              <div class=\"div-row-error div-row-submit gone\">\n                <div part=\"errormsg\" class=\"div-row-error-message\"></div>\n              </div>\n              <div class=\"div-row-success div-row-submit gone\">\n                <div part=\"successmsg\" class=\"div-row-success-message\"></div>\n              </div>\n            </div>\n            <div class=\"rb\"></div>\n          </div>\n      </div>\n\n    `;\n  }\n\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sf-i-events': SfIEvents;\n  }\n}\n"]}