added No Alarms check on AlarmView page

devlup-labs · Jun 28, 2021 · 2587593 · 2587593
1 parent 98633d6
commit 2587593
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 39 deletions.
diff --git a/src/pages/Popup/components/Alarmview.jsx b/src/pages/Popup/components/Alarmview.jsx
@@ -83,41 +83,59 @@ class Alarmview extends Component {
   render() {
     return (
       <div style={{ height: '348px', overflow: 'auto' }}>
-        <List dense>
-          {this.state.alarms.map((alarm) => {
-            return (
-              <ListItem key={alarm.code}>
-                <ListItemIcon edge="start">
-                  <AccessAlarmIcon style={{ color: 'black' }} />
-                </ListItemIcon>
-                <ListItemText
-                  id={alarm.code}
-                  primary={
-                    alarm.course == 'custom'
-                      ? `${this.trunc(alarm.code, 22)}`
-                      : `${alarm.course}`
-                  }
-                  secondary={
-                    alarm.course == 'custom'
-                      ? `Custom User alarm`
-                      : `${alarm.code}`
-                  }
-                />
-                <ListItemSecondaryAction>
-                  <IconButton
-                    edge="end"
-                    aria-label="delete"
-                    onClick={() => {
-                      this.DeleteAlarm(alarm.code);
-                    }}
-                  >
-                    <DeleteIcon style={{ fill: 'black' }} />
-                  </IconButton>
-                </ListItemSecondaryAction>
-              </ListItem>
-            );
-          })}
-        </List>
+        {this.state.alarms.length === 0 ? (
+          <div
+            style={{
+              width: 'auto',
+              height: '100%',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              fontSize: '1rem',
+            }}
+          >
+            No alarms{' '}
+            <span role="img" aria-label="alarm">
+              ⏰
+            </span>
+          </div>
+        ) : (
+          <List dense>
+            {this.state.alarms.map((alarm) => {
+              return (
+                <ListItem key={alarm.code}>
+                  <ListItemIcon edge="start">
+                    <AccessAlarmIcon style={{ color: 'black' }} />
+                  </ListItemIcon>
+                  <ListItemText
+                    id={alarm.code}
+                    primary={
+                      alarm.course == 'custom'
+                        ? `${this.trunc(alarm.code, 22)}`
+                        : `${alarm.course}`
+                    }
+                    secondary={
+                      alarm.course == 'custom'
+                        ? `Custom User alarm`
+                        : `${alarm.code}`
+                    }
+                  />
+                  <ListItemSecondaryAction>
+                    <IconButton
+                      edge="end"
+                      aria-label="delete"
+                      onClick={() => {
+                        this.DeleteAlarm(alarm.code);
+                      }}
+                    >
+                      <DeleteIcon style={{ fill: 'black' }} />
+                    </IconButton>
+                  </ListItemSecondaryAction>
+                </ListItem>
+              );
+            })}
+          </List>
+        )}
       </div>
     );
   }

diff --git a/src/pages/Popup/components/CustomForm.jsx b/src/pages/Popup/components/CustomForm.jsx
@@ -183,7 +183,7 @@ class AddAlarmForm extends Component {
     return (
       <div style={{ height: '300px' }}>
         <TextField
-          style={{ width: '90%', margin: '0 4%' }}
+          style={{ width: '90%', margin: '2% 4% 0 4%' }}
           value={this.state.selectedName}
           onChange={this.handleNameChange}
           id="Link"
@@ -192,7 +192,7 @@ class AddAlarmForm extends Component {
           error={this.state.Nameerror}
         />
         <TextField
-          style={{ width: '90%', margin: '0 4%' }}
+          style={{ width: '90%', margin: '2% 4% 0 4%' }}
           value={this.state.selectedLink}
           onChange={this.handleLinkChange}
           id="Link"
@@ -201,7 +201,7 @@ class AddAlarmForm extends Component {
           error={this.state.Linkerror}
         />
         <TextField
-          style={{ width: '42%', margin: '4% 2% 4% 4%' }}
+          style={{ width: '42%', margin: '2% 2% 2% 4%' }}
           value={this.state.selectedTime}
           onChange={this.handleTimeChange}
           id="date"
@@ -213,7 +213,7 @@ class AddAlarmForm extends Component {
           error={this.state.Dateerror}
         />
         <TextField
-          style={{ width: '42%', margin: '4% 4% 4% 2%' }}
+          style={{ width: '42%', margin: '2% 4% 2% 2%' }}
           value={this.state.selectedEndTime}
           onChange={this.handleEndTimeChange}
           id="date"