cyberia 3.2.5 → 3.2.9

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

@@ -10,49 +10,42 @@ 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,
   });
-
-const CalendarCore = {
-  RenderStyle: async function () {},
-  Data: {},
-  Render: async function (options = { idModal: '', appStore: {}, hiddenDates: [] }) {
-    this.Data[options.idModal] = {
+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.Render('success-get-events-scheduler') : result.message,
+        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] : [];
-        this.Data[options.idModal].filesData = [];
-        this.Data[options.idModal].originData = newInstance(resultData);
-        this.Data[options.idModal].data = resultData.map((o) => {
+        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;
-
-          this.Data[options.idModal].filesData.push({});
+          CalendarCore.Data[options.idModal].filesData.push({});
           return o;
         });
         setTimeout(() => {
@@ -69,17 +62,15 @@ const CalendarCore = {
               // o.exdate = ['2024-04-02'];
               // delete o.end;
               // delete o.start;
-
               return o;
             }),
           );
         });
       }
     };
-
     const renderCalendar = (events) => {
       const calendarEl = s(`.calendar-${idPanel}`);
-      this.Data[options.idModal].calendar = new FullCalendar.Calendar(calendarEl, {
+      CalendarCore.Data[options.idModal].calendar = new FullCalendar.Calendar(calendarEl, {
         allDaySlot: false,
         plugins: [
           FullCalendar.DayGrid.default,
@@ -120,44 +111,42 @@ const CalendarCore = {
             return ['hide'];
         },
       });
-
-      this.Data[options.idModal].calendar.render();
+      CalendarCore.Data[options.idModal].calendar.render();
     };
     setTimeout(() => {
       renderCalendar();
-      Translate.Event['fullcalendar-lang'] = () => {
-        this.Data[options.idModal].calendar.setOption('locale', s(`html`).lang);
-        if (s(`.fc-timegrid-axis-cushion`)) htmls(`.fc-timegrid-axis-cushion`, Translate.Render('all-day'));
-        if (s(`.fc-dayGridMonth-button`)) htmls(`.fc-dayGridMonth-button`, Translate.Render('month'));
-        if (s(`.fc-timeGridWeek-button`)) htmls(`.fc-timeGridWeek-button`, Translate.Render('week'));
-        if (s(`.fc-listWeek-button`)) htmls(`.fc-listWeek-button`, Translate.Render('summary'));
-        if (s(`.fc-today-button`)) htmls(`.fc-today-button`, Translate.Render('today'));
+      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(() => {
-        Translate.Event['fullcalendar-lang']();
+        applyFullCalendarLang();
         s(`.fc-dayGridMonth-button`).onclick = () => {
-          Translate.Event['fullcalendar-lang']();
+          applyFullCalendarLang();
         };
         s(`.fc-listWeek-button`).onclick = () => {
-          Translate.Event['fullcalendar-lang']();
+          applyFullCalendarLang();
         };
         s(`.fc-timeGridWeek-button`).onclick = () => {
-          Translate.Event['fullcalendar-lang']();
+          applyFullCalendarLang();
         };
         s(`.fc-next-button`).onclick = () => {
-          Translate.Event['fullcalendar-lang']();
+          applyFullCalendarLang();
         };
         s(`.fc-prev-button`).onclick = () => {
-          Translate.Event['fullcalendar-lang']();
+          applyFullCalendarLang();
         };
         s(`.fc-today-button`).onclick = () => {
-          Translate.Event['fullcalendar-lang']();
+          applyFullCalendarLang();
         };
       });
-
       sa(`.fc-button-group`)[1].style.float = 'right';
     });
-
     const idPanel = `calendar-panel-${options.idModal}`;
     const formData = [
       {
@@ -217,25 +206,23 @@ const CalendarCore = {
         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.Render({
+      return html`${await Panel.instance({
           idPanel,
           parentIdModal: options.idModal,
           formData,
-          data: this.Data[options.idModal].data,
+          data: CalendarCore.Data[options.idModal].data,
           formContainerClass: '',
           scrollClassContainer: `main-body-calendar-${options.idModal}`,
           role: options.role,
-          originData: () => this.Data[options.idModal].originData,
-          filesData: () => this.Data[options.idModal].filesData,
+          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 });
@@ -254,13 +241,13 @@ const CalendarCore = {
           },
           customButtons: [
             {
-              label: html`<i class="fa-regular fa-calendar-days"></i> ${Translate.Render('calendar')}`,
+              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.Event['fullcalendar-lang']();
+                Translate.emitChanged({ lang: s('html').lang });
               },
             },
           ],
@@ -284,17 +271,15 @@ const CalendarCore = {
                 html:
                   status === 'success'
                     ? editId
-                      ? Translate.Render('success-edit-event-scheduler')
-                      : Translate.Render('success-add-event-scheduler')
+                      ? 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) {
@@ -310,7 +295,6 @@ const CalendarCore = {
                   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();
@@ -323,7 +307,7 @@ const CalendarCore = {
                 html: async () => {
                   return html`
                     <div class="in section-mp" style="text-align: center">
-                      ${Translate.Render('confirm-delete-item')}
+                      ${Translate.instance('confirm-delete-item')}
                       <br />
                       "${data.description}"
                     </div>
@@ -339,10 +323,8 @@ const CalendarCore = {
                   html: status,
                   status,
                 });
-
                 setQueryPath({ path: options.route, queryPath: '' });
                 await CalendarCore.Data[options.idModal].updatePanel();
-
                 return { status };
               }
               return { status: 'error' };
@@ -351,9 +333,8 @@ const CalendarCore = {
         })}
         <div class="in" style="margin-bottom: 100px"></div>`;
     };
-
     let lastCid;
-    this.Data[options.idModal].updatePanel = async () => {
+    CalendarCore.Data[options.idModal].updatePanel = async () => {
       const cid = getQueryParams().cid ? getQueryParams().cid : '';
       if (lastCid === cid) return;
       lastCid = cid;
@@ -364,7 +345,6 @@ const CalendarCore = {
         htmls(`.main-body-calendar-${options.idModal}`, await panelRender());
       }
     };
-
     if (options.route) {
       listenQueryPathInstance({
         id: options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body',
@@ -377,7 +357,7 @@ const CalendarCore = {
         Modal.Data['modal-menu'].onHome[idPanel] = async () => {
           lastCid = undefined;
           setQueryPath({ path: options.route, queryPath: '' });
-          await this.Data[idPanel].updatePanel();
+          await CalendarCore.Data[idPanel].updatePanel();
         };
     }
     return html`
@@ -443,16 +423,15 @@ const CalendarCore = {
       </style>
       <div class="in calendar-container hide">
         <div class="in modal calendar-buttons-container">
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: `inl section-mp btn-custom close-calendar-container flr`,
-            label: html`<i class="fa-solid fa-xmark"></i> ${Translate.Render('close')}`,
+            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

@@ -5,12 +5,11 @@ import { Modal } from './Modal.js';
 import { SocketIo } from './SocketIo.js';
 import { Translate } from './Translate.js';
 import { s, append } from './VanillaJs.js';
-
-const Chat = {
-  Data: {},
-  Render: async function (options) {
+class Chat {
+  static Data = {};
+  static async instance(options) {
     const { idModal } = options;
-    this.Data[idModal] = {};
+    Chat.Data[idModal] = {};
     setTimeout(() => {
       Modal.Data[idModal].onObserverListener[`chat-${idModal}`] = (options) => {
         const { height } = options;
@@ -19,7 +18,7 @@ const Chat = {
       s(`.btn-send-chat-${idModal}`).onclick = (e) => {
         e.preventDefault();
         if (!s(`.input-chat-${idModal}`).value) return;
-        this.appendChatBox({ id: SocketIo.socket.id, idModal, message: s(`.input-chat-${idModal}`).value });
+        Chat.appendChatBox({ id: SocketIo.socket.id, idModal, message: s(`.input-chat-${idModal}`).value });
         SocketIo.Emit('chat', {
           message: s(`.input-chat-${idModal}`).value,
         });
@@ -29,23 +28,23 @@ const Chat = {
     return html`
       <form>
         <div class="in section-mp chat-box ${idModal}-chat-box"></div>
-        ${await Input.Render({
+        ${await Input.instance({
           id: `input-chat-${idModal}`,
-          label: html`<i class="fa-solid fa-pen-to-square"></i> ${Translate.Render('write')}`,
+          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.Render({
+          ${await BtnIcon.instance({
             class: `btn-send-chat-${idModal}`,
-            label: Translate.Render('send'),
+            label: Translate.instance('send'),
             type: 'submit',
           })}
         </div>
       </form>
     `;
-  },
-  appendChatBox: function (options) {
+  }
+  static appendChatBox(options) {
     const { idModal, id, message } = options;
     if (!s(`.${idModal}-chat-box`)) return;
     append(
@@ -58,7 +57,6 @@ const Chat = {
       `,
     );
     s(`.${idModal}-chat-box`).scrollTop = s(`.${idModal}-chat-box`).scrollHeight;
-  },
-};
-
+  }
+}
 export { Chat };

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

@@ -0,0 +1,87 @@
+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 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,
+  authLoginEvents,
+  authLogoutEvents,
+  authSignupEvents,
+  sessionEvents,
+  socketEvents,
+  translateEvents,
+  responsiveChangeEvents,
+  responsiveSettledEvents,
+  responsiveOrientationEvents,
+  responsiveOrientationSettledEvents,
+  recoverEvents,
+  keyboardEvents,
+  accountEvents,
+  appointmentEvents,
+};