From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Tue, 23 Aug 2022 08:45:48 +0000 (+0200)
Subject: technique translations
X-Git-Url: https://git.localhorst.tv/?a=commitdiff_plain;ds=inline;h=6f34dd7c00bf0bd152a97b175390be00c3a0ba31;p=alttp.git

technique translations
---

diff --git a/app/Models/Technique.php b/app/Models/Technique.php
index 1a54a0e..256afc0 100644
--- a/app/Models/Technique.php
+++ b/app/Models/Technique.php
@@ -17,7 +17,16 @@ class Technique extends Model
 			->using(TechniqueChapter::class);
 	}
 
+	public function translations() {
+		return $this->hasMany(TechniqueTranslation::class);
+	}
+
 	protected $casts = [
 		'index' => 'boolean',
 	];
+
+	protected $with = [
+		'translations',
+	];
+
 }
diff --git a/app/Models/TechniqueTranslation.php b/app/Models/TechniqueTranslation.php
new file mode 100644
index 0000000..e7c7603
--- /dev/null
+++ b/app/Models/TechniqueTranslation.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class TechniqueTranslation extends Model
+{
+	use HasFactory;
+}
diff --git a/database/migrations/2022_08_23_082412_create_technique_translations_table.php b/database/migrations/2022_08_23_082412_create_technique_translations_table.php
new file mode 100644
index 0000000..20c6083
--- /dev/null
+++ b/database/migrations/2022_08_23_082412_create_technique_translations_table.php
@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+	/**
+	 * Run the migrations.
+	 *
+	 * @return void
+	 */
+	public function up()
+	{
+		Schema::create('technique_translations', function (Blueprint $table) {
+			$table->id();
+			$table->foreignId('technique_id')->constrained();
+			$table->string('locale');
+			$table->text('title');
+			$table->text('short');
+			$table->text('description');
+			$table->timestamps();
+			$table->unique(['technique_id', 'locale']);
+		});
+	}
+
+	/**
+	 * Reverse the migrations.
+	 *
+	 * @return void
+	 */
+	public function down()
+	{
+		Schema::dropIfExists('technique_translations');
+	}
+};
diff --git a/resources/js/components/techniques/Detail.js b/resources/js/components/techniques/Detail.js
index d586a9a..d955397 100644
--- a/resources/js/components/techniques/Detail.js
+++ b/resources/js/components/techniques/Detail.js
@@ -1,19 +1,30 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Container } from 'react-bootstrap';
+import { withTranslation } from 'react-i18next';
 
 import Outline from './Outline';
+import { getTranslation } from '../../helpers/Technique';
+import i18n from '../../i18n';
 
 const Detail = ({ technique }) => <Container as="article">
-	<h1>{technique.title}</h1>
+	<h1>{getTranslation(technique, 'title', i18n.language)}</h1>
 	<Outline technique={technique} />
-	<div dangerouslySetInnerHTML={{ __html: technique.description }} />
+	<div dangerouslySetInnerHTML={{
+		__html: getTranslation(technique, 'description', i18n.language),
+	}} />
 	{technique.chapters ? technique.chapters.map(chapter =>
 		<section id={`c${chapter.id}`} key={`c${chapter.id}`}>
 			{chapter.pivot.level ?
-				React.createElement(`h${chapter.pivot.level}`, {}, chapter.title)
+				React.createElement(
+					`h${chapter.pivot.level}`,
+					{},
+					getTranslation(chapter, 'title', i18n.language),
+				)
 			: null}
-			<div dangerouslySetInnerHTML={{ __html: chapter.description }} />
+			<div dangerouslySetInnerHTML={{
+				__html: getTranslation(chapter, 'description', i18n.language),
+			}} />
 		</section>
 	) : null}
 </Container>;
@@ -27,4 +38,4 @@ Detail.propTypes = {
 	}),
 };
 
-export default Detail;
+export default withTranslation()(Detail);
diff --git a/resources/js/components/techniques/Outline.js b/resources/js/components/techniques/Outline.js
index bf98eba..ae18aa8 100644
--- a/resources/js/components/techniques/Outline.js
+++ b/resources/js/components/techniques/Outline.js
@@ -1,6 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { ListGroup } from 'react-bootstrap';
+import { withTranslation } from 'react-i18next';
+
+import { getTranslation } from '../../helpers/Technique';
+import i18n from '../../i18n';
 
 const Outline = ({ technique }) => technique.chapters && technique.chapters.length ?
 	<aside className="tech-outline mb-3 ms-3">
@@ -10,9 +14,9 @@ const Outline = ({ technique }) => technique.chapters && technique.chapters.leng
 					action
 					href={`#c${chapter.id}`}
 					key={`c${chapter.id}`}
-					title={chapter.short || null}
+					title={getTranslation(chapter, 'short', i18n.language) || null}
 				>
-					{chapter.title}
+					{getTranslation(chapter, 'title', i18n.language)}
 				</ListGroup.Item>
 			: null)}
 		</ListGroup>
@@ -26,4 +30,4 @@ Outline.propTypes = {
 	}),
 };
 
-export default Outline;
+export default withTranslation()(Outline);
diff --git a/resources/js/helpers/Technique.js b/resources/js/helpers/Technique.js
new file mode 100644
index 0000000..ea60cc7
--- /dev/null
+++ b/resources/js/helpers/Technique.js
@@ -0,0 +1,15 @@
+export const getTranslation = (tech, prop, lang) => {
+	const direct = tech.translations.find(t => t.locale === lang);
+	if (direct) {
+		return direct[prop];
+	}
+	const sameLang = tech.translations.find(t => t.locale.substr(0, 2) === lang.substr(0, 2));
+	if (sameLang) {
+		return sameLang[prop];
+	}
+	return tech[prop];
+};
+
+export default {
+	getTranslation,
+};