/se-2022-09-OfficeQueueManager

Primary LanguageJavaScriptMIT LicenseMIT

This project has been developed by Team-09 for the course of "Software Engineering II", attended during the academic year 2022/23 at Politecnico di Torino, Master's Degree in Computer Engineering.

Table of Contents

  1. Technologies
  2. React Client Application Routes
  3. API Server
  4. Database Tables
  5. React Components APIs
  6. Mocks

Technologies

Frontend

The language used is Javascript and the framework choosen is ReactJS.

Here the list of dependencies installed:

"dependencies": {
   "@fortawesome/fontawesome-svg-core": "^6.2.0",
    "@fortawesome/free-regular-svg-icons": "^6.2.0",
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "autoprefixer": "^10.4.12",
    "axios": "^1.1.3",
    "bootstrap": "^5.2.2",
    "bootstrap-icons": "^1.9.1",
    "dayjs": "^1.11.5",
    "postcss-preset-env": "^7.8.2",
    "react": "^18.2.0",
    "react-bootstrap": "^2.5.0",
    "react-dom": "^18.2.0",
    "react-router": "^6.4.2",
    "react-router-dom": "^6.4.2",
    "react-scripts": "5.0.1",
    "react-toastify": "^9.0.8",
    "sass": "^1.55.0",
    "web-vitals": "^2.1.4"
}

Backend

The language used is Javascript and the framework choosen is ExpressJS.

Here the list of dependencies installed:

 "dependencies": {
    "cors": "^2.8.5",
    "dayjs": "^1.11.5",
    "express": "^4.18.2",
    "express-validator": "^6.14.2",
    "morgan": "^1.10.0",
    "nodemon": "^2.0.20",
    "sqlite3": "^5.1.2"
},
  "devDependencies": {
    "babel": "^6.23.0",
    "chai": "^4.3.6",
    "chai-http": "^4.3.0",
    "check-code-coverage": "^1.10.0",
    "jest": "^27.5.1",
    "mocha": "^9.2.2",
    "mochawesome": "^7.1.3",
    "mochawesome-report-generator": "^6.2.0"
}

Database

We've choosen a relational database and the DBMS choosen is SQLite3.

For more info about the database structure, see Database Tables.

React Client Application Routes

/

This is the index route

Homepage for guest users (not logged in users).

This route is unprotected from the user authentication. Moreover, it is unreachable when the user is logged in.

/login

Page that contains the login form to perform authentication.

This route is unprotected from the user authentication. Moreover, it is unreachable when the user is logged in.

/officer

The page shows the current ticket code that the officer has to serve and it allows the officer to compute the next ticket code to serve.

This route is protected. The user must be authenticated as an Officer to navigate here.

/*

Any other route is matched by this one where the application shows an error.

API Server

Ticket Routes

GET /api/tickets/:counterId

Get served ticket associated to counterId.

Request header:

Content-Type: application/json

Params: req.params.counterId to retrieve the id of the counter.

Response body

HTTP status code 200 OK

{
	"ticket": {
		"TicketId": 5,
		"CreateTime": "2022-10-19 17:42:50",
		"ServiceId": 1,
		"Status": "issued",
		"CounterId": 1
	}
}

Error responses

  • HTTP status code 500 Internal Server Error (generic server error)
  • HTTP status code 404 Not Found (resource not found error)
  • HTTP status code 422 Unprocessable Entity (validation error)

POST /api/tickets

Issues a new ticket for a selected service.

Request header:

Content-Type: application/json

Request body:

A JSON object containing the service id.

{
	"serviceId": 1
}

Response body

HTTP status code 201 Created

{
	"ticket": {
		"TicketId": 18,
		"CreateTime": "2022-10-19 17:42:49",
		"ServiceId": 1,
		"Status": "issued",
		"CounterId": 0
	},
	"waitingTime": 45
}

Error responses

  • HTTP status code 503 Service Unavailable (generic server error)
  • HTTP status code 404 Not Found (resource not found error)
  • HTTP status code 422 Unprocessable Entity (validation error)

PUT /api/tickets/:counterId

Get next customer in line for services provided by a counter.

Request header:

Content-Type: application/json

Params: req.params.counterId to retrieve the id of the counter for which to call the next customer.

Response body

HTTP status code 200 OK

{
	"ticket": {
		"TicketId": 18,
		"CreateTime": "2022-10-19 17:42:49",
		"ServiceId": 1,
		"Status": "served",
		"CounterId": 1
	}
}

Error responses

  • HTTP status code 500 Internal Server Error (generic server error)
  • HTTP status code 404 Not Found (resource not found error)
  • HTTP status code 422 Unprocessable Entity (validation error)

Service Routes

GET /api/services

Get list of all affordable services.

Request header:

Content-Type: application/json

Response body

HTTP status code 200 OK

{
	"services": [
		{
			"ServiceId": 1,
			"ServiceName": "s1Name",
			"ServiceTime": 10
		},
		{
			"ServiceId": 2,
			"ServiceName": "s2Name",
			"ServiceTime": 20
		}
	]
}

Error responses

  • HTTP status code 500 Internal Server Error (generic server error)
  • HTTP status code 404 Not Found (resource not found error)

Database Tables

Ticket

It contains info about tickets.

TicketId (PRIMARY KEY)
CreateTime
ServiceId (FOREIGN KEY REFERENCES Service(ServiceId))
Status (iussed | served | closed)
CounterId (FOREIGN KEY REFERENCES Counter(CounterId)) (DEFAULT 0)

Service

It contains info about services offered.

ServiceId (PRIMARY KEY)
ServiceName
ServiceTime

Preloaded Data

ServiceId ServiceName ServiceTime
1 s1Name 10
2 s2Name 20

Counter

It contains info about counters, in particular which services are offered by each counter.

CounterId (PRIMARY KEY)
ServiceId (PRIMARY KEY) (FOREIGN KEY REFERENCES Service(ServiceId))

Preloaded Data

CounterId ServiceId
1 1
1 2
2 2

React Components APIs

UI Core

Input.Field

This component is located in components/ui-core/Input.jsx

It's a styled override of the React-Bootstrap form input field pattern.

Prop Type Description Required
id String The id attribute for the input tag Recommended
type String The type attribute for the input tag (e.g. Email, Password, Text) Recommended
name String The name attribute for the input tag Recommended
placeholder String The placeholder attribute for the input tag Recommended
label String The label for the input field, shown above the field Recommended
className String The class attribute for the inside wrapper of the component No
children Any Text muted for a description or a message, shown below the field No

Input.Select

This component is located in components/ui-core/Input.jsx

It's a styled override of the React-Bootstrap form select field pattern.

Prop Type Description Required
id String The id attribute for the select tag Recommended
name String The name attribute for the select tag Recommended
defaultValue String The label for the default option Recommended
options Array[{value: String, label: String}] The array of options, where each option is an object with keys value (value attribute of the option tag) and label (label of the option tag that is shown to the user) Yes
label String The label for the select, shown above the field Recommended
className String The class attribute for the inside wrapper of the component No
children Any Text muted for a description or a message, shown below the field No

Display

This component is located in components/ui-core/Display.jsx

It's a component that shows queue info about a service.

Prop Type Description Required
service {name: String, queue: Array[{code: Number or String, counter: Number or String}]} Service data that have to be shown. Yes

Mocks

Homepage

Home Home-Ticket

Login page

Login

Officer page

Officer

Manager pages

Statistics pages

Manager-Stats Manager-Stats Manager-Stats Manager-Stats Manager-Stats Manager-Stats

Counters Configuration pages

Manager-Config Manager-Config Manager-Config