Frontend Development

Technologies

1. Vue 3 - Vue is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS, and JavaScript and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be they simple or complex. Vue automatically tracks JavaScript state changes and efficiently updates the DOM when changes happen.

2. Vite - Vite is build tool that brings blazing-fast development and build performance to modern web application development. Its innovative use of native ES modules and seamless integration with Vue.js make it a popular choice for developers seeking to improve their development workflow and deliver high-performance web applications.

3. Axios - Axios is a popular JavaScript library used for making HTTP requests from web browsers and Node.js. It provides a simple and intuitive API that allows developers to interact with web APIs and fetch data asynchronously.

4. Pinia - Pinia is a state management library specifically designed for Vue.js applications. It provides a simple and powerful way to manage application state, making it a great alternative to Vuex. Pinia embraces the Composition API, which was introduced in Vue 3, to provide a more organised and modular approach to managing state.

5. Bootstrap - Bootstrap is a widely-used open-source front-end CSS framework developed by Twitter. It provides a set of pre-styled components and utilities to build responsive and visually appealing web applications. Bootstrap has gained immense popularity due to its simplicity, flexibility, and extensive documentation.

Application Guide

1. If you use application internally your token will be recognised and you are allowed to see your devices:

2. If you use application externally login page appears and you are able to login two ways:

a) Using URL + username and password:

b) Using URL + token:

You can enter both username + password and token and whatever credentials are good you will be logged in. You will get appropriate message if credentials are incorrect.

When you are successfully logged in you will see this page:

Credentials will be saved in local storage and next time you don’t have to login.

Frontend Setup and Configuration Guide

Running the Frontend

1. Navigate to the frontend folder.

2. Run the following commands in your terminal:

npm install
npm run dev

Configuring the Frontend

To customize the frontend's configuration, such as the server port, follow these steps:

1. Open the vite.config.js file.

2. Make the desired configuration changes, such as adjusting the server port.

Customizing Backend Connection

To configure your backend connection and interaction with SICON, modify the frontend/constants.js file:

// Set to true if you have your own backend
export const HAS_OWN_BACKEND = true;

// Set to true if you connect directly to SICON
export const CONNECT_DIRECTLY_TO_SICON = true;

Token Handling and Endpoint Configuration

Inside the constants.js file, you'll find functions related to token handling and endpoint configuration.

Endpoint Configuration Functions

The endpoint configuration functions are located in the main.js file, specifically within plugins/axios.js. There are two axios instances, one with an internal base URL and one with an external base URL. Default URLs are defined in constants.js.

The function checkAndConfigureEndpoints() handles endpoint configuration based on token presence and credentials in local storage:

1. If a token is found in the cookie, the default configuration is used.

2. If a token is not found but credentials are in local storage:

   • If HAS_OWN_BACKEND is true, informMyBackend(authLocalStorage) is called.

   • If HAS_OWN_BACKEND is false and CONNECT_DIRECTLY_TO_SICON is true, configureMyDirectConnection(authLocalStorage) is called.

3. If a token is not found and no credentials are in local storage, a login popup is opened.

These functions are also used in the Login.vue component during the login process.