@underpostnet/cyberia 3.2.80

package/src/client/components/core/CalendarCore.js

@@ -0,0 +1,437 @@
+import { EventSchedulerService } from '../../services/event-scheduler/event-scheduler.service.js';
+import { Auth } from './Auth.js';
+import { BtnIcon } from './BtnIcon.js';
+import { isValidDate, newInstance, range, s4 } from './CommonJs.js';
+import { renderCssAttr } from './Css.js';
+import { Modal } from './Modal.js';
+import { NotificationManager } from './NotificationManager.js';
+import { Panel } from './Panel.js';
+import { Responsive } from './Responsive.js';
+import { listenQueryPathInstance, RouterEvents, setQueryPath, getQueryParams } from './Router.js';
+import { Translate } from './Translate.js';
+import { append, getTimeZone, htmls, s, sa } from './VanillaJs.js';
+// https://fullcalendar.io/docs/event-object
+const daysOfWeekOptions = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
+const eventDateFactory = (event) =>
+  newInstance({
+    event: { ...event.extendedProps, title: event._def.title },
+    start: event.start,
+    end: event.end,
+  });
+class CalendarCore {
+  static async RenderStyle() {}
+  static Data = {};
+  static async instance(options = { idModal: '', appStore: {}, hiddenDates: [] }) {
+    CalendarCore.Data[options.idModal] = {
+      data: [],
+      originData: [],
+      filesData: [],
+      calendar: {},
+      hiddenDates: options.hiddenDates ? options.hiddenDates : [],
+    };
+    const titleIcon = html`<i class="fas fa-calendar-alt"></i>`;
+    const getPanelData = async () => {
+      const result = await EventSchedulerService.get({
+        id: `${getQueryParams().cid ? getQueryParams().cid : Auth.getToken() ? 'creatorUser' : ''}`,
+      });
+      NotificationManager.Push({
+        html: result.status === 'success' ? Translate.instance('success-get-events-scheduler') : result.message,
+        status: result.status,
+      });
+      if (result.status === 'success') {
+        const resultData = Array.isArray(result.data) ? result.data : result.data ? [result.data] : [];
+        CalendarCore.Data[options.idModal].filesData = [];
+        CalendarCore.Data[options.idModal].originData = newInstance(resultData);
+        CalendarCore.Data[options.idModal].data = resultData.map((o) => {
+          if (o.creatorUserId && options.appStore.Data.user.main.model.user._id === o.creatorUserId) o.tools = true;
+          o.id = o._id;
+          CalendarCore.Data[options.idModal].filesData.push({});
+          return o;
+        });
+        setTimeout(() => {
+          renderCalendar(
+            resultData.map((o) => {
+              // FREQ=WEEKLY;
+              // if (o.daysOfWeek && o.daysOfWeek.length > 0) {
+              //   o.rrule = `RRULE:BYDAY=${o.daysOfWeek.map((d) => `${d[0]}${d[1]}`.toUpperCase()).join(',')}`;
+              // }
+              // o.rrule = 'FREQ=WEEKLY;BYDAY=SU;BYHOUR=10,11;COUNT=10';
+              if (o.daysOfWeek && o.daysOfWeek.length > 0)
+                o.daysOfWeek = o.daysOfWeek.map((v, i) => daysOfWeekOptions.indexOf(v));
+              else delete o.daysOfWeek;
+              // o.exdate = ['2024-04-02'];
+              // delete o.end;
+              // delete o.start;
+              return o;
+            }),
+          );
+        });
+      }
+    };
+    const renderCalendar = (events) => {
+      const calendarEl = s(`.calendar-${idPanel}`);
+      CalendarCore.Data[options.idModal].calendar = new FullCalendar.Calendar(calendarEl, {
+        allDaySlot: false,
+        plugins: [
+          FullCalendar.DayGrid.default,
+          FullCalendar.TimeGrid.default,
+          FullCalendar.List.default,
+          // https://fullcalendar.io/docs/rrule-plugin
+          FullCalendar.RRule.default,
+        ],
+        // initialView: 'dayGridWeek',
+        timeZone: getTimeZone(),
+        dateClick: function (arg) {
+          console.error('calendar dateClick', arg.date.toString());
+        },
+        events: events ?? [{ title: 'Meeting', start: new Date() }],
+        initialView: 'dayGridMonth',
+        headerToolbar: {
+          left: 'prev,next today',
+          center: 'title',
+          right: 'dayGridMonth,timeGridWeek,listWeek',
+        },
+        eventClick: async function (args) {
+          const dateData = eventDateFactory(args.event);
+          // element -> args.el
+          // remove all events associated ->  args.event.remove();
+          // console.error('eventClick', JSON.stringify(dateData, null, 4));
+          if (options.eventClick) await options.eventClick(dateData, args);
+        },
+        eventClassNames: function (args) {
+          // console.error('eventClassNames', JSON.stringify(dateData, null, 4));
+          if (!args.event.extendedProps._id) return args.event.remove();
+          const dateData = eventDateFactory(args.event);
+          if (
+            new Date(dateData.start).getTime() <= new Date().getTime() ||
+            CalendarCore.Data[options.idModal].hiddenDates.find(
+              (d) => d.eventSchedulerId === dateData.event._id && d.date === dateData.start,
+            )
+          )
+            return ['hide'];
+        },
+      });
+      CalendarCore.Data[options.idModal].calendar.render();
+    };
+    setTimeout(() => {
+      renderCalendar();
+      const applyFullCalendarLang = () => {
+        CalendarCore.Data[options.idModal].calendar.setOption('locale', s(`html`).lang);
+        if (s(`.fc-timegrid-axis-cushion`)) htmls(`.fc-timegrid-axis-cushion`, Translate.instance('all-day'));
+        if (s(`.fc-dayGridMonth-button`)) htmls(`.fc-dayGridMonth-button`, Translate.instance('month'));
+        if (s(`.fc-timeGridWeek-button`)) htmls(`.fc-timeGridWeek-button`, Translate.instance('week'));
+        if (s(`.fc-listWeek-button`)) htmls(`.fc-listWeek-button`, Translate.instance('summary'));
+        if (s(`.fc-today-button`)) htmls(`.fc-today-button`, Translate.instance('today'));
+      };
+      Translate.onChanged(applyFullCalendarLang, { key: 'fullcalendar-lang' });
+      setTimeout(() => {
+        applyFullCalendarLang();
+        s(`.fc-dayGridMonth-button`).onclick = () => {
+          applyFullCalendarLang();
+        };
+        s(`.fc-listWeek-button`).onclick = () => {
+          applyFullCalendarLang();
+        };
+        s(`.fc-timeGridWeek-button`).onclick = () => {
+          applyFullCalendarLang();
+        };
+        s(`.fc-next-button`).onclick = () => {
+          applyFullCalendarLang();
+        };
+        s(`.fc-prev-button`).onclick = () => {
+          applyFullCalendarLang();
+        };
+        s(`.fc-today-button`).onclick = () => {
+          applyFullCalendarLang();
+        };
+      });
+      sa(`.fc-button-group`)[1].style.float = 'right';
+    });
+    const idPanel = `calendar-panel-${options.idModal}`;
+    const formData = [
+      {
+        model: 'id',
+        id: 'id',
+        inputType: 'text',
+        disableRender: true,
+        rules: [{ type: 'isEmpty' }],
+      },
+      {
+        id: 'title',
+        model: 'title',
+        inputType: 'text',
+        rules: [{ type: 'isEmpty' }],
+        panel: { type: 'title' },
+      },
+      {
+        id: 'description',
+        model: 'description',
+        inputType: 'text',
+        rules: [{ type: 'isEmpty' }],
+        panel: { type: 'info-row' },
+      },
+      {
+        id: 'start',
+        model: 'start',
+        inputType: 'datetime-local',
+        translateCode: 'startTime',
+        panel: { type: 'info-row' },
+      },
+      {
+        id: 'end',
+        model: 'end',
+        inputType: 'datetime-local',
+        translateCode: 'endTime',
+        panel: { type: 'info-row' },
+      },
+      {
+        id: 'daysOfWeek',
+        model: 'daysOfWeek',
+        inputType: 'dropdown-checkbox',
+        dropdown: {
+          options: daysOfWeekOptions,
+        },
+        panel: { type: 'list' },
+      },
+      {
+        id: 'startTime',
+        model: 'startTime',
+        inputType: 'time',
+        panel: { type: 'info-row' },
+      },
+      {
+        id: 'endTime',
+        model: 'endTime',
+        inputType: 'time',
+        panel: { type: 'info-row' },
+      },
+    ];
+    setTimeout(() => {
+      s(`.close-calendar-container`).onclick = () => {
+        s(`.calendar-container`).classList.add('hide');
+        s(`.main-body-calendar-${options.idModal}`).classList.remove('hide');
+      };
+    });
+    const panelRender = async () => {
+      return html`${await Panel.instance({
+          idPanel,
+          parentIdModal: options.idModal,
+          formData,
+          data: CalendarCore.Data[options.idModal].data,
+          formContainerClass: '',
+          scrollClassContainer: `main-body-calendar-${options.idModal}`,
+          role: options.role,
+          originData: () => CalendarCore.Data[options.idModal].originData,
+          filesData: () => CalendarCore.Data[options.idModal].filesData,
+          onClick: async function ({ payload }) {
+            if (options.route) {
+              setQueryPath({ path: options.route, queryPath: payload._id });
+              if (options.parentIdModal) Modal.Data[options.parentIdModal].query = `${window.location.search}`;
+              await CalendarCore.Data[options.idModal].updatePanel();
+            }
+          },
+          titleIcon,
+          route: 'calendar',
+          callBackPanelRender: async function ({ data, fileRender, htmlRender }) {
+            return await htmlRender({
+              render: html`<div class="abs center">
+                <i class="far fa-calendar" style="font-size: 130px; color: #d3d3d3cf;"></i>
+              </div>`,
+            });
+          },
+          customButtons: [
+            {
+              label: html`<i class="fa-regular fa-calendar-days"></i> ${Translate.instance('calendar')}`,
+              onClick: function () {
+                s(`.calendar-container`).classList.remove('hide');
+                s(`.main-body-calendar-${options.idModal}`).classList.add('hide');
+                // renderCalendar();
+                CalendarCore.Data[options.idModal].calendar.setOption('height', 700);
+                Translate.emitChanged({ lang: s('html').lang });
+              },
+            },
+          ],
+          on: {
+            add: async function ({ data, editId }) {
+              if (data.daysOfWeek && data.daysOfWeek.length > 0 && daysOfWeekOptions[data.daysOfWeek[0]]) {
+                data.daysOfWeek = data.daysOfWeek.map((d) => daysOfWeekOptions[d]);
+              }
+              data.timeZoneClient = getTimeZone();
+              const {
+                status,
+                message,
+                data: documentData,
+              } = editId
+                ? await EventSchedulerService.put({
+                    id: editId,
+                    body: { ...data, _id: undefined },
+                  })
+                : await EventSchedulerService.post({ body: data });
+              NotificationManager.Push({
+                html:
+                  status === 'success'
+                    ? editId
+                      ? Translate.instance('success-edit-event-scheduler')
+                      : Translate.instance('success-add-event-scheduler')
+                    : message,
+                status: status,
+              });
+              if (status === 'success') {
+                documentData.tools = true;
+                // data._id = documentData._id;
+                data = documentData;
+                let originObj, indexOriginObj;
+                let filesData = {};
+                if (editId) {
+                  indexOriginObj = CalendarCore.Data[options.idModal].originData.findIndex((d) => d._id === editId);
+                  if (indexOriginObj > -1) originObj = CalendarCore.Data[options.idModal].originData[indexOriginObj];
+                }
+                if (originObj) {
+                  CalendarCore.Data[options.idModal].originData[indexOriginObj] = documentData;
+                  CalendarCore.Data[options.idModal].data[indexOriginObj] = data;
+                  CalendarCore.Data[options.idModal].filesData[indexOriginObj] = filesData;
+                } else {
+                  CalendarCore.Data[options.idModal].originData.push(documentData);
+                  CalendarCore.Data[options.idModal].data.push(data);
+                  CalendarCore.Data[options.idModal].filesData.push(filesData);
+                }
+                setQueryPath({ path: options.route, queryPath: documentData._id });
+                if (options.parentIdModal) Modal.Data[options.parentIdModal].query = `${window.location.search}`;
+                await CalendarCore.Data[options.idModal].updatePanel();
+              }
+              return { data, status, message };
+            },
+            remove: async function ({ e, data }) {
+              e.preventDefault();
+              const confirmResult = await Modal.RenderConfirm({
+                html: async () => {
+                  return html`
+                    <div class="in section-mp" style="text-align: center">
+                      ${Translate.instance('confirm-delete-item')}
+                      <br />
+                      "${data.description}"
+                    </div>
+                  `;
+                },
+                id: `delete-${idPanel}`,
+              });
+              if (confirmResult.status === 'confirm') {
+                const { status, message } = await EventSchedulerService.delete({
+                  id: data._id,
+                });
+                NotificationManager.Push({
+                  html: status,
+                  status,
+                });
+                setQueryPath({ path: options.route, queryPath: '' });
+                await CalendarCore.Data[options.idModal].updatePanel();
+                return { status };
+              }
+              return { status: 'error' };
+            },
+          },
+        })}
+        <div class="in" style="margin-bottom: 100px"></div>`;
+    };
+    let lastCid;
+    CalendarCore.Data[options.idModal].updatePanel = async () => {
+      const cid = getQueryParams().cid ? getQueryParams().cid : '';
+      if (lastCid === cid) return;
+      lastCid = cid;
+      if (s(`.main-body-calendar-${options.idModal}`)) {
+        // if (Auth.getToken())
+        // else getSrrData();
+        await getPanelData();
+        htmls(`.main-body-calendar-${options.idModal}`, await panelRender());
+      }
+    };
+    if (options.route) {
+      listenQueryPathInstance({
+        id: options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body',
+        routeId: options.route,
+        event: async (path) => {
+          CalendarCore.Data[options.idModal].updatePanel();
+        },
+      });
+      if (!options.parentIdModal)
+        Modal.Data['modal-menu'].onHome[idPanel] = async () => {
+          lastCid = undefined;
+          setQueryPath({ path: options.route, queryPath: '' });
+          await CalendarCore.Data[idPanel].updatePanel();
+        };
+    }
+    return html`
+      <div class="in main-body-calendar-${options.idModal}">${await panelRender()}</div>
+      <style>
+        .calendar-container {
+          color: black;
+          background: #fcfcfc;
+        }
+
+        .calendar-container a {
+          color: #4a4a4a;
+          cursor: pointer;
+        }
+        .calendar-container a:hover {
+          color: #8a8a8a;
+        }
+
+        .fc-toolbar-title {
+          font-size: 20px !important;
+          margin: 0px !important;
+          text-transform: uppercase;
+          color: #8a8a8a;
+          padding: 10px 5px 5px 5px;
+        }
+
+        .fc-button,
+        .fc-button-primary {
+          border: none !important;
+          border-radius: 0px !important;
+          background: #b1b1b1 !important;
+          margin: 3px !important;
+          /* color: #4a4a4a; */
+        }
+
+        .fc-button-primary:hover,
+        .fc-button:hover {
+          background: #4a4a4a !important;
+          /* background: #b1b1b1 !important; */
+          /* box-shadow: none !important;
+  border-radius: 0px !important;
+  border: none !important; */
+        }
+
+        .fc-button-primary:active .fc-button:active {
+          /* box-shadow: none !important;
+  border-radius: 0px !important;
+  border: none !important; */
+        }
+
+        .fc-toolbar {
+          display: block !important;
+        }
+
+        .fc-toolbar-chunk {
+          padding: 5px;
+        }
+
+        .calendar-buttons-container {
+          padding-bottom: 15px;
+          height: 60px;
+        }
+      </style>
+      <div class="in calendar-container hide">
+        <div class="in modal calendar-buttons-container">
+          ${await BtnIcon.instance({
+            class: `inl section-mp btn-custom close-calendar-container flr`,
+            label: html`<i class="fa-solid fa-xmark"></i> ${Translate.instance('close')}`,
+            type: 'button',
+          })}
+        </div>
+        <div class="in"><div class="calendar-${idPanel}"></div></div>
+      </div>
+    `;
+  }
+}
+export { CalendarCore };

package/src/client/components/core/Chat.js

@@ -0,0 +1,62 @@
+import { BtnIcon } from './BtnIcon.js';
+import { getId, getIsoDate } from './CommonJs.js';
+import { Input } from './Input.js';
+import { Modal } from './Modal.js';
+import { SocketIo } from './SocketIo.js';
+import { Translate } from './Translate.js';
+import { s, append } from './VanillaJs.js';
+class Chat {
+  static Data = {};
+  static async instance(options) {
+    const { idModal } = options;
+    Chat.Data[idModal] = {};
+    setTimeout(() => {
+      Modal.Data[idModal].onObserverListener[`chat-${idModal}`] = (options) => {
+        const { height } = options;
+        s(`.chat-box`).style.height = `${height - 250}px`;
+      };
+      s(`.btn-send-chat-${idModal}`).onclick = (e) => {
+        e.preventDefault();
+        if (!s(`.input-chat-${idModal}`).value) return;
+        Chat.appendChatBox({ id: SocketIo.socket.id, idModal, message: s(`.input-chat-${idModal}`).value });
+        SocketIo.Emit('chat', {
+          message: s(`.input-chat-${idModal}`).value,
+        });
+        s(`.input-chat-${idModal}`).value = '';
+      };
+    });
+    return html`
+      <form>
+        <div class="in section-mp chat-box ${idModal}-chat-box"></div>
+        ${await Input.instance({
+          id: `input-chat-${idModal}`,
+          label: html`<i class="fa-solid fa-pen-to-square"></i> ${Translate.instance('write')}`,
+          containerClass: 'in section-mp width-mini-box-hover input-container-width',
+          placeholder: true,
+        })}
+        <div class="in">
+          ${await BtnIcon.instance({
+            class: `btn-send-chat-${idModal}`,
+            label: Translate.instance('send'),
+            type: 'submit',
+          })}
+        </div>
+      </form>
+    `;
+  }
+  static appendChatBox(options) {
+    const { idModal, id, message } = options;
+    if (!s(`.${idModal}-chat-box`)) return;
+    append(
+      `.${idModal}-chat-box`,
+      html`
+        <div class="in">
+          <span class="chat-message-header">${getIsoDate(new Date())} | ${id}:</span><br />
+          <span class="chat-message-body"> ${message}</span>
+        </div>
+      `,
+    );
+    s(`.${idModal}-chat-box`).scrollTop = s(`.${idModal}-chat-box`).scrollHeight;
+  }
+}
+export { Chat };

package/src/client/components/core/ClientEvents.js

@@ -0,0 +1,163 @@
+import { EventBus } from './EventBus.js';
+
+const AuthEventType = {
+  login: 'auth:login',
+  logout: 'auth:logout',
+  signup: 'auth:signup',
+};
+
+const SessionEventType = {
+  updated: 'session:updated',
+  cleared: 'session:cleared',
+};
+
+const SocketEventType = {
+  connect: 'socket:connect',
+  connectError: 'socket:connect-error',
+  disconnect: 'socket:disconnect',
+  channel: (channel) => `socket:channel:${channel}`,
+};
+
+const TranslateEventType = {
+  changed: 'translate:changed',
+};
+
+const ResponsiveEventType = {
+  changed: 'responsive:changed',
+  settled: 'responsive:settled',
+  orientationChanged: 'responsive:orientation:changed',
+  orientationSettled: 'responsive:orientation:settled',
+};
+
+const RecoverEventType = {
+  triggered: 'recover:triggered',
+};
+
+const KeyboardEventType = {
+  pressed: 'keyboard:pressed',
+};
+
+const AccountEventType = {
+  updated: 'account:updated',
+};
+
+const AppointmentEventType = {
+  submitted: 'appointment:submitted',
+};
+
+const ModalEventType = {
+  close: 'modal:close',
+  menu: 'modal:menu',
+  collapseMenu: 'modal:collapse-menu',
+  extendMenu: 'modal:extend-menu',
+  dragEnd: 'modal:drag-end',
+  observer: 'modal:observer',
+  click: 'modal:click',
+  expandUi: 'modal:expand-ui',
+  barUiOpen: 'modal:bar-ui-open',
+  barUiClose: 'modal:bar-ui-close',
+  reload: 'modal:reload',
+  home: 'modal:home',
+};
+
+const ModalListenerChannels = {
+  onCloseListener: ModalEventType.close,
+  onMenuListener: ModalEventType.menu,
+  onCollapseMenuListener: ModalEventType.collapseMenu,
+  onExtendMenuListener: ModalEventType.extendMenu,
+  onDragEndListener: ModalEventType.dragEnd,
+  onObserverListener: ModalEventType.observer,
+  onClickListener: ModalEventType.click,
+  onExpandUiListener: ModalEventType.expandUi,
+  onBarUiOpen: ModalEventType.barUiOpen,
+  onBarUiClose: ModalEventType.barUiClose,
+  onReloadModalListener: ModalEventType.reload,
+  onHome: ModalEventType.home,
+};
+
+const createModalEventChannel = (bus, type) => {
+  const busKey = (key) => `${type}::${key}`;
+  return new Proxy(
+    {},
+    {
+      get(_target, prop) {
+        if (typeof prop === 'symbol') return undefined;
+        const key = busKey(prop);
+        if (!bus.has(key)) return undefined;
+        return (detail) => bus.emitKey(key, detail);
+      },
+      set(_target, prop, value) {
+        if (typeof prop !== 'symbol' && typeof value === 'function') bus.on(type, value, { key: busKey(prop) });
+        return true;
+      },
+      deleteProperty(_target, prop) {
+        if (typeof prop !== 'symbol') bus.off(busKey(prop));
+        return true;
+      },
+      has(_target, prop) {
+        return typeof prop !== 'symbol' && bus.has(busKey(prop));
+      },
+      ownKeys() {
+        const prefix = `${type}::`;
+        return bus.keysOf(type).map((key) => String(key).slice(prefix.length));
+      },
+      getOwnPropertyDescriptor(_target, prop) {
+        if (typeof prop !== 'symbol' && bus.has(busKey(prop)))
+          return { enumerable: true, configurable: true, writable: true, value: undefined };
+        return undefined;
+      },
+    },
+  );
+};
+
+// One EventBus per modal id, surfaced through the legacy channel names.
+const createModalEvents = () => {
+  const bus = new EventBus();
+  const channels = {};
+  for (const [name, type] of Object.entries(ModalListenerChannels)) channels[name] = createModalEventChannel(bus, type);
+  return { bus, channels };
+};
+
+const authLoginEvents = new EventBus();
+const authLogoutEvents = new EventBus();
+const authSignupEvents = new EventBus();
+const sessionEvents = new EventBus();
+const socketEvents = new EventBus();
+const translateEvents = new EventBus();
+const responsiveChangeEvents = new EventBus();
+const responsiveSettledEvents = new EventBus();
+const responsiveOrientationEvents = new EventBus();
+const responsiveOrientationSettledEvents = new EventBus();
+const recoverEvents = new EventBus();
+const keyboardEvents = new EventBus();
+const accountEvents = new EventBus();
+const appointmentEvents = new EventBus();
+
+export {
+  AuthEventType,
+  SessionEventType,
+  SocketEventType,
+  TranslateEventType,
+  ResponsiveEventType,
+  RecoverEventType,
+  KeyboardEventType,
+  AccountEventType,
+  AppointmentEventType,
+  ModalEventType,
+  ModalListenerChannels,
+  createModalEvents,
+  authLoginEvents,
+  authLogoutEvents,
+  authSignupEvents,
+  sessionEvents,
+  socketEvents,
+  translateEvents,
+  responsiveChangeEvents,
+  responsiveSettledEvents,
+  responsiveOrientationEvents,
+  responsiveOrientationSettledEvents,
+  recoverEvents,
+  keyboardEvents,
+  accountEvents,
+  appointmentEvents,
+};