swevensoftware / blockcovid-web

Web client for the BlockCOVID project

BlockCOVID-web

Description

Web module for the project BlockCOVID. This module provides a web interface for the administrator of a running instance of the server module.

Usage

Prerequisites

This module requires an instance of the server module running. By default the client tries to redirect all API requests to localhost:8091, if you have an instance of the server module running somewhere else you should change the default proxy behaviour in nginx.conf, for example

location /api/ {
    proxy_pass http://my.api.server:8091;
}

redirects all API requests to my.api.server:8091

The latest version of npm is also necessary in order to test, build and run the server, a detailed guide on how to install it can be found here.

Building

The following process builds a static version of the server and deploys it through a docker container running a nginx web server. API redirection is handled through nginx, so configure it as described in the previous section. The steps to accomplish in order to run the application are

# Install the dependencies
npm install
# Build the static bundle
npm run build
# build and run the container
docker-compose up --build -d

A daemonized container will be created, running the application.

Development environment

npm run dev

Builds the bundled application for a development environment, do this instead of npm run build in the building process to run the development environment.

Dynamic development

npm start

Starts a serve server to test the application, this solution allows a dynamic recompiling of the application after every change.

Contributing

We adopt a Gitflow workflow. So in order to contribute to the application the steps are:

• start from develop branch
• git flow feature start [faeture name] (alternatively git checkout -b feature/[feature name])
• implement the new feature and the corresponding tests
• commit your changes
• git flow feature publish [feature name] (alternatively git push -u origin feature/[feature name])
• open a pull request describing your changes and addressing issues if necessary eventually an administrator will review your work and merge it in the develop branch.

pre-commit hook

Builds will fail if the code is not compliant with the prettier formatting. Therefore add this hook to git that prevents you from committing anything that is not correctly formatted

cp pre-commit.sh .git/hooks/pre-commit

text can be formatted with

npm run formatApply

blockcovid-web's Issues

Fetch rooms information when room component is mounting

Use of HTTPS protocol

Use of HTTPS protocol

User profile removal

The administrator must be able to remove a user profile

Add missing fields in room modification modal

Fields to be added with their properties:

• opening time
• closing time
• week days
• size (width, heigth)

Add missing fields in room creation modal

Fields to be added with their properties:

• opening time
• closing time
• week days
• size (width, heigth)

Implement confirmation in room modification modal

Testing '401' parameter in getRooms() roomsAction.tsx

Rerender page in Accounts after operation

Update existing Account components to current API version

User account creation

Make it possible for the administrator to create user accounts

Testing '401' parameter in modifyRooms() in roomsAction.tsx

Add grid of room in room modification modal

An authenticated administrator should be able to see the room layout

Add grid of room in room deletion modal

An authenticated administrator should be able to see the room layout before deleting the room

Token expiration management

Manage and set user token expiration

Restyle css in rooms component

Add getRooms() in api

Move reducers logic to map function resolution

Set errors in roomNameValidate() in NewRoomComponent.tsx

Handle token with Redux

Translate new user to redux architecture

Set errors in roomNameValidate() in ModifyRoomComponent.tsx

Add grid of room in room creation modal

An authenticated administrator should be able to see the grid layout in order to create a room

Room modification

An authenticated administrator should be able to edit the information about a room

Add snackbar for all pages

Apply CSS to new components

• GeneralLayout
• NewUser
• Pencil
• Accounts
• Trash

Testing '401' parameter in createRoom() in roomsActions.tsx

Implement confirmation in room creation modal

Translate GeneralLayout to Redux architecture

Update createAccount in develop

Testing developed/finished parts

TESTING

TESTING

TESTING

Testing of parts actually developed or finished during this increment.

Add properties for 'room name' field in room creation modal

Properties to be done:

• error
• helperText
• value
• onChange

Room deletion

An authenticated administrator should be able to delete a room from the system

Room creation

By providing the required api informations (as specified by the documentation) an authenticated administrator should be able to create a new room

Dashboard update with delay

Search bar

for everything the admin should be able to search for what he's looking for (for example a specific reservation or room or desk or account)

Switch to JSON calls for API

Translate pencil (user modifier) to Redux architecture

Use italian (+english) for UI

Use the Italian language for the graphic interface. The transition to the English language is foreseen where possible.

Call API /logout when deleting local token

View list of existing accounts

View a list of registered and active users

implementing getRoomsAPI

Implement confirmation in room deletion modal

Testing '401' parameter in deleteRoom() in roomsActions.tsx

Add properties for 'room name' field in room modification modal

Properties to be done:

• error
• helperText
• value
• onChange

English usage for development code

Using English for development code - US or UK makes no difference.

edit: punteggiatura

New User checkbox alignment

Input control and error generation - ROF15

Perform the following input checks and generate related errors:

Display list and number of users in the room

An authenticated administrator should be able to view a list of users in the room

Display status of desk

An authenticated administrator should be able to view the status of each desk

Limit displayed users number

When there are more than 200c.a. users the application starts to slow down the whole browser, limit the amount of accounts displayed on the same page