Retrieve languages and translation coverage from server

Currently the available languages are kept on the client-side in frontend/src/app/navbar/languages.ts in the form

export const languages = [
    { key: 'en', icons: [ 'gb', 'us' ], lang: 'English' },
    { key: 'ar_SA', icons: [ 'ae', 'tn' ], lang: 'عربى' },
    { key: 'az_AZ', icons: [ 'az' ], lang: 'Azərbaycanca', isFlask: true },
    { key: 'bg_BG', icons: [ 'bg' ], lang: 'български (език)' },
...

with the actual language files residing in frontend/src/assets/i18n/*.json files. This has several issues:

1. languages.ts duplicates the actual list of languages itself
2. languages.ts contains the name of the language in that particular language which is a duplicate of the LANGUAGE key in every /i18n/*.json file, e.g. "LANGUAGE": "عربى"
3. The isFlask: true flag is manually set based on information from CrowdIn about the translation completeness. As with manual processes, this can easily outdate. Languages with <85% translation ratio should have the isFlask: true flag

Solution

• Create an API endpoint that delivers the language list based on content of /i18n/xx_XX.json files (the xx is critical to be strictly applied as two letters to avoid spoilering a particular existing challenge!)
• Extract the LANGUAGE property from each /i18n/xx_XX.json and add it to the endpoint response to have the label for display in the dropdown
• Calculate the translation completeness in percent, e.g. via comparing each xx_XX.json with en.json with https://www.npmjs.com/package/diff
• On the server create a mapping for languages to flag icons either programmatically (might not be possible because some languages show multiple flags) or via a simpler version of today’s languages.ts
• Prepend a static en entry with 100% translation completion in every response of the endpoint and have other languages sorted alphabetically

Endpoint /rest/languages response example

[
    { key: 'en', icons: [ 'gb', 'us' ], lang: 'English', percentage: 100 },
    { key: 'ar_SA', icons: [ 'ae', 'tn' ], lang: 'عربى', percentage: 93 },
    { key: 'az_AZ', icons: [ 'az' ], lang: 'Azərbaycanca', percentage: 40 },
    { key: 'bg_BG', icons: [ 'bg' ], lang: 'български (език)', percentage: 96 },
...

Visualization on UI

Instead of the flask symbol next to incomplete translations the i18n completion could be indicated like this with :

• 0-10% = https://fontawesome.com/icons/thermometer-empty?style=solid
• 11-50% = https://fontawesome.com/icons/thermometer-half?style=solid
• 51-85% = https://fontawesome.com/icons/thermometer-three-quarters?style=solid
• 85-100% = https://fontawesome.com/icons/thermometer-full?style=solid

[bkimminich]

Feel free to work on it, I’ll put it “in progress”. Assigning issues isn’t possible for external users except if you were the ticket creator.

[bkimminich]

The languages are loaded in the NavbarComponent (/frontend/src/app/navbar/navbar.component.ts) and are presented in a dropdown menu. Currently this list comes from the mentioned static file, in the future it should come from the new API endpoint.