Skip to content

Add i18n support #336

@Raptor399

Description

@Raptor399

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:
Image
  • 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/locales directory to contain locale files, and created a en.json to contain all texts from .vue and .ts files 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.js during nightly runs. It uses the API to get information on modules and interfaces to generate labels and extract English descriptions to English locale files src/locales/en_module_info.ts and src/locales/en_interfaces_list.ts. Note that I didn't manage to compile and run everest-core, so I used a running everest-demo server 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 en is 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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions