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.
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.
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.
docker build . -t frontend
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
docker start frontend
docker stop frontend
npm install
npm run serve
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
Vue realizes a website application with views and components. The views and components used in this project, will be explained here:
- AddItem - Wrapper for the AddItem component
- App
- Home
- Login - Wrapper for the Login component
- Search
- Settings - Wrapper for the Settings component
- AboutUs
- AddItem
- CreateLabel
- Footer
- Grid
- ItemMenu
- ItemToShelf
- Login
- MAC-Address
- NavigationBar
- NavigationBarLogo
- Register
- Room
- SearchBar
- Settings
- Shelf
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
- 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