Siba project - Frontend

This project was created on the courses Softala-projekti / Software Project

Authors

SIBA22S

SIBA23K

SWP23K

About the project

Copyrights reserved. This Project is collaborative work, which aims at building an information system that makes it possible to calculate and optimize teaching space and equipment usage for different lessons.

(back to top)

Frontend technology and other useful resources

• React
• Axios
• Formik
• MUI
• Colorhunt
• jwt-decode

(back to top)

Beginning

Frontend side installation instructions

Installation

1. Clone the repository

   git clone https://github.com/haagahelia/siba-fe.git

2. Change directory

   cd siba-fe

3. Create .env file. Add .env to the root of the project.

   VITE_BE_SERVER_BASE_URL=http://...backend server address and port here.../api
   VITE_BE_SERVER_BASE_URL2=http://someotherserver:3001/api

   Basically start the backend, make sure it runs and copy the working address here, adding /api at the end. E.g. http://localhost:1234/api

   Optional environment variables:

   VITE_MODE=development    # This enables e.g. debug logs in console
   PORT=5173                # This changes the frontend port number. If this is not set then default port 5173 is used

4. Install needed packages

   npm install

5. Application launch

   npm start

6. Attention! Follow Backend repo installation instructions also

How to run using docker-compose

1. Follow installation steps from 1 to 3

2. If you have .env.local file then rename it to .env (or copy and rename)

   Add PORT environment variable to the .env file

   PORT=5173

3. Run this command to launch the application using Node development server.

   docker-compose -f docker-compose-fe-dev.yaml up -d

4. OR do the following to launch the application using Nginx web server. This is more suitable for production environment.

   This version redirects insecure HTTP connections to HTTPS. There is a self-signed SSL certificate for testing purposes. Check directory ssl/test-certs. Note that the backend probably won't work if the frontend uses HTTPS and the backend uses HTTP.

   Add these environment variables to the .env file

   SSL_PORT=443
   SSL_CERT_PATH=./ssl/test-cert/fullchain.pem
   SSL_KEY_PATH=./ssl/test-cert/privkey.pem

   Run this command to launch

   docker-compose -f docker-compose-fe-nginx.yaml up -d

   The container overwrites default Nginx configuration file with the nginx.conf file found at the project root. It contains directives to make the React application work properly.

5. Access the application e.g. http://localhost:5173. Replace the port with the port you set in step 2. With HTTPS: https://localhost if SSL_PORT was set to 443.

6. Stop and remove the started container depending on which command you ran:

   docker-compose -f docker-compose-fe-dev.yaml down

   OR

   docker-compose -f docker-compose-fe-nginx.yaml down

   You can also stop and remove the container with Docker commands such as:

   docker stop <container name or id>
   docker rm <container name or id>

   Alternatively you can also use Docker Desktop.

   Use this command to see all containers to find the name or id:

   docker ps -a

How to run Selenium tests

1. Make sure the frontend and backend are running and working.

2. Open a new terminal tab/window and change directory to the frontend project root.

3. Decide which browser you want to use. Firefox is used by default. It can be changed with SELENIUM_BROWSER environment variable. If you want to use another browser then edit your .env file and add:

   SELENIUM_BROWSER=chrome

   This configures the tests to run in the Chrome browser. Other browsers can also be used. More info here: https://www.npmjs.com/package/selenium-webdriver

4. Run the following command

   npm run test-selenium

   You should see a browser window opening where you can see the automated tests running.

   If you get errors and cannot run the tests, you might need to install a webdriver for the browser you want to use. https://www.npmjs.com/package/selenium-webdriver

(back to top)

Using the system

Teachings/Opetukset screen

1. In the lesson view, there is an option to add new lessons in the "Add lesson" section. The user also has the option to copy the information of an already existing lesson from the dropdown menu
2. All entered lessons are listed under the "Lessons" heading. Lessons can be searched using the "Teaching search:" text field
3. Listed lessons can be selected and then the Popup Dialog of the lesson will appear. In this dialog, you can remove, modify or add equipment to the lesson
4. The list always shows 15 lessons at once. At the bottom of the list, you can use pagination, where you can browse more lessons

Results view

1. In the results view, the user starts the allocation with the "Start Allocation" button.

2. The user cannot start another allocation until he has pressed the "Reset Allocation" button.

3. At this moment, the user needs to refresh the page in order to see the changes to the allocation.

4. In the subject group section, the user can open a dropdown menu that tells which rooms the subject group uses and how many hours that room is in use.

5. By pressing the subject group information button, a pop-up window opens where the user can see subject-specific lessons. In the pop-up window, the user can open the lesson-specific dropdowns, from which you can see which room the lesson is in.

6. In the Room section, the user can see all the rooms in use and their occupancy rates.

7. In the Room section, the user can open the room-specific dropdown lists, where you can see what classes are in the rooms and how many hours they are used

8. The spaces are separated by space type. E.g. Studio, Performance spaces, Lecture classes and music classes

(back to top)

Problems inherited from the old course teams

Add here at the end of the course

(back to top)

Further development ideas

Add here at the end of the course

The addition of a lesson, where you can copy information from other lessons, could have, in addition to select, a search in the same function, so that the user can find the lesson he wants faster and more easily.

When adding a lesson, you could choose whether the lesson is distance learning, so that the calculation could take into account lessons that do not need or need less teaching space.

In the addition of the teaching, there would be a function with which the form could be reset from the entered inputs

dao.js file unifications

(back to top)

For Front-end Developers

Styling

siba-fe\src\styles\theme.js
The Design

Navigation Bar

siba-fe\src\routers\Nav.jsx

Lessons Page

siba-fe\src\views\SubjectView.jsx

Allocation Page

siba-fe\src\views\AllocRoundView.jsx

Buildings Page

siba-fe\src\components\building\BuildingList.jsx

Departments Page

siba-fe\src\components\department\Departments.jsx

Equipment Page

siba-fe\src\components\equipment\Equipments.jsx

Spaces Page

siba-fe\src\views\SpaceView.jsx

Program Results Page

siba-fe\src\components\result\ProgramResult.jsx

Room Results Page

siba-fe\src\components\result\RoomResult.jsx

Register Page

siba-fe\src\components\user\AddUser.jsx

User List Page

siba-fe\src\views\UserView.jsx

Settings Page

siba-fe\src\views\SettingsView.jsx

Log In Page

siba-fe\src\views\LoginView.jsx

Project overview structure

This is the current structure of front-end development. Last updated 21.11.2023

├── App.css
├── App.jsx
├── AppContext.js
├── ajax
│   ├── ajaxRequestErrorHandler.js
│   ├── dao.ts
│   ├── dao_allocRound.ts
│   ├── dao_allocation.ts
│   ├── dao_building.ts
│   ├── dao_department.ts
│   ├── dao_departmentplanner.ts
│   ├── dao_equipment.ts
│   ├── dao_program.ts
│   ├── dao_resetDatabase.ts
│   ├── dao_settings.ts
│   ├── dao_space.ts
│   ├── dao_spaceEquipment.ts
│   ├── dao_spaceType.ts
│   ├── dao_subject.ts
│   ├── dao_subjectEquipment.ts
│   ├── dao_user.ts
│   └── request.ts
├── components
│   ├── allocRound
│   │   ├── AddAllocRound.jsx
│   │   ├── AddAllocRoundForm.jsx
│   │   ├── AllocRoundControlPanel.jsx
│   │   ├── AllocRoundDetails.jsx
│   │   ├── AllocRoundInputField.jsx
│   │   ├── AllocRoundList.jsx
│   │   ├── AllocRoundListContainer.jsx
│   │   ├── AllocRoundPagination.jsx
│   │   ├── DeleteAllocRound.jsx
│   │   ├── EditAllocRound.jsx
│   │   ├── EditAllocRoundForm.jsx
│   │   └── SelectAllocRound.jsx
│   ├── building
│   │   ├── AddBuildingContainer.jsx
│   │   ├── AddBuildingForm.jsx
│   │   ├── BuildingDisplay.jsx
│   │   ├── BuildingInputField.jsx
│   │   ├── BuildingList.jsx
│   │   ├── BuildingListContainer.jsx
│   │   ├── BuildingListItem.jsx
│   │   ├── BuildingListPagination.jsx
│   │   ├── BuildingTemplate.jsx
│   │   ├── DeleteBuilding.jsx
│   │   ├── EditBuildingContainer.jsx
│   │   ├── EditBuildingForm.jsx
│   │   ├── ExportBuildingButton.jsx
│   │   ├── ImportBuildingButton.jsx
│   │   ├── ImportBuildingContainer.jsx
│   │   └── SingleBuildingDialog.jsx
│   ├── common
│   │   ├── AlertBox.jsx
│   │   └── ConfirmationDialog.jsx
│   ├── department
│   │   ├── AddDepartment.jsx
│   │   ├── AddDepartmentDialogConfirmation.jsx
│   │   ├── DeleteDepartment.jsx
│   │   ├── DepartmentDialog.jsx
│   │   ├── DepartmentList.jsx
│   │   ├── DepartmentListContainer.jsx
│   │   ├── Departments.jsx
│   │   ├── EditDepartment.jsx
│   │   └── SingleDepartmentDialog.jsx
│   ├── equipment
│   │   ├── AddEquipment.jsx
│   │   ├── AddEquipmentDialogConfirmation.jsx
│   │   ├── DeleteEquipment.jsx
│   │   ├── EditEquipment.jsx
│   │   ├── EquipmentList.jsx
│   │   ├── EquipmentListContainer.jsx
│   │   ├── EquipmentTemplate.jsx
│   │   ├── Equipments.jsx
│   │   ├── ExportEquipmentButton.jsx
│   │   ├── ImportEquipmentButton.jsx
│   │   ├── ImportEquipmentContainer.jsx
│   │   └── SingleEquipmentDialog.jsx
│   ├── program
│   ├── result
│   │   ├── CollapsedRow.jsx
│   │   ├── CollapsedRowB.jsx
│   │   ├── ProgramResult.jsx
│   │   ├── RoomResult.jsx
│   │   └── SubjectResult.jsx
│   ├── room
│   │   ├── RoomList.jsx
│   │   └── RoomsWithTimesList.jsx
│   ├── settings
│   │   ├── AddSettingContainer.jsx
│   │   ├── AddSettingForm.jsx
│   │   ├── DeleteSetting.jsx
│   │   ├── EditSettingContainer.jsx
│   │   ├── EditSettingForm.jsx
│   │   ├── SettingsDetails.jsx
│   │   ├── SettingsList.jsx
│   │   └── SettingsListContainer.jsx
│   ├── space
│   │   ├── AddSpace.jsx
│   │   ├── AddSpaceDialogConfirmation.jsx
│   │   ├── AddSpaceEquipContainer.jsx
│   │   ├── AddSpaceEquipForm.jsx
│   │   ├── DeleteSpace.jsx
│   │   ├── EditSpaceContainer.jsx
│   │   ├── EditSpaceForm.jsx
│   │   ├── ExportSpaceButton.jsx
│   │   ├── ImportSpaceButton.jsx
│   │   ├── ImportSpaceContainer.jsx
│   │   ├── SingleSpaceDialog.jsx
│   │   ├── SpaceEquipmentList.jsx
│   │   ├── SpaceFiltering.jsx
│   │   ├── SpaceList.jsx
│   │   ├── SpaceListContainer.jsx
│   │   ├── SpacePagination.jsx
│   │   └── SpaceTemplate.jsx
│   ├── subject
│   │   ├── AddSubEquipContainer.jsx
│   │   ├── AddSubEquipForm.jsx
│   │   ├── AddSubjectContainer.jsx
│   │   ├── AddSubjectForm.jsx
│   │   ├── DeleteSubEquip.jsx
│   │   ├── DeleteSubject.jsx
│   │   ├── EditSubEquipContainer.jsx
│   │   ├── EditSubEquipForm.jsx
│   │   ├── EditSubjectContainer.jsx
│   │   ├── EditSubjectForm.jsx
│   │   ├── ExportSubjectButton.jsx
│   │   ├── ImportSubjectButton.jsx
│   │   ├── ImportSubjectContainer.jsx
│   │   ├── SingleSubjectDialog.jsx
│   │   ├── SubjectEquipmentList.jsx
│   │   ├── SubjectFiltering.jsx
│   │   ├── SubjectList.jsx
│   │   ├── SubjectListContainer.jsx
│   │   ├── SubjectPagination.jsx
│   │   └── SubjectTemplate.jsx
│   └── user
│       ├── AddDepartmentPlannerContainer.jsx
│       ├── AddDepartmentPlannerForm.jsx
│       ├── AddUser.jsx
│       ├── DeleteUser.jsx
│       ├── DeleteUserPlanner.jsx
│       ├── EditUserContainer.jsx
│       ├── EditUserForm.jsx
│       ├── SingleUserDialog.jsx
│       ├── UserDepartmentList.jsx
│       ├── UserFiltering.jsx
│       ├── UserList.jsx
│       ├── UserListContainer.jsx
│       └── UserPagination.jsx
├── data
│   ├── ResultAllocationStore.js
│   ├── ResultProgramStore.js
│   ├── ResultRoomsStore.js
│   └── testData.js
├── hooks
│   ├── useRoleLoggedIn.js
│   └── useThemeSwitcher.js
├── importDataFunctions
│   ├── exportData.js
│   ├── importData.js
│   └── processFile.js
├── logger
│   └── logger.ts
├── main.jsx
├── routers
│   └── Nav.jsx
├── styles
│   ├── AllocationFailure.css
│   ├── ColorModelFrom_2022FallGroup.png
│   ├── ColorModelFrom_2022FallGroup_3.png
│   ├── ResultView.css
│   ├── SibeliusLogo.svg
│   ├── SibeliusLogoLoginPage.svg
│   ├── SibeliusLogoSmall.svg
│   ├── palettes
│   │   ├── commonColors.ts
│   │   ├── darkPalette.ts
│   │   ├── lightPalette.ts
│   │   ├── redPalette.ts
│   │   └── yellowPalette.ts
│   ├── theme.js
│   └── themeIcons.jsx
├── types
│   ├── colors.ts
│   └── index.ts
├── validation
│   ├── ValidateAddAllocRound.js
│   ├── ValidateAddBuilding.js
│   ├── ValidateAddEditDepartment.js
│   ├── ValidateAddEditSetting.js
│   ├── ValidateAddEquipment.js
│   ├── ValidateAddSpace.js
│   ├── ValidateAddSpaceEquipment.js
│   ├── ValidateAddSubject.js
│   ├── ValidateAddSubjectEquipment.js
│   ├── ValidateEditAllocRound.js
│   ├── ValidateEditBuilding.js
│   ├── ValidateEditEquipment.js
│   ├── ValidateEditSpace.js
│   ├── ValidateEditSubject.js
│   ├── ValidateEditSubjectEquipment.js
│   └── ValidateEditUser.js
├── views
│   ├── AllocRoundView.jsx
│   ├── AllocationSubjectFailureView.jsx
│   ├── BuildingView.jsx
│   ├── DepartmentView.jsx
│   ├── EquipmentView.jsx
│   ├── ForgetPasswordView.jsx
│   ├── LoginView.jsx
│   ├── NotFoundView.jsx
│   ├── ProgramResultView.jsx
│   ├── RegisterView.jsx
│   ├── ResetPasswordView.jsx
│   ├── RoomResultView.jsx
│   ├── SettingsView.jsx
│   ├── SpaceView.jsx
│   ├── SubjectView.jsx
│   └── UserView.jsx
└── vite-env.d.ts

(back to top)