Merge pull request #158 from l0drex/beta

v1.3

package.json

@@ -33,6 +33,7 @@
     "gedcomx-js": "^2.8.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-localization": "^1.0.19",
     "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",

src/App.css

@@ -5,38 +5,81 @@
   width: 100%;
   margin: 0;
   display: grid;
-  gap: 0;
+  gap: 1rem;
   justify-content: space-between;
   grid-template-columns: 1fr;
+  overflow: auto;
 
-  background: var(--background);
+  background: var(--background-lower);
   font-family: "Nunito", sans-serif;
+
+  grid-template-areas:
+    "header"
+    "main"
+    "footer";
+  grid-template-rows: auto 2fr auto;
 }
 
 #root > * {
-  width: 100%;
   box-sizing: border-box;
 }
 
 main {
   grid-area: main;
-  background: var(--background-lower);
 }
 
 main > * {
   background: var(--background);
   margin: 1rem auto 0;
   box-sizing: border-box;
+  border-radius: .5rem;
+}
+
+main > :first-child {
+  margin-top: 0;
+}
+
+footer {
+  color: var(--foreground-secondary);
+  text-align: left;
+  grid-area: footer;
+  padding: .5rem 1rem;
+  padding-top: 0;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+footer a {
+  color: var(--foreground-secondary);
+}
+
+footer * {
+  margin: 0 auto;
+}
+
+li:not(:last-child) {
+  margin-bottom: .5rem;
 }
 
 @media (orientation: portrait) {
-  #root {
+  @media (max-width: 749px) {
+    #title {
+      display: none;
+    }
+
+    footer :not(.important) {
+      display: none;
+    }
+  }
+
+  #root.sidebar-visible {
     grid-template-areas:
     "header"
     "sidebar"
     "main"
     "footer";
-    grid-template-rows: auto auto 1fr auto;
+    grid-template-rows: auto auto 2fr auto;
   }
 }
 
@@ -55,6 +98,10 @@ main > * {
     grid-template-areas:
       "header header"
       "sidebar main"
-      "sidebar footer";
+      "footer footer";
+  }
+
+  main {
+    margin-right: 1rem;
   }
 }

src/App.tsx

@@ -1,85 +1,30 @@
 import * as React from "react";
-import {ReactNode} from "react";
 import './App.css';
-import {localize} from "./main";
-import config from "./config";
-import Header from "./components/Header";
-import NavigationTutorial from "./components/NavigationTutorial";
-import Notification from "./components/Notification";
-import Uploader from "./components/Uploader";
+import {strings} from "./main";
 import View from "./components/View";
-import {graphModel, loadData} from "./backend/ModelGraph";
 import {BrowserRouter, Route, Routes} from "react-router-dom";
-
-interface State {
-  notifications: ReactNode[]
-  dataAvailable: boolean
-}
-
-class App extends React.Component<any, State> {
-  constructor(props) {
-    super(props);
-    new URL(window.location.href);
-    let data = sessionStorage.getItem("familyData");
-    if (data) {
-      loadData(JSON.parse(data));
-    }
-
-    this.state = {
-      notifications: [],
-      dataAvailable: graphModel !== undefined
-    };
-  }
-
-  render() {
-    return <BrowserRouter basename={"family-tree"}>
-      <Header/>
-        {this.state.notifications}
-        <Routes>
-          <Route path="/" element={
-            <main>
-              <Uploader onFileSelected={this.onFileSelected.bind(this)}/>
-              <NavigationTutorial/>
-            </main>
-          }/>
-          <Route path="/view" element={<View/>}/>
-        </Routes>
-    </BrowserRouter>
-  }
-
-  onFileSelected(fileContent) {
-    sessionStorage.setItem("familyData", fileContent);
-    loadData(JSON.parse(fileContent));
-    if (window.location.href.endsWith("/")) {
-      window.location.href += "view";
-    } else {
-      window.location.href += "/view";
-    }
-  }
-
-  componentDidMount() {
-    localize(config.browserLang);
-  }
-
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    let notifications = this.state.notifications;
-
-    if (error.name.startsWith("Warning")) {
-      console.warn(error.message);
-      notifications.push(
-        <Notification type="warning" description={error.message} key={error.message}/>
-      );
-    } else {
-      console.error(error.message);
-      notifications.push(
-        <Notification type="error" description={error.message} key={error.message}/>
-      );
-    }
-
-    this.setState({
-      notifications: notifications
-    })
-  }
+import {Home, Imprint} from "./components/Home";
+
+function App() {
+  return <BrowserRouter basename={"family-tree"}>
+    <Routes>
+      <Route path="/" element={<Home/>}/>
+      <Route path="/view" element={<View/>}/>
+      <Route path="/imprint" element={<Imprint/>}/>
+    </Routes>
+    <footer>
+        <span>
+          {strings.formatString(strings.footer.sourceCode, <a
+            href={"https://github.com/l0drex/family-tree"}>Github</a>)}
+        </span>
+      <a href="/family-tree/imprint" className="important">
+        {strings.footer.imprint}
+      </a>
+      <a href="https://github.com/l0drex/family-tree/issues/new">
+        {strings.footer.bugReport}
+      </a>
+    </footer>
+  </BrowserRouter>
 }
 
 export default App;

src/backend/ModelGraph.ts

@@ -1,5 +1,4 @@
 import GedcomX, {setReferenceAge} from "./gedcomx-extensions";
-import {translationToString} from "../main";
 import viewGraph, {ViewMode} from "./ViewGraph";
 import config from "../config";
 import {PersonFactTypes} from "./gedcomx-enums";
@@ -10,13 +9,7 @@ class ModelGraph extends GedcomX.Root {
   constructor(data) {
     super(data)
     if (!data || data.persons.length < 0 || data.relationships.length < 0) {
-      throw new Error(
-        translationToString({
-          en: "The calculated graph is empty!" +
-            "Please check if your files are empty. If not, please contact the administrator!",
-          de: "Der berechnete Graph ist leer!" +
-            " Prüfe bitte, ob die Dateien leer sind. Sollte dies nicht der Fall sein, kontaktiere bitte den Administrator!"
-        }));
+      throw new Error("The calculated graph is empty! Please check if your files are empty. If not, please file a bug report!");
     }
 
     console.log("Found", data.persons.length, "people");
@@ -30,6 +23,10 @@ class ModelGraph extends GedcomX.Root {
     return super.getPersonById(id);
   }
 
+  getSourceDescriptionById(id: string): GedcomX.SourceDescription {
+    return this.getSourceDescriptions().find(d => d.getId() === id);
+  }
+
   getPersonByName = (name: string): GedcomX.Person => {
     return this.persons.find(person => person.getFullName().toLowerCase().includes(name));
   }

src/backend/gedcomx-enums.ts

@@ -88,4 +88,11 @@ export enum OccupationCategories {
   King = "King"
 }
 
+export enum KnownResourceTypes {
+  Collection = "http://gedcomx.org/Collection",
+  PhysicalArtifact ="http://gedcomx.org/PhysicalArtifact",
+  DigitalArtifact = "http://gedcomx.org/DigitalArtifact",
+  Record = "http://gedcomx.org/Record"
+}
+
 export const baseUri = "http://gedcomx.org/";