Fix/954 fme server additions

new-admin/src/views/tools/fmeServer.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Component } from "react";
 import { hfetch } from "utils/FetchWrapper";
+import { SketchPicker } from "react-color";
 import Button from "@material-ui/core/Button";
 import Grid from "@material-ui/core/Grid";
 import IconButton from "@material-ui/core/IconButton";
@@ -72,8 +73,35 @@ const defaultState = {
   newGroupError: false,
   loading: true,
   loadingError: false,
+  drawFillColor: "rgba(255,255,255,0.07)",
+  drawStrokeColor: "rgba(74,74,74,0.5)",
+  groupDisplayName: "Grupp",
 };
 
+class RGBA {
+  static toString(o) {
+    return `rgba(${o.r},${o.g},${o.b},${o.a})`;
+  }
+
+  static parse(s) {
+    try {
+      // 1. RegEx that matches stuff between a set of parentheses
+      // 2. Execute that regex on the input string, but first remove any whitespace it may contain
+      // 3. RegEx exec returns an array. Grab the second element, which will contain the value.
+      // 4. Split the value to extract individual rgba values
+      const o = /\(([^)]+)\)/.exec(s.replace(/\s/g, ""))[1].split(",");
+      return {
+        r: o[0],
+        g: o[1],
+        b: o[2],
+        a: o[3],
+      };
+    } catch (error) {
+      console.error("RGBA parsing failed: " + error.message);
+    }
+  }
+}
+
 class ToolOptions extends Component {
   constructor(props) {
     super(props);
@@ -125,6 +153,11 @@ class ToolOptions extends Component {
         loading: false,
         // If we fail to fetch repositories, we for sure have a loading error.
         loadingError: availableRepositories.length === 0,
+        drawFillColor: tool.options.drawFillColor || this.state.drawFillColor,
+        drawStrokeColor:
+          tool.options.drawStrokeColor || this.state.drawStrokeColor,
+        groupDisplayName:
+          tool.options.groupDisplayName || this.state.groupDisplayName,
       });
     } else {
       this.setState({
@@ -224,6 +257,10 @@ class ToolOptions extends Component {
     });
   }
 
+  handleColorChange = (target, color) => {
+    this.setState({ [target]: RGBA.toString(color.rgb) });
+  };
+
   getTool() {
     return this.props.model
       .get("toolConfig")
@@ -269,7 +306,10 @@ class ToolOptions extends Component {
           Function.prototype.call,
           String.prototype.trim
         ),
+        drawFillColor: this.state.drawFillColor,
+        drawStrokeColor: this.state.drawStrokeColor,
         productGroups: this.state.productGroups,
+        groupDisplayName: this.state.groupDisplayName,
         products: this.state.products,
       },
     };
@@ -1054,6 +1094,40 @@ class ToolOptions extends Component {
               value={this.state.description}
             />
           </div>
+          <div className="separator">
+            Inställningar för selektering i kartan
+          </div>
+          <span
+            className="pull-left"
+            style={{ marginLeft: "10px", marginRight: "20px" }}
+          >
+            <div>
+              <div>
+                <label className="long-label" htmlFor="drawFillColor">
+                  Fyllnadsfärg
+                </label>
+              </div>
+              <SketchPicker
+                color={RGBA.parse(this.state.drawFillColor)}
+                onChangeComplete={(color) =>
+                  this.handleColorChange("drawFillColor", color)
+                }
+              />
+            </div>
+          </span>
+          <div>
+            <div>
+              <label className="long-label" htmlFor="drawStrokeColor">
+                Ramfärg
+              </label>
+            </div>
+            <SketchPicker
+              color={RGBA.parse(this.state.drawStrokeColor)}
+              onChangeComplete={(color) =>
+                this.handleColorChange("drawStrokeColor", color)
+              }
+            />
+          </div>
           <div className="separator">Övriga inställningar</div>
           <div>
             <input
@@ -1089,6 +1163,26 @@ class ToolOptions extends Component {
           </div>
           <div>{this.renderVisibleForGroups()}</div>
           <div className="separator">Grupper</div>
+          <div>
+            <label htmlFor="groupDisplayName">
+              Visningsnamn för "Grupp"{" "}
+              <i
+                className="fa fa-question-circle"
+                data-toggle="tooltip"
+                title="Grupp-etikett, exemepelvis Produktkategori. Om ej anjett visas 'Grupp'."
+              />
+            </label>
+            <input
+              type="text"
+              id="groupDisplayName"
+              name="groupDisplayName"
+              className="control-fixed-width"
+              onChange={(e) => {
+                this.handleInputChange(e);
+              }}
+              value={this.state.groupDisplayName}
+            />
+          </div>
           <Grid container item xs={12}>
             <Grid item xs={12}>
               <p>

new-client/src/plugins/FmeServer/FmeServer.js

@@ -19,6 +19,7 @@ const FmeServer = (props) => {
   const mapViewModel = new MapViewModel({
     localObserver: localObserver,
     map: props.map,
+    options: props.options,
   });
 
   // A model used to interact with the FME-server instance etc. We want to

new-client/src/plugins/FmeServer/FmeServerView.js

@@ -1,7 +1,9 @@
 import React from "react";
-import { Button, Grid, Typography } from "@material-ui/core";
+import { Button, Grid, TextField, Typography } from "@material-ui/core";
 import { Select, FormControl, InputLabel, MenuItem } from "@material-ui/core";
 import { Step, StepContent, StepLabel, Stepper } from "@material-ui/core";
+import { IconButton, InputAdornment, Tooltip } from "@material-ui/core";
+import HelpIcon from "@material-ui/icons/Help";
 import { LinearProgress } from "@material-ui/core";
 import { useSnackbar } from "notistack";
 
@@ -25,6 +27,9 @@ const FmeServerView = (props) => {
   const { localObserver } = props;
   // We're also gonna be needing the model
   const { model } = props;
+  // The user might want to decorate the "group" label with something
+  // else. Let's grab the potential value from the plugin-options.
+  const groupDisplayName = props.options.groupDisplayName || "Grupp";
   // We're gonna need some state, e.g. which step are we on,
   // or which product-group the user has selected and so on.
   const [activeStep, setActiveStep] = React.useState(0);
@@ -68,7 +73,10 @@ const FmeServerView = (props) => {
   // Let's create an object with all the steps to be rendered. This
   // will allow us to add another step in a simple manner.
   const steps = [
-    { label: "Välj grupp", renderFunction: renderChooseGroupStep },
+    {
+      label: `Välj ${groupDisplayName.toLowerCase()}`,
+      renderFunction: renderChooseGroupStep,
+    },
     { label: "Välj produkt", renderFunction: renderChooseProductStep },
     { label: "Välj omfattning", renderFunction: renderDrawGeometryStep },
     { label: "Fyll i parametrar", renderFunction: renderEnterParametersStep },
@@ -571,12 +579,14 @@ const FmeServerView = (props) => {
         {groupsToRender.length > 0 ? (
           <Grid item xs={12}>
             <FormControl fullWidth>
-              <InputLabel id="fme-server-select-group-label">Grupp</InputLabel>
+              <InputLabel id="fme-server-select-group-label">
+                {groupDisplayName}
+              </InputLabel>
               <Select
                 labelId="fme-server-select-group-label"
                 id="fme-server-select-group"
                 value={activeGroup}
-                label="Grupp"
+                label={groupDisplayName}
                 onChange={(e) => setActiveGroup(e.target.value)}
               >
                 {groupsToRender.map((group, index) => {
@@ -608,20 +618,44 @@ const FmeServerView = (props) => {
     // We only want to render the products that belong to the active group,
     // so letch get those.
     const productsInActiveGroup = getProductsInActiveGroup();
+    // We might want to display an icon which refers the user to the product
+    // information page. However, it's not certain that a valid url exists for
+    // the product, and if it doesn't we're not supposed to render the icon.
+    // Let's grab the potential url:
+    const product = model.getProduct(activeGroup, activeProduct);
+    const infoUrl = product?.infoUrl || "";
+    // Then we render!
     return (
       <Grid container item xs={12}>
         {productsInActiveGroup.length > 0 ? (
           <Grid item xs={12}>
             <FormControl fullWidth>
-              <InputLabel id="fme-server-select-product-label">
-                Produkt
-              </InputLabel>
-              <Select
-                labelId="fme-server-select-product-label"
+              <TextField
+                select
                 id="fme-server-select-product"
                 value={activeProduct}
                 label="Produkt"
                 onChange={(e) => setActiveProduct(e.target.value)}
+                InputProps={
+                  infoUrl.length > 0
+                    ? {
+                        startAdornment: (
+                          <Tooltip title="Öppna länk till produktinformation.">
+                            <InputAdornment position="start">
+                              <IconButton
+                                aria-label="Open information page"
+                                href={infoUrl}
+                                target="_blank"
+                                edge="start"
+                              >
+                                <HelpIcon />
+                              </IconButton>
+                            </InputAdornment>
+                          </Tooltip>
+                        ),
+                      }
+                    : null
+                }
               >
                 {productsInActiveGroup.map((product, index) => {
                   return (
@@ -630,7 +664,7 @@ const FmeServerView = (props) => {
                     </MenuItem>
                   );
                 })}
-              </Select>
+              </TextField>
             </FormControl>
           </Grid>
         ) : (

new-client/src/plugins/FmeServer/models/MapViewModel.js

@@ -11,6 +11,7 @@ import { handleClick } from "../../../models/Click";
 class MapViewModel {
   #map;
   #localObserver;
+  #options;
   #drawStyleSettings;
   #draw;
   #drawSource;
@@ -24,6 +25,7 @@ class MapViewModel {
   constructor(settings) {
     this.#map = settings.map;
     this.#localObserver = settings.localObserver;
+    this.#options = settings.options;
     this.#draw = null;
     this.#drawTooltipElement = null;
     this.#drawTooltip = null;
@@ -130,8 +132,8 @@ class MapViewModel {
 
   // Returns the style settings used in the OL-style.
   #getDrawStyleSettings = () => {
-    const strokeColor = "rgba(74,74,74,0.5)";
-    const fillColor = "rgba(255,255,255,0.07)";
+    const strokeColor = this.#options.drawStrokeColor || "rgba(74,74,74,0.5)";
+    const fillColor = this.#options.drawFillColor || "rgba(255,255,255,0.07)";
     return { strokeColor: strokeColor, fillColor: fillColor };
   };