dynamic plane info page

.idea/.name

@@ -0,0 +1 @@
+hugos_flugzeuge

src/App.js

@@ -3,8 +3,10 @@ import {
     Route, NavLink, HashRouter
 } from 'react-router-dom'
 import './app.css';
-import Modern from "./Militaer";
-import Home from "./Home";
+import Modern from './Militaer';
+import Home from './Home';
+import UeberHugo from './UeberHugo'
+import Planes from "./Planes";
 
 class App extends Component {
     render() {
@@ -13,11 +15,13 @@ class App extends Component {
                 <div id="parent">
                     <header>
                         <Navigation/>
-                        <h1>Hugos Lieblingsflugzeuge</h1>
+                        <h1>&#9992;&#65039;Hugos Lieblingsflugzeuge&#9992;&#65039;</h1>
                     </header>
                     <main>
                         <Route exact path="/" component={Home}/>
+                        <Route exact path="/hugo" component={UeberHugo}/>
                         <Route path="/militaer/modern" component={Modern}/>
+                        <Route path="/flugzeug" component={Planes}/>
                     </main>
                     <Footer/>
                 </div>
@@ -36,6 +40,9 @@ class Navigation extends Component {
                     <li>
                         <NavLink to="/">Start</NavLink>
                     </li>
+                    <li>
+                        <NavLink to="/hugo">Über Hugo</NavLink>
+                    </li>
                     <li>
                         <NavLink to="/">Militärflugzeuge</NavLink>
                         <div className="content">

src/Home.js

@@ -1,15 +1,31 @@
 import React, {Component} from 'react';
 import ModelImage from './Plane';
+import planes from './planes.json'
 
 class Home extends Component {
+    constructor(props) {
+        super(props);
+        const favs = planes.filter(isFavPlane);
+        this.state = {
+            favs: favs
+        }
+    }
+
     render() {
+        const favs = this.state.favs
+            .map(x => <ModelImage src={x.category + x.img} name={x.name} cat={x.category}/>);
+
         return (
             <div>
-                <h1>Hugos Favoriten</h1>
-                <ModelImage src="f22.png" name="F-22 Raptor"/>
+                <h2>Hugos Favoriten</h2>
+                {favs}
             </div>
         );
     }
 }
 
+function isFavPlane(plane) {
+    return plane.tags.includes('fav');
+}
+
 export default Home;

src/Militaer.js

@@ -5,7 +5,7 @@ import ModelImage from './Plane'
 class Modern extends React.Component {
     render() {
         const items = Array(100).fill(1).map((x, y) => x + y)
-            .map(x => <ModelImage src="f22.png" name={'F' + (20 + x) + ' Raptor'}/>);
+            .map(x => <ModelImage src="military/modern/f22.png" name={'F' + (20 + x) + ' Raptor'}/>);
 
         return (
             <div>

src/Plane.js

@@ -11,19 +11,23 @@ class ModelImage extends Component {
         this.state = {
             name: '',
             src: '',
+            cat: '',
         }
     }
 
     static getDerivedStateFromProps(props) {
-        return {name: props.name, src: props.src};
+        return {name: props.name, src: props.src,
+            cat: (props.cat === undefined ? '' : props.cat),
+        };
     }
 
     render() {
+        const s = this.state;
         return (
-            <NavLink to={'/flugzeug/' + this.state.name} className="model">
-                <img src={process.env.PUBLIC_URL + '/img/' + this.state.src} alt={this.state.name}/>
+            <NavLink to={'/flugzeug/' + s.cat + s.name} className="model">
+                <img src={process.env.PUBLIC_URL + '/img/' + s.src} alt={this.state.name}/>
                 <div className="model-info">
-                    <span className="model-info-text">{this.state.name}</span>
+                    <span className="model-info-text">{s.name}</span>
                 </div>
             </NavLink>
         );

src/Planes.js

@@ -0,0 +1,40 @@
+import React, {Component} from 'react';
+import planes from './planes.json'
+
+class Planes extends Component {
+    render() {
+        const loc = this.props.location.pathname;
+        const planeName = loc.replaceAll('/flugzeug/', '');
+        let plane;
+        for (const e of planes) {
+            if (e.category + e.name === planeName) {
+                plane = e;
+                break;
+            }
+        }
+
+        let content;
+        if (plane === undefined) {
+            content =
+                <div>
+                    <h2>Flugzeug nicht gefunden.</h2>
+                </div>
+            ;
+        } else {
+            const imgPath = process.env.PUBLIC_URL + '/img/' + plane.category + plane.img;
+            content =
+                <div>
+                    <h2>{plane.name}</h2>
+                    <img src={imgPath} alt={'Bild von ' + plane.name}/>
+                    <p>{plane.description}</p>
+                </div>
+            ;
+        }
+
+        return (
+            content
+        );
+    }
+}
+
+export default Planes;

src/UeberHugo.js

@@ -0,0 +1,19 @@
+import React, {Component} from 'react';
+
+class UeberHugo extends Component {
+    render() {
+        return (
+            <div>
+                <h1>Hugo Boss</h1>
+                <p>Hugo Boss ist ein begeisterter Modellbauer und Gründungsmitglied
+                vom Modellbauverein Winterthur.</p>
+                <p>Am liebsten baut er Flugzeuge, sie haben ihn schon sein ganzes Leben fasziniert und er wollte immer Pilot werden.
+                Das hat er zwar nicht geschafft, aber das Modellbauen ermöglicht es ihm, seine Leidenschaft trotzdem auszuleben.
+                Auf dieser Website präsentiert Hugo seine liebsten Flugzeuge, die er am liebsten alle nachbauen würde.</p>
+                <img src={process.env.PUBLIC_URL + '/img/hugo.jpg'} alt="Hugo Boss"/>
+            </div>
+        )
+    }
+}
+
+export default UeberHugo;

src/app.css

@@ -12,11 +12,15 @@ body {
 
 #parent {
     display: grid;
-    grid-template-rows: 150px auto;
+    grid-template-rows: 100px auto;
     grid-template-areas: "header"
                         "main";
 }
 
+p {
+    width: 1000px;
+}
+
 main {
     grid-area: main;
 }
@@ -32,10 +36,12 @@ header {
 
 header h1 {
     margin-top: 50px;
+    margin-left: 10px;
+    margin-bottom: 0;
 }
 
 main {
-    margin: 10px;
+    margin-left: 10px;
 }
 
 /*Navigation*/

src/planes.json

@@ -0,0 +1,27 @@
+[
+  {
+    "name": "F-22 Raptor",
+    "img": "f22.png",
+    "category": "military/modern/",
+    "description": "Die F-22 Raptor ist ein Kampfflugzeug der 6. Generation der USA. Durch seine moderne Computersteuerung und Tarnkappentechnik ist es der Herr der Lüfte",
+    "tags": [
+      "fav"
+    ]
+  },
+  {
+    "name": "AV-8B Harrier",
+    "img": "harrier.jpg",
+    "category": "military/cold_war/",
+    "description": "Der Harrier ist ein Britisches Kampflugzeug. Er war der erste Jet (im aktiven Einsatz) mit der Fähigkeit, senkrecht wie ein Helikopter abzuheben und zu landen.",
+    "tags": [
+      "fav"
+    ]
+  },
+  {
+    "name": "Airbus A380",
+    "img": "a380.jpg",
+    "category": "airliner/airbus/",
+    "description": "Die A380 ist das grösste Passagierflugzeug der Welt.",
+    "tags": ["fav"]
+  }
+]