Merge pull request #60 from Flux-Coordinator/feature/small-ui-cleanup

Feature/small ui cleanup
Flux-Coordinator · Jun 14, 2018 · 67ede9c · 67ede9c
2 parents fbf5fe2 + ad4b9ed
commit 67ede9c
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 88 deletions.
diff --git a/README.md b/README.md
@@ -1,29 +1,43 @@
 # Flux-Frontend
 
 <div align="center">
-  
-  [![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)
+
 </div>
 
-## Ordnerstruktur
+## How 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 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 = <sever_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).
diff --git 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<Props> {
 	render() {
 		return (
 			<Article pad="medium">
-				<Header justify="between">
-					<Heading tag="h2" margin="none" pad="medium">
-						{this.props.heading}
-					</Heading>
-				</Header>
+				<Heading tag="h2" margin="none" pad="medium">
+					{this.props.heading}
+				</Heading>
+				<Paragraph margin="none">{this.props.subheading}</Paragraph>
 				<Box>{this.props.children}</Box>
 			</Article>
 		);

diff --git 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";
@@ -30,24 +29,22 @@ export default function Project({ projects, match, onDeleteRoom }: Props) {
 	}
 
 	return (
-		<ContentBox heading={project.name}>
-			<Box>
-				<ItemListHeader
-					header="Räume"
-					path={`/projects/${match.params.projectId}/editRoom`}
-				/>
-				<ItemsList
-					items={project.rooms}
-					keyFunc={item => item.roomId}
-					ItemRenderer={({ item }) => (
-						<AnchorRoomItemRenderer
-							item={item}
-							match={match}
-							onDelete={onDeleteRoom}
-						/>
-					)}
-				/>
-			</Box>
+		<ContentBox heading={project.name} subheading={project.description}>
+			<ItemListHeader
+				header="Räume"
+				path={`/projects/${match.params.projectId}/editRoom`}
+			/>
+			<ItemsList
+				items={project.rooms}
+				keyFunc={item => item.roomId}
+				ItemRenderer={({ item }) => (
+					<AnchorRoomItemRenderer
+						item={item}
+						match={match}
+						onDelete={onDeleteRoom}
+					/>
+				)}
+			/>
 		</ContentBox>
 	);
 }
diff --git a/src/components/projects/Projects.jsx b/src/components/projects/Projects.jsx
@@ -1,8 +1,5 @@
 // @flow
 import * as React from "react";
-import Header from "grommet/components/Header";
-import Title from "grommet/components/Title";
-import Section from "grommet/components/Section";
 
 import ContentBox from "../contentBox/ContentBox";
 import ItemsList from "./../list/ItemsList";
@@ -28,25 +25,15 @@ export default class Projects extends React.Component<Props, State> {
 		const { projects, loading, onDeleteProject } = this.props;
 		return (
 			<ContentBox heading="Projekte">
-				<Section>
-					<Header size="small">
-						<Title>Alle Projekte</Title>
-					</Header>
-				</Section>
-				<Section>
-					<ItemListHeader header="Projekte" path="/editProject" />
-					<ItemsList
-						items={projects}
-						keyFunc={project => project.projectId}
-						loading={loading}
-						ItemRenderer={({ item }) => (
-							<AnchorProjectItemRenderer
-								onDelete={onDeleteProject}
-								item={item}
-							/>
-						)}
-					/>
-				</Section>
+				<ItemListHeader header="Projekte" path="/editProject" />
+				<ItemsList
+					items={projects}
+					keyFunc={project => project.projectId}
+					loading={loading}
+					ItemRenderer={({ item }) => (
+						<AnchorProjectItemRenderer onDelete={onDeleteProject} item={item} />
+					)}
+				/>
 			</ContentBox>
 		);
 	}

diff --git 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 (
-		<Article
-			pad={{ horizontal: "medium", vertical: "medium", between: "medium" }}
-		>
-			<Section pad="none">
-				<Heading tag="h2" margin="none" pad="medium">
-					{room.name}
-				</Heading>
-				<Paragraph margin="none">{room.description}</Paragraph>
-			</Section>
+		<ContentBox heading={room.name} subheading={room.description}>
 			<Route
 				path={`${match.url}/measurements/:measurementId`}
 				component={({ match }) => (
@@ -54,7 +44,7 @@ export default function Room({ match, room, onDeleteMeasurement }: Props) {
 					)}
 				/>
 			</Section>
-		</Article>
+		</ContentBox>
 	);
 }
 

diff --git 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 (
 			<WizardStep
 				heading="Schritt 3: Wählen Sie die Messungen aus"
+				subheading={this.subheading}
 				onSubmit={onSubmit}
 				isLastStep
 			>

diff --git 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<StepProps, State> {
 		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<StepProps, State> {
 		return (
 			<WizardStep
 				heading="Schritt 2: Wählen Sie die Räume aus"
+				subheading={this.subheading}
 				onSubmit={onSubmit}
 			>
 				{projects &&