localization in progress

4 years ago · 121c5526b3
10 changed files with 40 additions and 43 deletions
--- a/public/android-chrome-192x192.png
+++ b/public/android-chrome-192x192.png
--- a/public/android-chrome-512x512.png
+++ b/public/android-chrome-512x512.png
--- a/public/apple-touch-icon.png
+++ b/public/apple-touch-icon.png
--- a/public/index.html
+++ b/public/index.html
@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="de">

 <head>
  <meta charset="utf-8">
@ -13,10 +13,10 @@
  <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
  <link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#5bbad5">
-  <meta name="theme-color" content="#50d29d">
+  <meta name="theme-color" content="#55b223">
  <script src="https://apis.google.com/js/api.js"></script>

-  <title>Expenses</title>
+  <title>Haushaltsbuch</title>
 </head>

 <body>
--- a/public/manifest.json
+++ b/public/manifest.json
@ -1,6 +1,6 @@
 {
-    "short_name": "Expenses",
-    "name": "Expense Manager",
+    "short_name": "Haushaltsbuch",
+    "name": "Haushaltsbuch",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
@ -13,8 +13,8 @@
            "type": "image/png"
        }
    ],
-    "theme_color": "#50d29d",
-    "background_color": "#50d29d",
+    "theme_color": "#55b223",
+    "background_color": "#55b223",
    "display": "standalone",
    "start_url": "."
 }
--- a/src/App.css
+++ b/src/App.css
@ -5,7 +5,7 @@
 }

 header.mdc-toolbar {
-  background-color: #50d29d;
+  background-color: #55b223;
 }
 button.mdc-toolbar__icon {
  display: inline-block;
--- a/src/App.js
+++ b/src/App.js
@ -1,6 +1,6 @@
-import React, { Component } from "react";
-import { ExpenseList, ExpenseForm, LoadingBar } from "./components/index";
-import { MDCSnackbar } from "@material/snackbar/dist/mdc.snackbar.js";
+import React, {Component} from "react";
+import {ExpenseList, ExpenseForm, LoadingBar} from "./components/index";
+import {MDCSnackbar} from "@material/snackbar/dist/mdc.snackbar.js";

 import "@material/fab/dist/mdc.fab.css";
 import "@material/button/dist/mdc.button.css";
@ -72,40 +72,40 @@ class App extends Component {
  }

  signedInChanged = (signedIn) => {
-    this.setState({ signedIn: signedIn });
+    this.setState({signedIn: signedIn});
    if (this.state.signedIn) {
      this.load();
    }
  }

  handleExpenseSubmit = () => {
-    this.setState({ processing: true, showExpenseForm: false });
+    this.setState({processing: true, showExpenseForm: false});
    const submitAction = (this.state.expense.id
      ? this.update
      : this.append).bind(this);
    submitAction(this.state.expense).then(
      response => {
        this.snackbar.show({
-          message: `Expense ${this.state.expense.id ? "updated" : "added"}!`
+          message: `Ausgabe ${this.state.expense.id ? "aktualisiert" : "hinzugefügt"}!`
        });
        this.load();
      },
      response => {
-        console.error("Something went wrong");
+        console.error("Ausgabe konnte nicht gespeichert werden!");
        console.error(response);
-        this.setState({ loading: false });
+        this.setState({loading: false});
      }
    );
  }

  handleExpenseChange = (attribute, value) => {
    this.setState({
-      expense: Object.assign({}, this.state.expense, { [attribute]: value })
+      expense: Object.assign({}, this.state.expense, {[attribute]: value})
    });
  }

  handleExpenseDelete = (expense) => {
-    this.setState({ processing: true, showExpenseForm: false });
+    this.setState({processing: true, showExpenseForm: false});
    const expenseRow = expense.id.substring(10);
    window.gapi.client.sheets.spreadsheets
      .batchUpdate({
@ -127,23 +127,23 @@ class App extends Component {
      })
      .then(
        response => {
-          this.snackbar.show({ message: "Expense deleted!" });
+          this.snackbar.show({message: "Ausgabe entfernt!"});
          this.load();
        },
        response => {
-          console.error("Something went wrong");
+          console.error("Ausgabe konnte nicht entfernt werden!");
          console.error(response);
-          this.setState({ loading: false });
+          this.setState({loading: false});
        }
      );
  }

  handleExpenseSelect = (expense) => {
-    this.setState({ expense: expense, showExpenseForm: true });
+    this.setState({expense: expense, showExpenseForm: true});
  }

  handleExpenseCancel = () => {
-    this.setState({ showExpenseForm: false });
+    this.setState({showExpenseForm: false});
  }

  onExpenseNew() {
@ -156,8 +156,8 @@ class App extends Component {
        date: `${now.getFullYear()}-${now.getMonth() < 9
          ? "0" + (now.getMonth() + 1)
          : now.getMonth() + 1}-${now.getDate() < 10
-          ? "0" + now.getDate()
-          : now.getDate()}`,
+            ? "0" + now.getDate()
+            : now.getDate()}`,
        category: this.state.categories[0],
        account: this.state.accounts[0]
      }
@ -246,7 +246,7 @@ class App extends Component {
        <header className="mdc-toolbar mdc-toolbar--fixed">
          <div className="mdc-toolbar__row">
            <section className="mdc-toolbar__section mdc-toolbar__section--align-start">
-              <span className="mdc-toolbar__title">Expenses</span>
+              <span className="mdc-toolbar__title">Haushaltsrechner</span>
            </section>
            <section
              className="mdc-toolbar__section mdc-toolbar__section--align-end"
@ -347,13 +347,13 @@ class App extends Component {
        <div>
          <div className="mdc-card">
            <section className="mdc-card__primary">
-              <h2 className="mdc-card__subtitle">This month you've spent:</h2>
+              <h2 className="mdc-card__subtitle">Ausgaben dieses Monat:</h2>
              <h1 className="mdc-card__title mdc-card__title--large center">
                {this.state.currentMonth}
              </h1>
            </section>
            <section className="mdc-card__supporting-text">
-              Previous month: {this.state.previousMonth}
+              Vorheriges Monat: {this.state.previousMonth}
            </section>
          </div>
          <ExpenseList
--- a/src/components/expense-form/ExpenseForm.js
+++ b/src/components/expense-form/ExpenseForm.js
@ -103,7 +103,7 @@ class ExpenseForm extends Component {
              min="0"
              required
            />
-            <label className="mdc-textfield__label">Amount</label>
+            <label className="mdc-textfield__label">Betrag</label>
          </div>
        </div>

@ -130,7 +130,7 @@ class ExpenseForm extends Component {
              onChange={this.handleInputChange}
              type="text"
            />
-            <label className="mdc-textfield__label">Description</label>
+            <label className="mdc-textfield__label">Notiz</label>
          </div>
        </div>

@ -144,7 +144,7 @@ class ExpenseForm extends Component {
              type="date"
              required
            />
-            <label className="mdc-textfield__label">Date</label>
+            <label className="mdc-textfield__label">Datum</label>
          </div>
        </div>

@ -166,7 +166,7 @@ class ExpenseForm extends Component {
          <input
            type="submit"
            className="mdc-button"
-            value={this.props.expense.id ? "Update" : "Add"}
+            value={this.props.expense.id ? "Updaten" : "Hinzufügen"}
            disabled={!this.state.isValid}
          />
          {this.props.expense.id &&
@ -174,13 +174,13 @@ class ExpenseForm extends Component {
              type="button"
              className="mdc-button"
              onClick={() => this.dialog.show()}
-              value="Delete"
+              value="Löschen"
            />}
          <input
            type="button"
            className="mdc-button"
            onClick={() => this.props.onCancel()}
-            value="Close"
+            value="Schliessen"
          />
        </div>
      </form>
--- a/src/components/expense-list/ExpenseDetail.js
+++ b/src/components/expense-list/ExpenseDetail.js
@ -1,10 +1,10 @@
-import React, { Component } from "react";
+import React, {Component} from "react";
 import ExpenseIcon from "./ExpenseIcon";

 export default class ExpenseDetail extends Component {
  formatDate(date) {
    const dateParts = date.split("-");
-    return `${dateParts[2]}/${dateParts[1]}/${dateParts[0]}`;
+    return `${dateParts[2]}.${dateParts[1]}.${dateParts[0]}`;
  }

  render() {
--- a/src/components/expense-list/ExpenseList.css
+++ b/src/components/expense-list/ExpenseList.css
@ -15,23 +15,20 @@
 .Lebensmittel {
  background: rgb(85, 178, 35);
 }
-.Restaurant {
-  background: rgb(242, 60, 0);
-}
 .Auto, .Transport, .Tanken {
-  background: rgb(166, 2, 221);
+  background: rgb(242, 60, 0);
 }
 .Hobbies {
-  background: rgb(38, 94, 4);
+  background: rgb(39, 70, 211);
 }
 .Kleidung, .Shopping, Drogerie {
  background: rgb(0, 183, 224);
 }
-.Übernachtung {
+.Übernachtung, .Restaurant {
  background: rgb(214, 214, 0);
 }
 .Gesundheit {
-  background: rgb(252, 169, 5);
+  background: rgb(242, 60, 0);
 }
 .Unterhaltung {
  background: rgb(245, 151, 29);