sf-i-events 1.0.1

package/src/sf-i-events.ts

@@ -0,0 +1,726 @@
+/**
+ * @license
+ * Copyright 2022 Superflow.dev
+ * SPDX-License-Identifier: MIT
+ */
+
+import {LitElement, html, css, PropertyValueMap} 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
+ */
+@customElement('sf-i-events')
+export class SfIEvents extends LitElement {
+  
+  @property()
+  apiIdList!: string;
+
+  @property()
+  apiIdDetail!: string;
+
+  @property()
+  apiMethodList!: string;
+
+  @property()
+  apiMethodDetail!: string;
+
+  @property()
+  apiBodyList!: string;
+
+  @property()
+  apiBodyDetail!: string;
+
+  @property()
+  apiResponseFieldList!: string;
+
+  @property()
+  calendarStartDD!: string;
+
+  @property()
+  calendarStartMM!: string;
+
+  @property()
+  calendarStartYYYY!: string;
+
+  @property()
+  calendar: Date [] = [];
+
+  @property()
+  monthNames: string []  = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+  @property()
+  events: any = null;
+
+  getApiBodyList = () => {
+    return JSON.parse(this.apiBodyList);
+  }
+
+  getApiBodyDetail = () => {
+    return JSON.parse(this.apiBodyDetail);
+  }
+
+  @property()
+  mode!: string;
+
+  @property()
+  flow: string = "";
+
+  static override 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%;
+      }
+
+    }
+
+  `;
+
+  @query('.div-row-error')
+  _SfRowError: any;
+
+  @query('.div-row-error-message')
+  _SfRowErrorMessage: any;
+
+  @query('.div-row-success')
+  _SfRowSuccess: any;
+
+  @query('.div-row-success-message')
+  _SfRowSuccessMessage: any;
+
+  @query('.loader-element')
+  _SfLoader: any;
+
+  @query('#calendar-container')
+  _SfCalendarContainer: any;
+
+  prepareXhr = async (data: any, url: string, loaderElement: any, authorization: any) => {
+
+    
+    if(loaderElement != null) {
+      loaderElement.innerHTML = '<div class="lds-dual-ring"></div>';
+    }
+    return await Util.callApi(url, data, authorization);
+
+  }
+
+  clearMessages = () => {
+    this._SfRowError.style.display = 'none';
+    this._SfRowErrorMessage.innerHTML = '';
+    this._SfRowSuccess.style.display = 'none';
+    this._SfRowSuccessMessage.innerHTML = '';
+  }
+
+  setError = (msg: string) => {
+    this._SfRowError.style.display = 'flex';
+    this._SfRowErrorMessage.innerHTML = msg;
+    this._SfRowSuccess.style.display = 'none';
+    this._SfRowSuccessMessage.innerHTML = '';
+  }
+
+  setSuccess = (msg: string) => {
+    this._SfRowError.style.display = 'none';
+    this._SfRowErrorMessage.innerHTML = '';
+    this._SfRowSuccess.style.display = 'flex';
+    this._SfRowSuccessMessage.innerHTML = msg;
+  }
+
+  getLastDayOfLastMonth = (month: number, year: number) => {
+    const date = new Date(year, month, 0);
+    console.log('last date of last month', month, date.getDate());
+    return date.getDate()
+  }
+
+  getLastDayOfMonth = (month: number, year: number) => {
+    const date = new Date(year, month + 1, 0);
+    return date.getDate()
+  }
+
+  getBlanks = (month: number, year: number) => {
+
+    const date = new Date(("0" + (month+1)).slice(-2) + '/01/' + year);
+    const day = date.getDay();
+    return day;
+
+  }
+
+  insertDates = (month: number, year: number) => {
+
+    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;
+
+  }
+
+  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;
+
+  }
+
+  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 as HTMLDivElement).innerHTML = html;
+
+  }
+
+  processEvent = (value: any) => {
+
+    console.log('processing due date', value.duedate.replace(/['"]+/g, ''));
+    const duedateArr = value.duedate.replace(/['"]+/g, '').split(",") as Array<string>;
+
+    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);
+
+  }
+
+  fetchDetail = async (value: any) => {
+
+    const body: any = 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 : any = (await this.prepareXhr(body, url, this._SfLoader, authorization)) as any;
+    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);
+    }
+
+  }
+
+  fetchList = async () => {
+
+    const body: any = 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 : any = (await this.prepareXhr(body, url, this._SfLoader, authorization)) as any;
+    this._SfLoader.innerHTML = '';
+    if(xhr.status == 200) {
+
+      const jsonRespose = JSON.parse(xhr.responseText);
+      const fieldArr = JSON.parse(jsonRespose.data.value[this.apiResponseFieldList]) as Array<string>;
+
+      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);
+    }
+
+  }
+
+  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);
+
+  }
+
+  initInputs = () => {
+
+    this.calendarStartDD = ("0" + this.calendarStartDD).slice(-2);
+    this.calendarStartMM = ("0" + this.calendarStartMM).slice(-2);
+
+  }
+
+  loadMode = async () => {
+
+    this.initInputs();
+    this.initCalendar();
+    await this.fetchList();
+    this.renderCalendar();
+
+  }
+
+  constructor() {
+    super();
+  }
+
+  protected override firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+
+    this.loadMode();
+
+  }
+  
+  override connectedCallback() {
+    super.connectedCallback()
+  }
+  
+  override 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>
+
+    `;
+  }
+
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sf-i-events': SfIEvents;
+  }
+}