Mawas
/
Expenses
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

localization in progress

master
Bernd-René Predota 4 years ago
parent
76c4fdb6f7
commit
121c5526b3
10 changed files with 40 additions and 43 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      public/android-chrome-192x192.png
  2. BIN
      public/android-chrome-512x512.png
  3. BIN
      public/apple-touch-icon.png
  4. 6
      public/index.html
  5. 8
      public/manifest.json
  6. 2
      src/App.css
  7. 40
      src/App.js
  8. 12
      src/components/expense-form/ExpenseForm.js
  9. 4
      src/components/expense-list/ExpenseDetail.js
  10. 11
      src/components/expense-list/ExpenseList.css

BIN
public/android-chrome-192x192.png
View File

Side by Side Swipe Overlay

Before

Width: 192  |  Height: 192  |  Size: 1.0 KiB

After

Width: 192  |  Height: 192  |  Size: 3.2 KiB

BIN
public/android-chrome-512x512.png
View File

Side by Side Swipe Overlay

Before

Width: 512  |  Height: 512  |  Size: 3.6 KiB

After

Width: 512  |  Height: 512  |  Size: 6.6 KiB

BIN
public/apple-touch-icon.png
View File

Side by Side Swipe Overlay

Before

Width: 180  |  Height: 180  |  Size: 1.1 KiB

After

Width: 180  |  Height: 180  |  Size: 3.3 KiB

6
public/index.html
View File

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en">
<html lang="de">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
@ -13,10 +13,10 @@
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#5bbad5"> <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> <script src="https://apis.google.com/js/api.js"></script>
<title>Expenses</title>
<title>Haushaltsbuch</title>
</head> </head>
<body> <body>

8
public/manifest.json
View File

@ -1,6 +1,6 @@
{ {
"short_name": "Expenses",
"name": "Expense Manager",
"short_name": "Haushaltsbuch",
"name": "Haushaltsbuch",
"icons": [ "icons": [
{ {
"src": "/android-chrome-192x192.png", "src": "/android-chrome-192x192.png",
@ -13,8 +13,8 @@
"type": "image/png" "type": "image/png"
} }
], ],
"theme_color": "#50d29d",
"background_color": "#50d29d",
"theme_color": "#55b223",
"background_color": "#55b223",
"display": "standalone", "display": "standalone",
"start_url": "." "start_url": "."
} }

2
src/App.css
View File

@ -5,7 +5,7 @@
} }
header.mdc-toolbar { header.mdc-toolbar {
background-color: #50d29d;
background-color: #55b223;
} }
button.mdc-toolbar__icon { button.mdc-toolbar__icon {
display: inline-block; display: inline-block;

40
src/App.js
View File

@ -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/fab/dist/mdc.fab.css";
import "@material/button/dist/mdc.button.css"; import "@material/button/dist/mdc.button.css";
@ -72,40 +72,40 @@ class App extends Component {
} }
signedInChanged = (signedIn) => { signedInChanged = (signedIn) => {
this.setState({ signedIn: signedIn });
this.setState({signedIn: signedIn});
if (this.state.signedIn) { if (this.state.signedIn) {
this.load(); this.load();
} }
} }
handleExpenseSubmit = () => { handleExpenseSubmit = () => {
this.setState({ processing: true, showExpenseForm: false });
this.setState({processing: true, showExpenseForm: false});
const submitAction = (this.state.expense.id const submitAction = (this.state.expense.id
? this.update ? this.update
: this.append).bind(this); : this.append).bind(this);
submitAction(this.state.expense).then( submitAction(this.state.expense).then(
response => { response => {
this.snackbar.show({ this.snackbar.show({
message: `Expense ${this.state.expense.id ? "updated" : "added"}!`
message: `Ausgabe ${this.state.expense.id ? "aktualisiert" : "hinzugefügt"}!`
}); });
this.load(); this.load();
}, },
response => { response => {
console.error("Something went wrong");
console.error("Ausgabe konnte nicht gespeichert werden!");
console.error(response); console.error(response);
this.setState({ loading: false });
this.setState({loading: false});
} }
); );
} }
handleExpenseChange = (attribute, value) => { handleExpenseChange = (attribute, value) => {
this.setState({ this.setState({
expense: Object.assign({}, this.state.expense, { [attribute]: value })
expense: Object.assign({}, this.state.expense, {[attribute]: value})
}); });
} }
handleExpenseDelete = (expense) => { handleExpenseDelete = (expense) => {
this.setState({ processing: true, showExpenseForm: false });
this.setState({processing: true, showExpenseForm: false});
const expenseRow = expense.id.substring(10); const expenseRow = expense.id.substring(10);
window.gapi.client.sheets.spreadsheets window.gapi.client.sheets.spreadsheets
.batchUpdate({ .batchUpdate({
@ -127,23 +127,23 @@ class App extends Component {
}) })
.then( .then(
response => { response => {
this.snackbar.show({ message: "Expense deleted!" });
this.snackbar.show({message: "Ausgabe entfernt!"});
this.load(); this.load();
}, },
response => { response => {
console.error("Something went wrong");
console.error("Ausgabe konnte nicht entfernt werden!");
console.error(response); console.error(response);
this.setState({ loading: false });
this.setState({loading: false});
} }
); );
} }
handleExpenseSelect = (expense) => { handleExpenseSelect = (expense) => {
this.setState({ expense: expense, showExpenseForm: true });
this.setState({expense: expense, showExpenseForm: true});
} }
handleExpenseCancel = () => { handleExpenseCancel = () => {
this.setState({ showExpenseForm: false });
this.setState({showExpenseForm: false});
} }
onExpenseNew() { onExpenseNew() {
@ -156,8 +156,8 @@ class App extends Component {
date: `${now.getFullYear()}-${now.getMonth() < 9 date: `${now.getFullYear()}-${now.getMonth() < 9
? "0" + (now.getMonth() + 1) ? "0" + (now.getMonth() + 1)
: now.getMonth() + 1}-${now.getDate() < 10 : now.getMonth() + 1}-${now.getDate() < 10
? "0" + now.getDate()
: now.getDate()}`,
? "0" + now.getDate()
: now.getDate()}`,
category: this.state.categories[0], category: this.state.categories[0],
account: this.state.accounts[0] account: this.state.accounts[0]
} }
@ -246,7 +246,7 @@ class App extends Component {
<header className="mdc-toolbar mdc-toolbar--fixed"> <header className="mdc-toolbar mdc-toolbar--fixed">
<div className="mdc-toolbar__row"> <div className="mdc-toolbar__row">
<section className="mdc-toolbar__section mdc-toolbar__section--align-start"> <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>
<section <section
className="mdc-toolbar__section mdc-toolbar__section--align-end" className="mdc-toolbar__section mdc-toolbar__section--align-end"
@ -347,13 +347,13 @@ class App extends Component {
<div> <div>
<div className="mdc-card"> <div className="mdc-card">
<section className="mdc-card__primary"> <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"> <h1 className="mdc-card__title mdc-card__title--large center">
{this.state.currentMonth} {this.state.currentMonth}
</h1> </h1>
</section> </section>
<section className="mdc-card__supporting-text"> <section className="mdc-card__supporting-text">
Previous month: {this.state.previousMonth}
Vorheriges Monat: {this.state.previousMonth}
</section> </section>
</div> </div>
<ExpenseList <ExpenseList

12
src/components/expense-form/ExpenseForm.js
View File

@ -103,7 +103,7 @@ class ExpenseForm extends Component {
min="0" min="0"
required required
/> />
<label className="mdc-textfield__label">Amount</label>
<label className="mdc-textfield__label">Betrag</label>
</div> </div>
</div> </div>
@ -130,7 +130,7 @@ class ExpenseForm extends Component {
onChange={this.handleInputChange} onChange={this.handleInputChange}
type="text" type="text"
/> />
<label className="mdc-textfield__label">Description</label>
<label className="mdc-textfield__label">Notiz</label>
</div> </div>
</div> </div>
@ -144,7 +144,7 @@ class ExpenseForm extends Component {
type="date" type="date"
required required
/> />
<label className="mdc-textfield__label">Date</label>
<label className="mdc-textfield__label">Datum</label>
</div> </div>
</div> </div>
@ -166,7 +166,7 @@ class ExpenseForm extends Component {
<input <input
type="submit" type="submit"
className="mdc-button" className="mdc-button"
value={this.props.expense.id ? "Update" : "Add"}
value={this.props.expense.id ? "Updaten" : "Hinzufügen"}
disabled={!this.state.isValid} disabled={!this.state.isValid}
/> />
{this.props.expense.id && {this.props.expense.id &&
@ -174,13 +174,13 @@ class ExpenseForm extends Component {
type="button" type="button"
className="mdc-button" className="mdc-button"
onClick={() => this.dialog.show()} onClick={() => this.dialog.show()}
value="Delete"
value="Löschen"
/>} />}
<input <input
type="button" type="button"
className="mdc-button" className="mdc-button"
onClick={() => this.props.onCancel()} onClick={() => this.props.onCancel()}
value="Close"
value="Schliessen"
/> />
</div> </div>
</form> </form>

4
src/components/expense-list/ExpenseDetail.js
View File

@ -1,10 +1,10 @@
import React, { Component } from "react";
import React, {Component} from "react";
import ExpenseIcon from "./ExpenseIcon"; import ExpenseIcon from "./ExpenseIcon";
export default class ExpenseDetail extends Component { export default class ExpenseDetail extends Component {
formatDate(date) { formatDate(date) {
const dateParts = date.split("-"); const dateParts = date.split("-");
return `${dateParts[2]}/${dateParts[1]}/${dateParts[0]}`;
return `${dateParts[2]}.${dateParts[1]}.${dateParts[0]}`;
} }
render() { render() {

11
src/components/expense-list/ExpenseList.css
View File

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

Write Preview
Loading…
Cancel
Save