Add basic layout to coordinates plugin

#144
hajkmap · Sep 19, 2019 · 7e9c46f · 7e9c46f · jacobwod · Sep 23, 2019
1 parent 0f219c6
commit 7e9c46f
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 2 deletions.
diff --git a/new-client/src/plugins/coordinates/CoordinatesModel.js b/new-client/src/plugins/coordinates/CoordinatesModel.js
@@ -3,6 +3,7 @@ class CoordinatesModel {
   constructor(settings) {
     this.map = settings.map;
     this.app = settings.app;
+    this.options = settings.options;
     this.localObserver = settings.localObserver;
   }
 

diff --git a/new-client/src/plugins/coordinates/CoordinatesView.js b/new-client/src/plugins/coordinates/CoordinatesView.js
@@ -1,20 +1,81 @@
 import React from "react";
 import { withStyles } from "@material-ui/core/styles";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import Paper from "@material-ui/core/Paper";
+import Typography from "@material-ui/core/Typography";
 
 const styles = theme => ({
+  root: {
+    display: "flex",
+    flexGrow: 1,
+    flexWrap: "wrap"
+  },
   text: {
     "& .ol-mouse-position": {
       top: "unset",
       right: "unset",
       position: "unset"
     }
-  }
+  },
+  table: {}
 });
 
 class CoordinatesView extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.model = this.props.model;
+    this.app = this.props.app;
+    this.options = this.props.options;
+    this.localObserver = this.props.localObserver;
+
+    this.transformations = this.props.options.transformations;
+  }
+
+  renderProjections() {
+    return (
+      <>
+        {this.transformations.map((coordinates, i) => {
+          return (
+            <TableRow key={i}>
+              <TableCell>{coordinates.code}</TableCell>
+              <TableCell>
+                <Typography style={{ display: "block" }}>
+                  {coordinates.ytitle}:{" "}
+                </Typography>
+                <Typography style={{ display: "block" }}>
+                  {coordinates.xtitle}:{" "}
+                </Typography>
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </>
+    );
+  }
+
   render() {
     const { classes } = this.props;
-    return <div id="coordinatesContainer" className={classes.text}></div>;
+    //<span id="coordinatesContainer" className={classes.text}></span>
+    return (
+      <>
+        <Paper className={classes.root}>
+          <Table className={classes.table}>
+            <TableHead>
+              <TableRow>
+                <TableCell>Koordinatsystem</TableCell>
+                <TableCell>Koordinater</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>{this.renderProjections()}</TableBody>
+          </Table>
+        </Paper>
+        <span id="coordinatesContainer" className={classes.text}></span>
+      </>
+    );
   }
 }
 

diff --git a/new-client/src/plugins/coordinates/coordinates.js b/new-client/src/plugins/coordinates/coordinates.js
@@ -17,6 +17,7 @@ class Coordinates extends React.PureComponent {
     this.coordinatesModel = new CoordinatesModel({
       map: props.map,
       app: props.app,
+      options: props.options,
       observer: this.localObserver
     });
   }
@@ -40,6 +41,7 @@ class Coordinates extends React.PureComponent {
         <CoordinatesView
           app={this.props.app}
           map={this.props.map}
+          options={this.props.options}
           model={this.coordinatesModel}
           observer={this.localObserver}
         />