Merge pull request #984 from WatWowMap/locales-editing-page

feat: locales editing page

Author: TurtIeSocks

packages/locales/lib/human/en.json

@@ -765,5 +765,19 @@
   "reset_spawnpoints": "Reset Spawnpoints",
   "reset_submission_cells": "Reset Submission Cells",
   "hisuian": "Hisuian",
-  "spacial_rend_range": "Spacial Rend Range"
+  "spacial_rend_range": "Spacial Rend Range",
+  "key": "Key",
+  "ai": "AI",
+  "human": "Human",
+  "locales": "Locales",
+  "instructions": "Instructions",
+  "locale_instructions_1": "Select a language from the dropdown",
+  "locale_instructions_2": "Enter the desired translations in the \"Human\" column",
+  "locale_instructions_3": "Click the \"$t(download)\" button to download a JSON file",
+  "locale_instructions_4": "Fork the GitHub repo link below",
+  "locale_instructions_5": "Create a new branch and name it the language you are translating",
+  "locale_instructions_6": "Replace the contents of \"packages/locales/lib/human/{{lng}}.json\" with the file you downloaded",
+  "locale_instructions_7": "Create a pull request",
+  "locale_instructions_8": "Wait for the pull request to be reviewed and merged",
+  "enter_translation": "Enter Translation"
 }

packages/locales/lib/index.js

@@ -1,7 +1,12 @@
 const { create } = require('./create')
 const { missing } = require('./missing')
 const { generate } = require('./generate')
-const { readLocaleDirectory, writeAll, getStatus } = require('./utils')
+const {
+  readLocaleDirectory,
+  writeAll,
+  getStatus,
+  readAndParseJson,
+} = require('./utils')
 
 const locales = readLocaleDirectory(true).map((x) => x.replace('.json', ''))
 const status = getStatus()
@@ -12,3 +17,4 @@ module.exports.create = create
 module.exports.missing = missing
 module.exports.generate = generate
 module.exports.writeAll = writeAll
+module.exports.readAndParseJson = readAndParseJson

packages/locales/lib/missing.js

@@ -5,27 +5,34 @@ const { resolve } = require('path')
 const { log, HELPERS } = require('@rm/logger')
 const { readAndParseJson, readLocaleDirectory } = require('./utils')
 
-async function missing() {
-  const localTranslations = readLocaleDirectory(true)
+/**
+ *
+ * @param {string} fileName
+ * @returns {Promise<import('./generate').I18nObject>}
+ */
+async function missing(fileName) {
   const englishRef = await readAndParseJson('en.json', true)
+  const humanLocales = await readAndParseJson(fileName, true)
+  /** @type {import('./generate').I18nObject} */
+  const missingKeys = {}
 
-  await Promise.allSettled(
-    localTranslations.map(async (fileName) => {
-      const humanLocales = await readAndParseJson(fileName, true)
-      const aiLocales = await readAndParseJson(fileName, false)
-      const combined = {
-        ...aiLocales,
-        ...humanLocales,
+  Object.keys(englishRef)
+    .sort()
+    .forEach((key) => {
+      if (!humanLocales[key] && !key.startsWith('locale_selection_')) {
+        missingKeys[key] = process.argv.includes('--ally')
+          ? `t('${key}')`
+          : englishRef[key]
       }
-      const missingKeys = {}
+    })
+  return missingKeys
+}
 
-      Object.keys(englishRef).forEach((key) => {
-        if (!combined[key] && !key.startsWith('locale_selection_')) {
-          missingKeys[key] = process.argv.includes('--ally')
-            ? `t('${key}')`
-            : englishRef[key]
-        }
-      })
+async function missingAll() {
+  const localTranslations = readLocaleDirectory(true)
+  await Promise.allSettled(
+    localTranslations.map(async (fileName) => {
+      const missingKeys = await missing(fileName)
       await fs.writeFile(
         resolve(
           __dirname,
@@ -44,5 +51,5 @@ async function missing() {
 module.exports.missing = missing
 
 if (require.main === module) {
-  missing().then(() => process.exit(0))
+  missingAll().then(() => process.exit(0))
 }

packages/locales/lib/utils.js

@@ -132,14 +132,14 @@ function getStatus() {
         ),
       )
       const mergedSize = Object.keys({ ...aiJson, ...humanJson }).length
-      const human = +(humanHas / total).toFixed(2) * 100
-      const localeTotal = Math.min(1, +(mergedSize / total).toFixed(2)) * 100
+      const human = (humanHas / total) * 100
+      const localeTotal = (mergedSize / total) * 100
       return [
         locale.replace('.json', ''),
         {
-          human,
-          ai: localeTotal - human,
-          total: localeTotal,
+          human: Math.round(human),
+          ai: Math.round(localeTotal - human),
+          total: Math.round(localeTotal),
         },
       ]
     }),

server/src/graphql/resolvers.js

@@ -3,6 +3,7 @@ const { resolve } = require('path')
 const { GraphQLJSON } = require('graphql-type-json')
 const { S2LatLng, S2RegionCoverer, S2LatLngRect } = require('nodes2ts')
 const config = require('@rm/config')
+const { missing, readAndParseJson } = require('@rm/locales')
 
 const buildDefaultFilters = require('../services/filters/builder/base')
 const filterComponents = require('../services/functions/filterComponents')
@@ -198,6 +199,16 @@ const resolvers = {
       }
       return {}
     },
+    locales: async (_, { locale }) => {
+      const missingLocales = await missing(`${locale}.json`)
+      return locale
+        ? {
+            missing: Object.keys(missingLocales),
+            human: await readAndParseJson(`${locale}.json`, true),
+            ai: await readAndParseJson(`${locale}.json`, false),
+          }
+        : { missing: null, human: null, ai: null }
+    },
     motdCheck: (_, { clientIndex }, { req, perms }) => {
       const motd = config.getMapConfig(req).messageOfTheDay
       return (

server/src/graphql/typeDefs/index.graphql

@@ -23,6 +23,7 @@ type Query {
     filters: JSON
   ): [Gym]
   gymsSingle(id: ID, perm: String): Gym
+  locales(locale: String): Locales
   motdCheck(clientIndex: Int): Boolean
   nests(
     minLat: Float

server/src/graphql/typeDefs/map.graphql

@@ -216,3 +216,9 @@ type ValidUserObj {
   loggedIn: Boolean
   admin: Boolean
 }
+
+type Locales {
+  human: JSON
+  ai: JSON
+  missing: JSON
+}

server/src/index.js

@@ -244,12 +244,13 @@ startApollo(httpServer).then((server) => {
         const definition = parse(req.body.query).definitions.find(
           (d) => d.kind === 'OperationDefinition',
         )
+        const endpoint = definition?.name?.value || ''
         const errorCtx = {
           id,
           user,
           clientV,
           serverV,
-          endpoint: definition.name?.value || '',
+          endpoint,
         }
 
         if (clientV && serverV && clientV !== serverV) {
@@ -262,7 +263,7 @@ startApollo(httpServer).then((server) => {
           })
         }
 
-        if (!perms) {
+        if (!perms && endpoint !== 'Locales') {
           throw new GraphQLError('session_expired', {
             extensions: {
               ...errorCtx,
@@ -275,7 +276,7 @@ startApollo(httpServer).then((server) => {
         if (
           definition?.operation === 'mutation' &&
           !id &&
-          definition?.name?.value !== 'SetTutorial'
+          endpoint !== 'SetTutorial'
         ) {
           throw new GraphQLError('unauthenticated', {
             extensions: {

server/src/routes/clientRouter.js

@@ -15,6 +15,8 @@ const CLIENT_ROUTES = [
   '/500',
   '/reset',
   '/playground',
+  '/locales',
+  '/data-management',
 ]
 
 router.get(CLIENT_ROUTES, (req, res) => {

src/assets/css/main.css

@@ -554,3 +554,9 @@ input[type='time']::-webkit-calendar-picker-indicator {
   opacity: 90%;
   z-index: 9;
 }
+
+.locales-layout {
+  display: grid;
+  grid-template-rows: auto 1fr auto; /* Header, table, footer */
+  min-height: 100svh;
+}