verpest dit niet

kerberos-io · Apr 24, 2024 · 717429f · 717429f
1 parent c6349e8
commit 717429f
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 4 deletions.
diff --git a/machinery/package-lock.json b/machinery/package-lock.json
diff --git a/ui/src/components/TimePicker/TimePicker.jsx b/ui/src/components/TimePicker/TimePicker.jsx
@@ -0,0 +1,10 @@
+import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
+import React from 'react';
+import './TimePicker.scss';
+
+class TimePicker extends React.Component {
+  render() {
+    return <DateTimePickerComponent id="datetimepicker" />;
+  }
+}
+export default TimePicker;
diff --git a/ui/src/components/TimePicker/TimePicker.scss b/ui/src/components/TimePicker/TimePicker.scss
@@ -0,0 +1,5 @@
+/* To specify background color and font size */
+.e-datetime-wrapper .e-input-group-icon.e-date-icon, .e-datetime-wrapper .e-input-group-icon.e-time-icon {
+    font-size: 16px;
+    background-color: rgb(202, 17, 17);
+}
diff --git a/ui/src/pages/Media/Media.jsx b/ui/src/pages/Media/Media.jsx
@@ -9,13 +9,17 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter,
+  ControlBar,
+  Tabs,
+  Tab,
+  Icon,
 } from '@kerberos-io/ui';
 import { Link, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
 import { getEvents } from '../../actions/agent';
 import config from '../../config';
 import './Media.scss';
+import TimePicker from '../../components/TimePicker/TimePicker';
 
 // eslint-disable-next-line react/prefer-stateless-function
 class Media extends React.Component {
@@ -94,9 +98,6 @@ class Media extends React.Component {
           level1={t('recordings.heading')}
           level1Link=""
         >
-          <DateTimePickerComponent placeholder="Choose a date and time">
-            {' '}
-          </DateTimePickerComponent>
           <Link to="/settings">
             <Button
               label={t('breadcrumb.configure')}
@@ -105,6 +106,17 @@ class Media extends React.Component {
             />
           </Link>
         </Breadcrumb>
+        <TimePicker> </TimePicker>
+        <ControlBar type="row">
+          <Tabs>
+            <Tab
+              label={t('settings.submenu.all')}
+              value="all"
+              onClick={() => this.changeTab('https://twitter.com')}
+              icon={<Icon label="twitter" />}
+            />
+          </Tabs>
+        </ControlBar>
 
         <div className="stats grid-container --four-columns">
           {events.map((event) => (