Skip to content

GitLab

Commit ac848cfa authored by Caetan Tojeiro Carpente's avatar Caetan Tojeiro Carpente Committed by Carina Antunes
Browse files

[#32] FE preference validations

parent 13354bad
Pipeline #2320170 passed with stages
in 5 minutes and 48 seconds
Hide whitespace changes
Inline Side-by-side
README.md
View file @ ac848cfa
......@@ -10,18 +10,13 @@
npm install
```
2. After installing all the dependencies, you should be able to run the project
```
npm start
```
```
npm start
```
## Test docker image locally
The Dockerfile is meant to build the image that is going to be used in the production environment,
so it expects to use the production build of the web-portal application. So first of all we should build the application:
```
npx env-cmd -f .env cross-env npm build
```
When the build is finished, we can build the docker image to test the production build of the system:
We can build the docker image to test the production build of the system:
```
docker build . -t web-portal
```
......
src/components/preferences/AddPreference.js
View file @ ac848cfa
......@@ -2,7 +2,7 @@ import React, {useState, useEffect} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {useParams, useHistory} from 'react-router-dom';
import {Form, Radio, Modal, Button, Checkbox} from 'semantic-ui-react';
import {Form, Radio, Modal, Button, Checkbox, Label, Segment} from 'semantic-ui-react';
import TimeField from 'react-simple-timefield';
import * as preferenceActions from 'actions/preferences';
......@@ -145,177 +145,177 @@ const AddPreference = ({
onClose={onClose}
>
<Modal.Header>Add preference</Modal.Header>
<Modal.Content>
<Modal.Description>
<Form>
<Form.Field>
{!global && (
<Form.Input
label="Channel id"
placeholder="Channel id"
value={channelIdInput}
onChange={(e, d) => setChannelIdInput(d.value)}
disabled={channelId !== undefined}
/>
)}
</Form.Field>
<Form.Field>
<Segment basic>
<Form onSubmit={handleSubmit} className="add-preferences">
<Form.Field>
{!global && (
<Form.Input
label="Preference name"
placeholder="Preference name"
value={preferenceName}
onChange={(e, d) => setPreferenceName(d.value)}
label="Channel id"
placeholder="Channel id"
value={channelIdInput}
onChange={(e, d) => setChannelIdInput(d.value)}
disabled={channelId !== undefined}
/>
</Form.Field>
<Form.Group grouped>
<label>Priority</label>
<Form.Field
control={Checkbox}
label="Important"
name="notificationPriorityGroup"
value={notificationPriorityTypes.IMPORTANT}
checked={notificationPriority.important}
onClick={() => {
setNotificationPriority({
...notificationPriority,
important: !notificationPriority.important,
});
}}
/>
<Form.Field
control={Checkbox}
label="Normal"
name="notificationPriorityGroup"
value={notificationPriorityTypes.NORMAL}
checked={notificationPriority.normal}
onClick={() => {
setNotificationPriority({
...notificationPriority,
normal: !notificationPriority.normal,
});
}}
/>
<Form.Field
control={Checkbox}
label="Low"
name="notificationPriorityGroup"
value={notificationPriorityTypes.LOW}
checked={notificationPriority.low}
onClick={() => {
setNotificationPriority({
...notificationPriority,
low: !notificationPriority.low,
});
}}
/>
</Form.Group>
)}
</Form.Field>
<Form.Field>
<Form.Input
required
label="Preference name"
placeholder="Preference name"
value={preferenceName}
onChange={(e, d) => setPreferenceName(d.value)}
/>
</Form.Field>
<Form.Group grouped>
<label>Priority</label>
<Form.Field
control={Checkbox}
label="Important"
name="notificationPriorityGroup"
value={notificationPriorityTypes.IMPORTANT}
checked={notificationPriority.important}
onClick={() => {
setNotificationPriority({
...notificationPriority,
important: !notificationPriority.important,
});
}}
/>
<Form.Field
control={Checkbox}
label="Normal"
name="notificationPriorityGroup"
value={notificationPriorityTypes.NORMAL}
checked={notificationPriority.normal}
onClick={() => {
setNotificationPriority({
...notificationPriority,
normal: !notificationPriority.normal,
});
}}
/>
<Form.Field
control={Checkbox}
label="Low"
name="notificationPriorityGroup"
value={notificationPriorityTypes.LOW}
checked={notificationPriority.low}
onClick={() => {
setNotificationPriority({
...notificationPriority,
low: !notificationPriority.low,
});
}}
/>
</Form.Group>
<Form.Group grouped>
<label>Preference Time</label>
<Form.Field
control={Radio}
label="All day"
name="TimeGroup"
value="AllDay"
checked={picker === 'AllDay'}
onChange={(object, time) => {
setPicker(time.value);
setStartTime(null);
setEndTime(null);
}}
/>
<Form.Field
control={Radio}
label="Specific time range"
name="TimeGroup"
value="TimeRange"
checked={picker === 'TimeRange'}
onChange={(object, time) => {
setStartTime(NotificationPriorityTimes.startDefaultTime);
setEndTime(NotificationPriorityTimes.endDefaultTime);
setPicker(time.value);
}}
/>
{picker === 'TimeRange' ? (
<Form.Group grouped>
<div className="add-preferences-time">
<div className="add-preferences-time-label">
<label>Start hour</label>
<div className="add-preferences-time-clock">
<TimeField
value={NotificationPriorityTimes.startDefaultTime}
onChange={(object, time) => {
setStartTime(time);
}}
/>
</div>
</div>
<div className="add-preferences-time-label">
<label>End hour</label>
<div className="add-preferences-time-clock">
<TimeField
value={NotificationPriorityTimes.endDefaultTime}
onChange={(object, time) => {
setEndTime(time);
}}
/>
</div>
</div>
</div>
</Form.Group>
) : null}
</Form.Group>
<Form.Group grouped>
<Label color="blue" ribbon>
Select a time in which this preference applies. Ranges that finish the next day are
accepted, e.g. 18:00-09:00
</Label>
<br />
<label>Preference Time</label>
<Form.Field
control={Radio}
label="All day"
name="TimeGroup"
value="AllDay"
checked={picker === 'AllDay'}
onChange={(object, time) => {
setPicker(time.value);
setStartTime(null);
setEndTime(null);
}}
/>
<Form.Field
control={Radio}
label="Specific time range"
name="TimeGroup"
value="TimeRange"
checked={picker === 'TimeRange'}
onChange={(object, time) => {
setStartTime(NotificationPriorityTimes.startDefaultTime);
setEndTime(NotificationPriorityTimes.endDefaultTime);
setPicker(time.value);
}}
/>
{picker === 'TimeRange' ? (
<Form.Group>
<Form.Field
width={2}
className="add-preferences-time"
label="Start hour"
control={TimeField}
value={NotificationPriorityTimes.startDefaultTime}
onChange={(object, time) => {
setStartTime(time);
}}
/>
<Form.Field
width={2}
className="add-preferences-time"
label="End hour"
control={TimeField}
value={NotificationPriorityTimes.endDefaultTime}
onChange={(object, time) => {
setEndTime(time);
}}
/>
</Form.Group>
) : null}
</Form.Group>
<Form.Group grouped>
<label>Frequency</label>
<Form.Field
control={Radio}
label="Live"
name="frequencyGroup"
value="LIVE"
checked={frequency === 'LIVE'}
onChange={(e, d) => {
setFrequency(d.value);
if (allDevices) setDevices(allDevices.filter(device => device.type === 'MAIL'));
}}
/>
{frequency === 'LIVE' ? (
<>
{renderTargetDevices('MAIL', 'LIVE')}
{renderTargetDevices('BROWSER', 'LIVE')}
{renderTargetDevices('_other_', 'LIVE')}
<Form.Group inline>
<Form.Field width="1" />
<Button
content="Manage Devices"
size="mini"
onClick={() => {
history.push(`/main/devices`);
}}
/>
</Form.Group>
</>
) : null}
<Form.Group grouped>
<label>Frequency</label>
<Form.Field
control={Radio}
label="Live"
name="frequencyGroup"
value="LIVE"
checked={frequency === 'LIVE'}
onChange={(e, d) => {
setFrequency(d.value);
if (allDevices) setDevices(allDevices.filter(device => device.type === 'MAIL'));
}}
/>
{frequency === 'LIVE' ? (
<>
{renderTargetDevices('MAIL', 'LIVE')}
{renderTargetDevices('BROWSER', 'LIVE')}
{renderTargetDevices('_other_', 'LIVE')}
<Form.Group inline>
<Form.Field width="1" />
<Button
content="Manage Devices"
size="mini"
onClick={() => {
history.push(`/main/devices`);
}}
/>
</Form.Group>
</>
) : null}
<Form.Field
control={Radio}
label="Daily"
name="frequencyGroup"
value="DAILY"
checked={frequency === 'DAILY'}
onChange={(e, d) => {
setFrequency(d.value);
if (allDevices) setDevices(allDevices.filter(device => device.type === 'MAIL'));
}}
/>
{frequency === 'DAILY' ? renderTargetDevices('MAIL', 'DAILY') : null}
</Form.Group>
<Form.Button primary disabled={loading} loading={loading} onClick={handleSubmit}>
Submit
</Form.Button>
</Form>
</Modal.Description>
</Modal.Content>
<Form.Field
control={Radio}
label="Daily"
name="frequencyGroup"
value="DAILY"
checked={frequency === 'DAILY'}
onChange={(e, d) => {
setFrequency(d.value);
if (allDevices) setDevices(allDevices.filter(device => device.type === 'MAIL'));
}}
/>
{frequency === 'DAILY' ? renderTargetDevices('MAIL', 'DAILY') : null}
</Form.Group>
<Form.Button primary disabled={loading} loading={loading}>
Submit
</Form.Button>
</Form>
</Segment>
</Modal>
);
};
......
src/components/preferences/AddPreferences.scss
View file @ ac848cfa
@import '../../common/colors/colors.scss';
.ui.form {
.add-preferences-time {
display: flex;
font-weight: bold;
flex-wrap: wrap;
vertical-align: middle;
.ui.modal.add-preferences-modal .content {
overflow: visible;
}
&-label {
margin-right: 1em;
font-weight: bold;
}
.ui.form.add-preferences {
.add-preferences-time {
text-align: center;
&-clock > input[type='text'] {
border: 2px solid $light-gray;
width: 60px !important;
padding: 5px 8px;
color: $dark-gray;
border-radius: 3px;
input {
width: 70px !important;
}
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment