Skip to content

Latest commit

 

History

History
125 lines (112 loc) · 5.37 KB

README.md

File metadata and controls

125 lines (112 loc) · 5.37 KB
Raw

Documentation

This documentation is for the frontend of the Pick-by-Light project. The system was developed during the module "Softwaretechnik-Projekt" at the THM Gießen.

Index

Frontend

The graphical user interface allows the user to interact with the system. A login system ensures that only authorized users can use the system. The desired parts are selected via a search mask and displayed via the further connection. Extended setting options are available to the administrator. Parts and shelfs can be created and managed.

From a technical point of view, the frontend is realized with vue and vuetify and is running in a nginx docker container. The different components are presented on individual pages.

Install-guide

The frontend can be started via docker.

The docker commands must be used in the location of the "Dockerfile" file.

Before the build, the ip to the backend can be adjusted in the config/config.json. Further adjustments for the nginx server can be configured in the config/nginx.conf, but are usually not necessary.

Build Docker-Image

docker build . -t frontend

First time build and run container

The port used by the webserver can be specified within the command. Default is 8080.
(80 is the port of the nginx server running in the container and defined in the config/nginx.conf)

docker run --name frontend -d -p 8080:80 frontend

Start or stop container after first run

docker start frontend
docker stop frontend

Development

npm install
npm run serve

back to index

Config

Basic settings for the frontend can be made in the config/config.json file.

  • The basic colors of the project
  • The IP + port for the backend
  • The title of the web interface
  • Authentication on/off

back to index

Parts

Vue realizes a website application with views and components. The views and components used in this project, will be explained here:

Views

back to index

Components

back to index

Services

Services are used to implement communication with the backend and embedded systems. Here, http requests & responds are used with the help of Axios. Also, some enable live transmission of information between different components in the frontend.

  • authDataService
    Allows registering of new users, logs existing users in and makes the corresponding data available for the frontend components
  • http-common
    Imports Axios and sets the url to the backend systems
  • http-embedded
    Imports Axios and sets the url to the embedded systems
  • itemDataService
    Realizes the connection to the items-data-base and the needed routes
  • labelDataService
    Handles the different operations with labels and the related database
  • languageDataService
    Is used to manage the different languages supported by the project
  • lightDataService
    Organizes the connection to the different lights in the embedded system
  • RoomsDataService
    Connection to manage rooms
  • settingsService
    Communicates with the backend database to store and update different settings
  • shelfDirectDataService
    Allows the assignment of mac addresses and management of shelves directly on the embedded systems
  • shelvesDataService
    Shelf related communication with the backend

back to index

Others

  • plugins/vuetify.ts
    Connects with the color service and assigns the chosen colors to the vuetify theme
  • i18n
    Is used to realize the different languages support
  • router
    Routes and defines the different links to the single views
  • main.ts
    Initiates the app
  • types/index.ts
    Used to define the types used in the application
    • Item
    • Items
    • User
    • Label
  • store/index.ts
    Enables the vue vuex store. Can be used to store data temporarily in the frontend.
    • Chosen item
    • Searched items
    • Current selected Labels

back to index