Adds new mobile menu for filtering

KSJaay · Nov 17, 2024 · c8abb2a · c8abb2a
1 parent 90ead5f
commit c8abb2a
Show file tree

Hide file tree

Showing 15 changed files with 286 additions and 100 deletions.
diff --git a/app/components/home/menu/mobile.jsx b/app/components/home/menu/mobile.jsx
@@ -1,12 +1,14 @@
 // import dependencies
 import PropTypes from 'prop-types';
+import { FaCog, FaPlus } from 'react-icons/fa';
 import { observer } from 'mobx-react-lite';
 
 // import local files
-import useDropdown from '../../../hooks/useDropdown';
-import { FaEllipsisVertical } from '../../icons';
-import Dropdown from '../../ui/dropdown';
 import useContextStore from '../../../context';
+import Modal from '../../ui/modal';
+import Button from '../../ui/button';
+import HomeMobileMenuStatus from './mobile/status';
+import HomeMobileMenuLayout from './mobile/layout';
 import MonitorConfigureModal from '../../modal/monitor/configure';
 
 const HomeMenuMobile = ({ handleReset }) => {
@@ -15,40 +17,54 @@ const HomeMenuMobile = ({ handleReset }) => {
     globalStore: { addMonitor },
   } = useContextStore();
 
-  const { toggleDropdown, dropdownIsOpen } = useDropdown(true);
   return (
-    <Dropdown.Container isOpen={dropdownIsOpen} toggleDropdown={toggleDropdown}>
-      <Dropdown.Trigger
-        isOpen={dropdownIsOpen}
-        toggleDropdown={toggleDropdown}
-        style={{ height: '45px' }}
-      >
-        <FaEllipsisVertical style={{ width: '30px', height: '30px' }} />
-      </Dropdown.Trigger>
-      <Dropdown.List isOpen={dropdownIsOpen}>
-        <Dropdown.Item
-          onClick={() =>
-            openModal(
-              <MonitorConfigureModal
-                closeModal={closeModal}
-                handleMonitorSubmit={addMonitor}
-              />,
-              false
-            )
-          }
-        >
-          Add Monitor
-        </Dropdown.Item>
-        <Dropdown.Item
-          onClick={() => {
-            handleReset();
-            toggleDropdown();
-          }}
-        >
-          Reset
-        </Dropdown.Item>
-      </Dropdown.List>
-    </Dropdown.Container>
+    <Button
+      iconLeft={<FaCog style={{ width: '30px', height: '30px' }} />}
+      onClick={() => {
+        openModal(
+          <Modal.Container>
+            <Modal.Title>Settings</Modal.Title>
+            <Modal.Message>
+              <div className="input-label">Status</div>
+              <HomeMobileMenuStatus />
+              <div className="input-label">Layout</div>
+              <HomeMobileMenuLayout />
+              <br />
+              <Button
+                iconLeft={<FaPlus style={{ width: '20px', height: '20px' }} />}
+                color={'gray'}
+                fullWidth
+                onClick={() => {
+                  closeModal();
+                  openModal(
+                    <MonitorConfigureModal
+                      closeModal={closeModal}
+                      handleMonitorSubmit={addMonitor}
+                    />,
+                    false
+                  );
+                }}
+              >
+                New Monitor
+              </Button>
+            </Modal.Message>
+            <Modal.Actions>
+              <Modal.Button onClick={closeModal}>Close</Modal.Button>
+              <Modal.Button
+                color="red"
+                onClick={() => {
+                  handleReset();
+                  closeModal();
+                }}
+              >
+                Reset
+              </Modal.Button>
+            </Modal.Actions>
+          </Modal.Container>,
+          false
+        );
+      }}
+    />
   );
 };
 

diff --git a/app/components/home/menu/mobile/layout.jsx b/app/components/home/menu/mobile/layout.jsx
@@ -0,0 +1,71 @@
+// import dependencies
+import { observer } from 'mobx-react-lite';
+
+// import local files
+import useDropdown from '../../../../hooks/useDropdown';
+import Dropdown from '../../../ui/dropdown';
+import useLocalStorageContext from '../../../../hooks/useLocalstorage';
+import { FaBars, IoGrid } from '../../../icons';
+
+const views = [
+  {
+    text: 'Cards',
+    id: 'cards',
+    icon: <IoGrid style={{ width: '20px', height: '20px' }} />,
+  },
+  {
+    text: 'Compact',
+    id: 'compact',
+    icon: <FaBars style={{ width: '20px', height: '20px' }} />,
+  },
+];
+
+const HomeMobileMenuLayout = () => {
+  const { toggleDropdown, dropdownIsOpen } = useDropdown(true);
+
+  const { layout, setLayout } = useLocalStorageContext();
+
+  const dropdownItems = views.map((view) => (
+    <Dropdown.Item
+      key={view.id}
+      onClick={() => {
+        setLayout(view.id);
+        toggleDropdown();
+      }}
+      showDot
+      isSelected={layout === view.id}
+      dotColor="primary"
+    >
+      <div className="layout-option">
+        {view.icon}
+        {view.text}
+      </div>
+    </Dropdown.Item>
+  ));
+
+  return (
+    <Dropdown.Container
+      position="center"
+      isOpen={dropdownIsOpen}
+      toggleDropdown={toggleDropdown}
+      id="home-menu-layout"
+    >
+      <Dropdown.Trigger
+        isOpen={dropdownIsOpen}
+        toggleDropdown={toggleDropdown}
+        asInput
+      >
+        {layout.charAt(0).toUpperCase() + layout.slice(1)}
+      </Dropdown.Trigger>
+      <Dropdown.List isOpen={dropdownIsOpen} fullWidth>
+        {dropdownItems}
+      </Dropdown.List>
+    </Dropdown.Container>
+  );
+};
+
+HomeMobileMenuLayout.displayName = 'HomeMobileMenuLayout';
+
+HomeMobileMenuLayout.propTypes = {};
+
+export default observer(HomeMobileMenuLayout);
diff --git a/app/components/home/menu/mobile/status.jsx b/app/components/home/menu/mobile/status.jsx
@@ -0,0 +1,73 @@
+// import local files
+import useDropdown from '../../../../hooks/useDropdown';
+import Dropdown from '../../../ui/dropdown';
+import useLocalStorageContext from '../../../../hooks/useLocalstorage';
+
+import { HiStatusOffline, HiStatusOnline, FaBars } from '../../../icons';
+
+const statusOptions = [
+  {
+    text: 'All',
+    id: 'all',
+    icon: <FaBars style={{ width: '20px', height: '20px' }} />,
+  },
+  {
+    text: 'Up',
+    id: 'up',
+    icon: <HiStatusOnline style={{ width: '20px', height: '20px' }} />,
+  },
+  {
+    text: 'Down',
+    id: 'down',
+    icon: <HiStatusOffline style={{ width: '20px', height: '20px' }} />,
+  },
+];
+
+const HomeMobileMenuStatus = () => {
+  const { toggleDropdown, dropdownIsOpen } = useDropdown(true);
+
+  const { status, setStatus } = useLocalStorageContext();
+
+  const dropdownItems = statusOptions.map((view) => (
+    <Dropdown.Item
+      key={view.id}
+      onClick={() => {
+        setStatus(view.id);
+        toggleDropdown();
+      }}
+      showDot
+      isSelected={status === view.id}
+    >
+      <div className="layout-option">
+        {view.icon}
+        {view.text}
+      </div>
+    </Dropdown.Item>
+  ));
+
+  return (
+    <Dropdown.Container
+      position="center"
+      isOpen={dropdownIsOpen}
+      toggleDropdown={toggleDropdown}
+      id="home-menu-status"
+    >
+      <Dropdown.Trigger
+        isOpen={dropdownIsOpen}
+        toggleDropdown={toggleDropdown}
+        asInput
+      >
+        {status.charAt(0).toUpperCase() + status.slice(1)}
+      </Dropdown.Trigger>
+      <Dropdown.List isOpen={dropdownIsOpen} fullWidth>
+        {dropdownItems}
+      </Dropdown.List>
+    </Dropdown.Container>
+  );
+};
+
+HomeMobileMenuStatus.displayName = 'HomeMobileMenuStatus';
+
+HomeMobileMenuStatus.propTypes = {};
+
+export default HomeMobileMenuStatus;
diff --git a/app/components/home/menu/styles.scss b/app/components/home/menu/styles.scss
@@ -27,12 +27,6 @@
   display: none;
 }
 
-@include tablet {
-  #home-menu-status {
-    display: none;
-  }
-}
-
 @include mobile {
   .home-menu-buttons {
     display: none;

diff --git a/app/components/home/monitor/layout/compact/index.jsx b/app/components/home/monitor/layout/compact/index.jsx
@@ -0,0 +1,54 @@
+import './styles.scss';
+
+// import dependencies
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Monitor from '../../../../../pages/monitor';
+
+const MonitorCompact = ({ children, monitor_id }) => {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '400px 1fr',
+        backgroundColor: 'var(--accent-800)',
+        overflow: 'hidden',
+      }}
+    >
+      <div
+        className="home-monitor-table"
+        style={{
+          backgroundColor: 'var(--accent-900)',
+          justifyContent: 'flex-start',
+          borderRadius: 'var(--radius-md)',
+        }}
+      >
+        <div className="home-monitor-table-container-compact">
+          <div className="home-monitor-table-header">Name</div>
+          <div className="home-monitor-table-header">Uptime</div>
+        </div>
+
+        <div className="home-monitor-table-content">{children}</div>
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          overflow: 'auto',
+          overflowX: 'hidden',
+          borderRadius: 'var(--radius-md)',
+        }}
+      >
+        <Monitor monitor_id="b65d48bd-64df-4c11-9a53-315ced89e974" />
+      </div>
+    </div>
+  );
+};
+
+MonitorCompact.displayName = 'MonitorCompact';
+MonitorCompact.propTypes = {
+  children: PropTypes.node,
+  monitor_id: PropTypes.string,
+};
+
+export default MonitorCompact;
diff --git a/...omponents/home/monitor/layout/compact.jsx → ...s/home/monitor/layout/compact/monitor.jsx b/...omponents/home/monitor/layout/compact.jsx → ...s/home/monitor/layout/compact/monitor.jsx
@@ -1,16 +1,13 @@
-import './compact.scss';
-
 // import dependencies
 import { useNavigate } from 'react-router-dom';
 
 // import local files
-import { monitorPropType } from '../../../../../shared/utils/propTypes';
+import { monitorPropType } from '../../../../../../shared/utils/propTypes';
 
-const MonitorList = ({ monitor = {} }) => {
+const MonitorCompactItem = ({ monitor = {} }) => {
   const navigate = useNavigate();
 
-  const { name, uptimePercentage = '0', heartbeats = [] } = monitor;
-  const [heartbeat = {}] = heartbeats;
+  const { name, uptimePercentage = '0' } = monitor;
 
   return (
     <div
@@ -20,19 +17,15 @@ const MonitorList = ({ monitor = {} }) => {
     >
       <div className="home-monitor-name-compact">{name}</div>
 
-      <div className="home-monitor-uptime-compact">
-        {heartbeat.latency ? `${heartbeat.latency}ms` : '0ms'}
-      </div>
-
       <div className="home-monitor-uptime-compact">{uptimePercentage}%</div>
     </div>
   );
 };
 
-MonitorList.displayName = 'MonitorList';
+MonitorCompactItem.displayName = 'MonitorCompactItem';
 
-MonitorList.propTypes = {
+MonitorCompactItem.propTypes = {
   monitor: monitorPropType.isRequired,
 };
 
-export default MonitorList;
+export default MonitorCompactItem;
diff --git a/...mponents/home/monitor/layout/compact.scss → ...s/home/monitor/layout/compact/styles.scss b/...mponents/home/monitor/layout/compact.scss → ...s/home/monitor/layout/compact/styles.scss
@@ -1,4 +1,4 @@
-@use '../../../../styles/pxToRem.scss' as *;
+@use '../../../../../styles/pxToRem.scss' as *;
 
 .home-monitor-container-compact {
   width: 100%;