-
Notifications
You must be signed in to change notification settings - Fork 1
Guide for Developers
The Frontend of TEQST is a Progressive web app based on the Ionic Framework using Angular. It communicates with the Python and Django-based Backend Server using a REST API.
Application logic, pages and components reside in the folder src/app. Pages hierarchically contain their subpages and components. Each page folder has the following files: A ".page.html" and ".page.scss" for HTML structure and styling. A ".page.ts" for page-specific logic. Although more advanced logic has been outsourced into specific services that are used by the page and can be found in "src/services". A "-routing.module.ts" for routing to its subpages. A "*.module.ts" for module imports like language localization.
We use the Google StyleGuide for JavaScript with some slightly adjusted rules. See ".eslintrc.json" for more details. It is recommended to make sure new code adheres to the StyleGuide before commiting. This can be achieved by installing the VSCode Extension "ESLint" which highlights violations. Setting eslint as default formatter also gives the option, to automatically fix most StyleGuide violations by running the command "Format Code".
We use the CSS extension language SASS which is compiled into CSS by the application. This makes the code more readable and allows for example nested selectors. Global CSS styling can be done inside "src/global.scss" but should be used rarely in order not to break existing layout. Additionally theme colors can be adjusted inside "src/theme/variables.scss".
The folder src/assets includes apart from images and icons the folder "i18n", which contains translations of the user-interface into several languages. Tranlations of texts in HTML files can be inserted as "{{'' | translate}}" where contains the key of an translation found inside the "i18n" folder. For this to work "TranslateModule" from "@ngx-translate/core" needs to be imported in "*.module.ts". To make a language selectable for the end user, it has to be added in the Admin interface with a translation file attached. Then the user can change the menu language by clicking either the globe icon on the Login page or inside his profile settings.
The admin interface can be accessed by entering the address "<server_url>/admin" into a browser or clicking the wrench icon on the Frontend Login page. Inside, users can be edited, e.g. giving them the publisher roles. Additionally languages can be added and removed.
A Documentation page for the end user is located in "src/help/documentation". On the Frontend Login page it can be accessed by clicking the question mark icon.