-
Notifications
You must be signed in to change notification settings - Fork 7
Description
Love the work being done in this project as well as on EVerest as a whole! Kudos and thank you!
Apps like the EVerest admin panel, that deal with a complex subject, rely on good documentation. I heard Pionix is working on donating a lot of documentation, which got me excited. So I fired up a demo environment and noticed that there already is a lot of documentation in the admin UI.
A thought crossed my mind: EVerest serves a global audience, what would it take to support localization in the admin panel?
So I set out to implement just that: https://github.com/Raptor399/everest-admin-panel/tree/feature/i18n
Of course the last thing I did was read Contributing, only to find out that I should have created an issue first and follow commit conventions. 🤦 Doh! Apologies! I've tried to course correct as best as possible.
About the implementation
- I am familiar with Javascript and HTML, but I'm new to VueJS and TypeScript.
- I've left the code alone as much as possible, and stick with VueJS conventions by using vue-i18n and Vuetify's adapter mechanism as basis.
- I added a language selector in the top right of the UI to minimize the UI real estate impact:
- To accommodate statefulness, I've modified routing to automatically include a locale identifier in the URL, e.g. http://localhost:8080/#/en/connect . The router automatically compensates for URLs requested without locale by routing to the default locale
en. This could potentially be a breaking change, e.g. for automated tests that expect the URL to be different. I don't know if these kinds of tests exist, though. - I added a
src/localesdirectory to contain locale files, and created aen.jsonto contain all texts from.vueand.tsfiles of the admin panel. The keys indicate the filename, optional subsystem, and intention of the text and are sorted alphabetically to support simple diffs going forward. - However, by far the most text visible in the admin panel does not come from the admin panel itself, but is imported from a running EVerest server by
update-simulator-data.jsduring nightly runs. It uses the API to get information on modules and interfaces to generate labels and extract English descriptions to English locale filessrc/locales/en_module_info.tsandsrc/locales/en_interfaces_list.ts. Note that I didn't manage to compile and runeverest-core, so I used a runningeverest-demoserver instead. This means the list of modules and interfaces may very well be outdated. The first nightly run after merging should fix this automatically. - At this time, the API is locale agnostic and only returns English descriptions. I prefer to keep changing the API out of scope for now, and keep it as is. To solve for this restriction, other locale files will have to be created manually. Long term, this is not ideal. It would be best to manage texts and their translations in the original repository where the changes are made. But for now the solution should be sufficient. Since
enis the fallback locale there will always be an English text to fall back on for any label missing translations. - I've added two demo languages: German
de, and Chinese (simplified)zh. I'm not a native German, Chinese speaker, or EVerest specialist, so I chose to generate these files using AI and someone needs to review for sanity. But having these helps tremendously in spotting missing or non-updating labels in the UI.
Please discuss, and/or review the implemented feature/i18n. All feedback is appreciated!