From e481fbd78b13b28023ceaea33eb04c9d37a2ddbc Mon Sep 17 00:00:00 2001 From: Esteban Luchsinger Date: Tue, 12 Jun 2018 19:54:16 +0200 Subject: [PATCH 1/5] Cleanup headers --- src/components/contentBox/ContentBox.jsx | 12 ++++----- src/components/projects/Project.jsx | 2 +- src/components/projects/Projects.jsx | 31 +++++++----------------- 3 files changed, 16 insertions(+), 29 deletions(-) diff --git a/src/components/contentBox/ContentBox.jsx b/src/components/contentBox/ContentBox.jsx index 7a6e842..36a9c8f 100644 --- a/src/components/contentBox/ContentBox.jsx +++ b/src/components/contentBox/ContentBox.jsx @@ -1,13 +1,14 @@ // @flow import * as React from "react"; -import Header from "grommet/components/Header"; import Heading from "grommet/components/Heading"; +import Paragraph from "grommet/components/Paragraph"; import Article from "grommet/components/Article"; import Box from "grommet/components/Box"; import { withRouter } from "react-router"; type Props = { heading: React.Node, + subheading?: React.Node, children: React.Node, location: any }; @@ -16,11 +17,10 @@ class ContentBox extends React.Component { render() { return (
-
- - {this.props.heading} - -
+ + {this.props.heading} + + {this.props.subheading} {this.props.children}
); diff --git a/src/components/projects/Project.jsx b/src/components/projects/Project.jsx index a874e99..ef1500b 100644 --- a/src/components/projects/Project.jsx +++ b/src/components/projects/Project.jsx @@ -30,7 +30,7 @@ export default function Project({ projects, match, onDeleteRoom }: Props) { } return ( - + { const { projects, loading, onDeleteProject } = this.props; return ( -
-
- Alle Projekte -
-
-
- - project.projectId} - loading={loading} - ItemRenderer={({ item }) => ( - - )} - /> -
+ + project.projectId} + loading={loading} + ItemRenderer={({ item }) => ( + + )} + /> ); } From 4015f14ac80fe9af6901e8241136f548a538c412 Mon Sep 17 00:00:00 2001 From: Esteban Luchsinger Date: Thu, 14 Jun 2018 08:40:04 +0200 Subject: [PATCH 2/5] Simplified the layout of Project and Room views --- src/components/projects/Project.jsx | 33 +++++++++++++---------------- src/components/room/Room.jsx | 20 +++++------------ 2 files changed, 20 insertions(+), 33 deletions(-) diff --git a/src/components/projects/Project.jsx b/src/components/projects/Project.jsx index ef1500b..99d4ea9 100644 --- a/src/components/projects/Project.jsx +++ b/src/components/projects/Project.jsx @@ -1,6 +1,5 @@ // @flow import * as React from "react"; -import Box from "grommet/components/Box"; import NotFound from "../../components/notfound/NotFound"; import ContentBox from "../contentBox/ContentBox"; @@ -31,23 +30,21 @@ export default function Project({ projects, match, onDeleteRoom }: Props) { return ( - - - item.roomId} - ItemRenderer={({ item }) => ( - - )} - /> - + + item.roomId} + ItemRenderer={({ item }) => ( + + )} + /> ); } diff --git a/src/components/room/Room.jsx b/src/components/room/Room.jsx index cae68ce..1b51387 100644 --- a/src/components/room/Room.jsx +++ b/src/components/room/Room.jsx @@ -1,18 +1,16 @@ // @flow import * as React from "react"; -import Heading from "grommet/components/Heading"; import Section from "grommet/components/Section"; -import Article from "grommet/components/Article"; -import Paragraph from "grommet/components/Paragraph"; // eslint-disable-next-line import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; -import Measurement from "../../models/Measurement"; -import RoomModel from "../../models/Room"; +import ContentBox from "../contentBox/ContentBox"; import ItemsList from "../list/ItemsList"; import ItemListHeader from "./../list/ItemListHeader"; import MeasurementContainer from "../../containers/measurements/MeasurementContainer"; import AnchorMeasurementItemRenderer from "../measurements/AnchorMeasurementItemRenderer"; +import RoomModel from "../../models/Room"; +import Measurement from "../../models/Measurement"; type Props = { match: any, @@ -22,15 +20,7 @@ type Props = { export default function Room({ match, room, onDeleteMeasurement }: Props) { return ( -
-
- - {room.name} - - {room.description} -
+ ( @@ -54,7 +44,7 @@ export default function Room({ match, room, onDeleteMeasurement }: Props) { )} /> -
+ ); } From b614733b82bb742060c3d17ad9c56605d13761fb Mon Sep 17 00:00:00 2001 From: Esteban Luchsinger Date: Thu, 14 Jun 2018 08:44:54 +0200 Subject: [PATCH 3/5] Added the help-text for Room and Measurement export steps --- .../importexport/wizard/SelectMeasurementsStep.jsx | 4 ++++ src/containers/importexport/wizard/SelectRoomsStep.jsx | 7 +++---- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/containers/importexport/wizard/SelectMeasurementsStep.jsx b/src/containers/importexport/wizard/SelectMeasurementsStep.jsx index 215e961..8f724da 100644 --- a/src/containers/importexport/wizard/SelectMeasurementsStep.jsx +++ b/src/containers/importexport/wizard/SelectMeasurementsStep.jsx @@ -30,6 +30,9 @@ export default class SelectMeasurementsStep extends React.Component< projects: [] }; + subheading: string = + "Sie können mit CTRL + Mausclick mehrere Projekte auswählen."; + getMeasurementsOfRoom = ( data: Project[], projectId: ?number, @@ -122,6 +125,7 @@ export default class SelectMeasurementsStep extends React.Component< return ( diff --git a/src/containers/importexport/wizard/SelectRoomsStep.jsx b/src/containers/importexport/wizard/SelectRoomsStep.jsx index 3285d2c..3a3db89 100644 --- a/src/containers/importexport/wizard/SelectRoomsStep.jsx +++ b/src/containers/importexport/wizard/SelectRoomsStep.jsx @@ -24,10 +24,8 @@ export default class SelectRoomsStep extends React.Component { selectedProjects: [] }; - listItemProperties = { - margin: "small", - pad: "small" - }; + subheading: string = + "Sie können mit CTRL + Mausclick mehrere Projekte auswählen."; onSelect = (selected: ?number | number[], project: Project) => { const foundProject = this.props.projects.find( @@ -88,6 +86,7 @@ export default class SelectRoomsStep extends React.Component { return ( {projects && From f959af5f36f9937cffb0a338fea4aae80d11a3c5 Mon Sep 17 00:00:00 2001 From: Esteban Luchsinger Date: Thu, 14 Jun 2018 17:10:49 +0200 Subject: [PATCH 4/5] Update readme.md with instructions --- README.md | 38 ++++++++++++++++++++++++++------------ 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index e7feae6..f31821f 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # Flux-Frontend
- + [![Tested with Jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest) [![GitHub license](https://img.shields.io/github/license/Flux-Coordinator/flux-frontend.svg)](https://github.com/Flux-Coordinator/flux-frontend) [![Sonar Cloud Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=flux-frontend&metric=reliability_rating)](https://sonarcloud.io/api/project_badges/measure?project=flux-frontend&metric=reliability_rating) @@ -12,18 +12,32 @@ [![Dependencies](https://david-dm.org/Flux-Coordinator/flux-frontend.svg)](https://david-dm.org/Flux-Coordinator/flux-frontend) [![DevDependencies](https://david-dm.org/Flux-Coordinator/flux-frontend/dev-status.svg)](https://david-dm.org/Flux-Coordinator/flux-frontend?type=dev) [![peerDependency Status](https://david-dm.org/Flux-Coordinator/repo/peer-status.svg)](https://david-dm.org/Flux-Coordinator/flux-frontend?type=peer) - +
-## Ordnerstruktur +## How to run this application in development mode + +Follow the below guide to run this application in development mode. +**Prerequisites:** [NodeJS 8](https://nodejs.org/en/download/) and [Yarn](https://yarnpkg.com/en/docs/install) (recommended) or NPM. + +1. Download the repository +2. Install the dependencies using `yarn` or `npm install` +3. Run the application using the `yarn start` or the `npm run start` command. + +The URI for the connection to the [flux-server](https://github.com/Flux-Coordinator/flux-server) instance needs to be set either as an environment variable REACT_APP_SERVICE_URI or using a `.env` file, in which you have the following content: + +``` +REACT_APP_SERVICE_URI = +``` + +## Run in Production Mode + +To run this application in production mode, you need to build it first, using the `yarn build` or `npm run build` command. After the command has run through, you will find the built application in the _/build_ folder. You can deploy that folder on your preferred static webserver or using [serve](https://github.com/zeit/serve). + +To install serve globally, you can use the `yarn global add serve` or `npm install -g serve`. After the installation is complete, you can use the command `serve -s build`, where build the _/build_ folder. + +If you use a webserver other than serve, you will need to make some changes. Follow the guide [here](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-apps-with-client-side-routing). -Die Ordnerstruktur im **./src** Ordner sieht wie folgt aus: +## More informations -| Ordner | Beschreibung | -| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| src/api | Die JS Dateien in diesem Ordner stellen die Anfragen an das backend API. | -| src/components | In diesem Ordner befinden sich die Presentational Components. Merke, dass die CSS und Tests ebenfalls in diesem Ordner zusammen mit ihren Components befinden. | -| src/containers | In diesem Ordner befinden sich die Container Components. Diese machen die API Calls und besitzen einen State. Merke, dass die CSS und Tests ebenfalls in diesem Ordner zusammen mit ihren Components befinden. | -| src/images | Hier befinden sich die Bilder, die in der Anwendung verwendet werden. | -| src/index.jsx | In dieser Datei wird die App initialisiert. | -| src/utils | Alles, was sonst nicht eingeordnet werden kann und keinen eigenen Ordner verdient. | +For more information about running and deploying the application, you can consult the CRA documentation [here](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md). From ad4b9edc73c1ed389f9ba2e9655d40bcd308224b Mon Sep 17 00:00:00 2001 From: Esteban Luchsinger Date: Thu, 14 Jun 2018 17:25:37 +0200 Subject: [PATCH 5/5] Updated readme --- README.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index f31821f..576f88e 100644 --- a/README.md +++ b/README.md @@ -2,29 +2,29 @@
- [![Tested with Jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest) - [![GitHub license](https://img.shields.io/github/license/Flux-Coordinator/flux-frontend.svg)](https://github.com/Flux-Coordinator/flux-frontend) - [![Sonar Cloud Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=flux-frontend&metric=reliability_rating)](https://sonarcloud.io/api/project_badges/measure?project=flux-frontend&metric=reliability_rating) - [![Sonar Cloud Coverage](https://sonarcloud.io/api/project_badges/measure?project=flux-frontend&metric=coverage)](https://sonarcloud.io/api/project_badges/measure?project=flux-frontend&metric=coverage) - [![Sonar Cloud Quality Gate](https://sonarcloud.io/api/project_badges/measure?project=flux-frontend&metric=alert_status)](https://sonarcloud.io/api/project_badges/measure?project=flux-frontend&metric=alert_status) - [![Build Status](https://travis-ci.org/Flux-Coordinator/flux-frontend.svg?branch=master)](https://travis-ci.org/Flux-Coordinator/flux-frontend) - [![Code Style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) - [![Dependencies](https://david-dm.org/Flux-Coordinator/flux-frontend.svg)](https://david-dm.org/Flux-Coordinator/flux-frontend) - [![DevDependencies](https://david-dm.org/Flux-Coordinator/flux-frontend/dev-status.svg)](https://david-dm.org/Flux-Coordinator/flux-frontend?type=dev) - [![peerDependency Status](https://david-dm.org/Flux-Coordinator/repo/peer-status.svg)](https://david-dm.org/Flux-Coordinator/flux-frontend?type=peer) +[![Tested with Jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest) +[![GitHub license](https://img.shields.io/github/license/Flux-Coordinator/flux-frontend.svg)](https://github.com/Flux-Coordinator/flux-frontend) +[![Sonar Cloud Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=flux-frontend&metric=reliability_rating)](https://sonarcloud.io/api/project_badges/measure?project=flux-frontend&metric=reliability_rating) +[![Sonar Cloud Coverage](https://sonarcloud.io/api/project_badges/measure?project=flux-frontend&metric=coverage)](https://sonarcloud.io/api/project_badges/measure?project=flux-frontend&metric=coverage) +[![Sonar Cloud Quality Gate](https://sonarcloud.io/api/project_badges/measure?project=flux-frontend&metric=alert_status)](https://sonarcloud.io/api/project_badges/measure?project=flux-frontend&metric=alert_status) +[![Build Status](https://travis-ci.org/Flux-Coordinator/flux-frontend.svg?branch=master)](https://travis-ci.org/Flux-Coordinator/flux-frontend) +[![Code Style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) +[![Dependencies](https://david-dm.org/Flux-Coordinator/flux-frontend.svg)](https://david-dm.org/Flux-Coordinator/flux-frontend) +[![DevDependencies](https://david-dm.org/Flux-Coordinator/flux-frontend/dev-status.svg)](https://david-dm.org/Flux-Coordinator/flux-frontend?type=dev) +[![peerDependency Status](https://david-dm.org/Flux-Coordinator/repo/peer-status.svg)](https://david-dm.org/Flux-Coordinator/flux-frontend?type=peer)
## How to run this application in development mode -Follow the below guide to run this application in development mode. +Follow the guide below to run this application in development mode. **Prerequisites:** [NodeJS 8](https://nodejs.org/en/download/) and [Yarn](https://yarnpkg.com/en/docs/install) (recommended) or NPM. 1. Download the repository 2. Install the dependencies using `yarn` or `npm install` 3. Run the application using the `yarn start` or the `npm run start` command. -The URI for the connection to the [flux-server](https://github.com/Flux-Coordinator/flux-server) instance needs to be set either as an environment variable REACT_APP_SERVICE_URI or using a `.env` file, in which you have the following content: +The URI for the connection to the [flux-server](https://github.com/Flux-Coordinator/flux-server) instance needs to be set either as an environment variable named `REACT_APP_SERVICE_URI` or using a [_.env_](https://github.com/motdotla/dotenv) file, in which you have the following content: ``` REACT_APP_SERVICE_URI =