Merge remote-tracking branch 'origin/main'

# Conflicts:
#	typescript/Frontend/src/components/Context/S3CredentialsContextProvider.tsx

csharp/App/SaliMax/HostList.sh

@@ -0,0 +1,6 @@
+
+Prototype         ie-entwicklung@10.2.3.115
+Salimax001        ie-entwicklung@10.2.3.104
+Salimax002        ie-entwicklung@10.2.4.29
+Salimax003        ie-entwicklung@10.2.4.33
+Salimax004        ie-entwicklung@10.2.4.32

csharp/App/SaliMax/deploy.sh

@@ -1,7 +1,7 @@
 #!/bin/bash
 
 dotnet_version='net6.0'
-salimax_ip='10.2.4.29'
+salimax_ip="$1"
 username='ie-entwicklung'
 
 set -e
@@ -20,15 +20,3 @@ rsync -v \
       ./bin/Release/$dotnet_version/linux-x64/publish/* \
        $username@$salimax_ip:~/salimax
     
-echo -e "\n============================ Restart Salimax sevice ============================\n" 
-
-ssh -tt \
-    $username@$salimax_ip \
-    sudo systemctl restart salimax.service 
-
-
-echo -e "\n============================ Print service output ============================\n" 
-
-ssh -tt \
-    $username@$salimax_ip \
-    journalctl -f -u salimax.service 

csharp/App/SaliMax/run (Salimax 0001).sh

@@ -1,34 +0,0 @@
-#!/bin/bash
-
-dotnet_version='net6.0'
-salimax_ip='10.2.3.104'
-username='ie-entwicklung'
-
-set -e
-
-echo -e "\n============================ Build ============================\n" 
-
-dotnet publish  \
-       ./SaliMax.csproj \
-       -p:PublishTrimmed=false \
-       -c Release \
-       -r linux-x64 
-
-echo -e "\n============================ Deploy ============================\n" 
-
-rsync -v \
-      ./bin/Release/$dotnet_version/linux-x64/publish/* \
-       $username@$salimax_ip:~/salimax
-    
-echo -e "\n============================ Restart Salimax sevice ============================\n" 
-
-ssh -tt \
-    $username@$salimax_ip \
-    sudo systemctl restart salimax.service 
-
-
-echo -e "\n============================ Print service output ============================\n" 
-
-ssh -tt \
-    $username@$salimax_ip \
-    journalctl -f -u salimax.service 

csharp/App/SaliMax/run (Salimax0003).sh

@@ -1,34 +0,0 @@
-#!/bin/bash
-
-dotnet_version='net6.0'
-salimax_ip='10.2.4.33'
-username='ie-entwicklung'
-
-set -e
-
-echo -e "\n============================ Build ============================\n" 
-
-dotnet publish  \
-       ./SaliMax.csproj \
-       -p:PublishTrimmed=false \
-       -c Release \
-       -r linux-x64 
-
-echo -e "\n============================ Deploy ============================\n" 
-
-rsync -v \
-      ./bin/Release/$dotnet_version/linux-x64/publish/* \
-       $username@$salimax_ip:~/salimax
-    
-echo -e "\n============================ Restart Salimax sevice ============================\n" 
-
-ssh -tt \
-    $username@$salimax_ip \
-    sudo systemctl restart salimax.service 
-
-
-echo -e "\n============================ Print service output ============================\n" 
-
-ssh -tt \
-    $username@$salimax_ip \
-    journalctl -f -u salimax.service 

csharp/App/SaliMax/run (SalimnaxProto Meiringen).sh

@@ -1,34 +0,0 @@
-#!/bin/bash
-
-dotnet_version='net6.0'
-salimax_ip='10.2.3.115'
-username='ie-entwicklung'
-
-set -e
-
-echo -e "\n============================ Build ============================\n" 
-
-dotnet publish  \
-       ./SaliMax.csproj \
-       -p:PublishTrimmed=false \
-       -c Release \
-       -r linux-x64
-
-echo -e "\n============================ Deploy ============================\n" 
-
-rsync -v \
-      ./bin/Release/$dotnet_version/linux-x64/publish/* \
-       $username@$salimax_ip:~/salimax
-    
-echo -e "\n============================ Restart Salimax sevice ============================\n" 
-
-ssh -tt \
-    $username@$salimax_ip \
-    sudo systemctl restart salimax.service 
-
-
-echo -e "\n============================ Print service output ============================\n" 
-
-ssh -tt \
-    $username@$salimax_ip \
-    journalctl -f -u salimax.service 

csharp/App/SaliMax/src/SystemConfig/Config.cs

@@ -14,34 +14,47 @@ public class Config //TODO: let IE choose from config files (Json) and connect t
 
     private static readonly JsonSerializerOptions JsonOptions = new() { WriteIndented = true };
 
-    public required Double       MinSoc                    { get; set; } 
+    public required Double       MinSoc                      { get; set; } 
-    public required UnixTime     LastEoc                   { get; set; } 
+    public required UnixTime     LastEoc                     { get; set; } 
-    public required Double       PConstant                 { get; set; } 
+    public required Double       PConstant                   { get; set; } 
-    public required Double       GridSetPoint              { get; set; } 
+    public required Double       GridSetPoint                { get; set; } 
-    public required Double       BatterySelfDischargePower { get; set; } 
+    public required Double       BatterySelfDischargePower   { get; set; } 
-    public required Double       HoldSocZone               { get; set; } 
+    public required Double       HoldSocZone                 { get; set; } 
 
-    public required Double       MaxDcBusVoltage           { get; set; }
+    public required Double       MaxDcLinkVoltageFromAcDc             { get; set; }
-    public required Double       MinDcBusVoltage           { get; set; }
+    public required Double       MinDcLinkVoltageFromAcDc             { get; set; }
-    public required Double       ReferenceDcBusVoltage     { get; set; }
+    public required Double       ReferenceDcLinkVoltageFromAcDc       { get; set; }
     
-    public required DeviceConfig Devices                   { get; set; }
+    public required Double       LowerDcLinkVoltageFromDc     { get; set; }
-    public required S3Config?    S3                        { get; set; }
+    public required Double       ReferenceDcLinkVoltageFromDc { get; set; } 
+    public required Double       UpperDcLinkVoltageFromDc     { get; set; }
+
+    public required Double       MaxBatteryChargingCurrent    { get; set; } 
+    public required Double       MaxBatteryDischargingCurrent { get; set; }
+    
+    public required Double       MaxChargeBatteryVoltage      { get; set; }
+    public required Double       MinDischargeBatteryVoltage   { get; set; }
+    
+    public required DeviceConfig Devices                      { get; set; }
+    public required S3Config?    S3                           { get; set; }
 
     
     
     #if DEBUG 
     public static Config Default => new()
     {
-        MinSoc                    = 20,
+        MinSoc                      = 20,
-        LastEoc                   = UnixTime.Epoch,  // TODO: remove, use new LastEoc feature from BMS 
+        LastEoc                     = UnixTime.Epoch,  // TODO: remove, use new LastEoc feature from BMS 
-        PConstant                 = .5,
+        PConstant                   = .5,
-        GridSetPoint              = 0,
+        GridSetPoint                = 0,
-        BatterySelfDischargePower = 200,  
+        BatterySelfDischargePower   = 200,  
-        HoldSocZone               = 1,   // TODO: find better name,
+        HoldSocZone                 = 1,   // TODO: find better name,
-        MinDcBusVoltage           = 690,
+        MinDcBusVoltage             = 690,
-        ReferenceDcBusVoltage     = 750,
+        ReferenceDcBusVoltage       = 750,
-        MaxDcBusVoltage           = 810,
+        MaxDcBusVoltage             = 810,
+        LowerDcBusVoltageWindow     = 50,
+        ReferenceDcBusVoltageWindow = 750,
+        UpperDcBusVoltageWindow     = 50,
         Devices                   = new ()
         {
             TruConvertAcIp       = new() { Host = "localhost", Port = 5001},  
@@ -58,15 +71,22 @@ public class Config //TODO: let IE choose from config files (Json) and connect t
     #else 
     public static Config Default => new()
     {
-        MinSoc                    = 20,
+        MinSoc                               = 20,
-        LastEoc                   = UnixTime.Epoch,  // TODO: remove, use new LastEoc feature from BMS 
+        LastEoc                              = UnixTime.Epoch,  // TODO: remove, use new LastEoc feature from BMS 
-        PConstant                 = .5,
+        PConstant                            = .5,
-        GridSetPoint              = 0,
+        GridSetPoint                         = 0,
-        BatterySelfDischargePower = 200,  
+        BatterySelfDischargePower            = 200,  
-        HoldSocZone               = 1,   // TODO: find better name,
+        HoldSocZone                          = 1,   // TODO: find better name,
-        MinDcBusVoltage           = 690,
+        MinDcLinkVoltageFromAcDc             = 690,
-        ReferenceDcBusVoltage     = 750,
+        ReferenceDcLinkVoltageFromAcDc       = 750,
-        MaxDcBusVoltage           = 810,
+        MaxDcLinkVoltageFromAcDc             = 810,
+        LowerDcLinkVoltageFromDc             = 50,
+        ReferenceDcLinkVoltageFromDc         = 750,
+        UpperDcLinkVoltageFromDc             = 50,
+        MaxBatteryChargingCurrent            = 210,
+        MaxBatteryDischargingCurrent         = 210,
+        MaxChargeBatteryVoltage              = 57,
+        MinDischargeBatteryVoltage           = 0,
         S3 = new()
         {
             Bucket      = "saliomameiringen",

csharp/App/SaliMax/tunnels.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Tunnels</title>
-</head>
-<body>
-
-<div style="font-family: sans-serif; margin: 20px">
-    <a target="_blank" href="http://localhost:8001">Inverter</a><br>
-    <a target="_blank" href="http://localhost:8002">DCDC</a><br>
-    <a target="_blank" href="http://localhost:8003">Emu Meter</a><br>
-    <a target="_blank" href="http://localhost:8004">ADAM</a><br>
-    <a target="_blank" href="http://localhost:8005">AMPT</a><br>
-</div>
-
-</body>
-</html>

csharp/App/SaliMax/tunnelsToProto.sh

@@ -1,44 +0,0 @@
-#!/bin/bash
-
-host=ie-entwicklung@10.2.3.115
-
-tunnel() {
-  name=$1
-  ip=$2
-  rPort=$3
-  lPort=$4
-
-  echo -n "localhost:$lPort    $name  "
-  ssh -nNTL "$lPort:$ip:$rPort" "$host" 2> /dev/null &
-
-  until nc -vz 127.0.0.1 $lPort 2> /dev/null
-  do
-    echo -n .
-    sleep 0.3
-  done
-
-  echo "ok"
-}
-
-echo ""
-
-tunnel "Trumpf Inverter (http)  " 10.0.2.1   80 8001
-tunnel "Trumpf DCDC (http)      " 10.0.3.1   80 8002
-tunnel "Ext Emu Meter (http)    " 10.0.4.1   80 8003
-tunnel "Int Emu Meter (http)    " 10.0.4.2   80 8004
-tunnel "AMPT (http)             " 10.0.5.1   8080 8005
-
-tunnel "Trumpf Inverter (modbus)" 10.0.2.1 502 5001
-tunnel "Trumpf DCDC (modbus)    " 10.0.3.1 502 5002
-tunnel "Ext Emu Meter (modbus)  " 10.0.4.1 502 5003
-tunnel "Int Emu Meter           " 10.0.4.2 502 5004
-tunnel "AMPT (modbus)           " 10.0.5.1 502 5005
-tunnel "Adam                    " 10.0.1.1 502 5006
-tunnel "Batteries               " 127.0.0.1 6855 5007
-                          
-
-echo
-echo "press any key to close the tunnels ..."
-read -r -n 1 -s
-kill $(jobs -p)
-echo "done"

csharp/App/SaliMax/tunnelstoSalimax0002.sh

@@ -1,43 +0,0 @@
-#!/bin/bash
-
-host=ie-entwicklung@10.2.4.29
-
-tunnel() {
-  name=$1
-  ip=$2
-  rPort=$3
-  lPort=$4
-
-  echo -n "localhost:$lPort    $name  "
-  ssh -nNTL "$lPort:$ip:$rPort" "$host" 2> /dev/null &
-
-  until nc -vz 127.0.0.1 $lPort 2> /dev/null
-  do
-    echo -n .
-    sleep 0.3
-  done
-
-  echo "ok"
-}
-
-echo ""
-
-tunnel "Trumpf Inverter (http)  " 10.0.2.1   80 9001
-tunnel "Trumpf DCDC (http)      " 10.0.3.1   80 9002
-tunnel "Ext Emu Meter (http)    " 10.0.4.1   80 9003
-tunnel "Int Emu Meter (http)    " 10.0.4.2   80 9004
-tunnel "AMPT (http)             " 10.0.5.1   8080 9005
-
-#tunnel "Trumpf Inverter (modbus)" 10.0.2.1 502 3001
-#tunnel "Trumpf DCDC (modbus)    " 10.0.3.1 502 3002
-#tunnel "Ext Emu Meter (modbus)  " 10.0.4.1 502 3003
-#tunnel "Int Emu Meter           " 10.0.4.2 502 3004
-#tunnel "AMPT (modbus)           " 10.0.5.1 502 3005
-#tunnel "Batteries               " 127.0.0.1 6855 3007
-                          
-
-echo
-echo "press any key to close the tunnels ..."
-read -r -n 1 -s
-kill $(jobs -p)
-echo "done"

csharp/App/SaliMax/tunnelstoSalimax0003.sh

@@ -1,43 +0,0 @@
-#!/bin/bash
-
-host=ie-entwicklung@10.2.4.33
-
-tunnel() {
-  name=$1
-  ip=$2
-  rPort=$3
-  lPort=$4
-
-  echo -n "localhost:$lPort    $name  "
-  ssh -nNTL "$lPort:$ip:$rPort" "$host" 2> /dev/null &
-
-  until nc -vz 127.0.0.1 $lPort 2> /dev/null
-  do
-    echo -n .
-    sleep 0.3
-  done
-
-  echo "ok"
-}
-
-echo ""
-
-tunnel "Trumpf Inverter (http)  " 10.0.2.1   80 6001
-tunnel "Trumpf DCDC (http)      " 10.0.3.1   80 6002
-tunnel "Ext Emu Meter (http)    " 10.0.4.1   80 6003
-tunnel "Int Emu Meter (http)    " 10.0.4.2   80 6004
-tunnel "AMPT (http)             " 10.0.5.1   8080 6005
-
-tunnel "Trumpf Inverter (modbus)" 10.0.2.1 502 3001
-tunnel "Trumpf DCDC (modbus)    " 10.0.3.1 502 3002
-tunnel "Ext Emu Meter (modbus)  " 10.0.4.1 502 3003
-tunnel "Int Emu Meter           " 10.0.4.2 502 3004
-tunnel "AMPT (modbus)           " 10.0.5.1 502 3005
-tunnel "Batteries               " 127.0.0.1 6855 3007
-                          
-
-echo
-echo "press any key to close the tunnels ..."
-read -r -n 1 -s
-kill $(jobs -p)
-echo "done"

csharp/App/SaliMax/tunnelstoSalimaxX.sh

@@ -1,6 +1,6 @@
 #!/bin/bash
 
-host=ie-entwicklung@10.2.3.104
+host="ie-entwicklung@$1"
 
 tunnel() {
   name=$1
@@ -27,17 +27,14 @@ tunnel "Trumpf DCDC (http)      " 10.0.3.1   80 7002
 tunnel "Ext Emu Meter (http)    " 10.0.4.1   80 7003
 tunnel "Int Emu Meter (http)    " 10.0.4.2   80 7004
 tunnel "AMPT (http)             " 10.0.5.1   8080 7005
+tunnel "Doepke (http)           " 10.0.6.1   80 7006
 
-
+tunnel "Trumpf Inverter (modbus)" 10.0.2.1 502 5001
-tunnel "Trumpf Inverter (modbus)" 10.0.2.1 502 4001
+tunnel "Trumpf DCDC (modbus)    " 10.0.3.1 502 5002
-tunnel "Trumpf DCDC (modbus)    " 10.0.3.1 502 4002
+tunnel "Ext Emu Meter (modbus)  " 10.0.4.1 502 5003
-tunnel "Ext Emu Meter (modbus)  " 10.0.4.1 502 4003
+tunnel "Int Emu Meter           " 10.0.4.2 502 5004
-tunnel "Int Emu Meter           " 10.0.4.2 502 4004
+tunnel "AMPT (modbus)           " 10.0.5.1 502 5005
-tunnel "AMPT (modbus)           " 10.0.5.1 502 4005
-tunnel "Adam                    " 10.0.1.1 502 4006
 tunnel "Batteries               " 127.0.0.1 6855 5007
-
-
                           
 
 echo

csharp/Lib/Devices/Battery48TL/Battery48TlRecords.cs

@@ -13,9 +13,10 @@ public class Battery48TlRecords
         Eoc              = !empty && records.All(r => r.Eoc);
         Warnings         = records.SelectMany(r => r.Warnings).Distinct().ToList();
         Alarms           = records.SelectMany(r => r.Alarms).Distinct().ToList();
-        Soc            = empty ? 0 : records.Min(r => r.Soc.Value);
+        Soc              = empty ? 0 : records.Average(r => r.Soc.Value);
-        Temperature    = records.Any() ? records.Average(b => b.Temperatures.Cells.Average.Value) : 0;
+        CurrentMinSoc    = empty ? 0 : records.Min(r => r.Soc.Value);
-        HeatingCurrent = records.Any() ? records.Sum(b => b.HeatingCurrent) : 0; 
+        Temperature      = records.Any() ? records.Average(b => b.Temperatures.Cells.Average.Value) : 0;
+        HeatingCurrent   = records.Any() ? records.Sum(b => b.HeatingCurrent) : 0; 
         
         Dc = empty
            ? DcBus.FromVoltageCurrent(0, 0)
@@ -31,6 +32,7 @@ public class Battery48TlRecords
     public IReadOnlyList<String> Warnings           { get; init; } 
     public IReadOnlyList<String> Alarms             { get; init; } 
     public Percent               Soc                { get; init; }
+    public Percent               CurrentMinSoc      { get; init; }
     public Temperature           Temperature        { get; init; }
     public Current               HeatingCurrent     { get; init; }
     

csharp/Lib/Time/Unix/UnixTime.cs

@@ -8,5 +8,7 @@ public readonly partial struct UnixTime
 {
     // IMPORTANT: init is necessary for JSON deserializer
     // ReSharper disable once AutoPropertyCanBeMadeGetOnly.Global
-    public UInt32 Ticks { get; init; } 
+    public UInt32 Ticks { get; init; }
+
+    public UnixTime RoundTo(UnixTimeSpan span) => Epoch + this / span * span;
 }

typescript/Frontend/lang/de.json

@@ -1,136 +0,0 @@
-{
-  "Information": {
-    "defaultMessage": "Information"
-  },
-  "addNewChild": {
-    "defaultMessage": "Neues Kind hinzufügen"
-  },
-  "addNewDialogButton": {
-    "defaultMessage": "Neue Dialogschaltfläche hinzufügen"
-  },
-  "addUser": {
-    "defaultMessage": "Nutzer erstellen"
-  },
-  "alarms": {
-    "defaultMessage": "Alarme"
-  },
-  "applyChanges": {
-    "defaultMessage": "Änderungen speichern"
-  },
-  "country": {
-    "defaultMessage": "Land"
-  },
-  "createNewFolder": {
-    "defaultMessage": "Neuen Ordner erstellen"
-  },
-  "createNewUser": {
-    "defaultMessage": "Neuen Nutzer erstellen"
-  },
-  "customerName": {
-    "defaultMessage": "Kundenname"
-  },
-  "email": {
-    "defaultMessage": "Email"
-  },
-  "english": {
-    "defaultMessage": "Englisch"
-  },
-  "error": {
-  },
-  "folder": {
-    "defaultMessage": "Ordner"
-  },
-  "german": {
-    "defaultMessage": "Deutsch"
-  },
-  "groupTabs": {
-    "defaultMessage": "Gruppen"
-  },
-  "groupTree": {
-    "defaultMessage": "Gruppenbaum"
-  },
-  "information": {
-    "defaultMessage": "Information"
-  },
-  "inheritedAccess": {
-    "defaultMessage": "Vererbter Zugriff von"
-  },
-  "installation": {
-    "defaultMessage": "Installation"
-  },
-  "installationTabs": {
-    "defaultMessage": "Installationen"
-  },
-  "installations": {
-    "defaultMessage": "Installationen"
-  },
-  "lastWeek": {
-    "defaultMessage": "Letzte Woche"
-  },
-  "location": {
-    "defaultMessage": "Standort"
-  },
-  "log": {
-    "defaultMessage": "Logbuch"
-  },
-  "logout": {
-    "defaultMessage": "Abmelden"
-  },
-  "makeASelection": {
-    "defaultMessage": "Bitte wählen Sie links eine Auswahl"
-  },
-  "manageAccess": {
-    "defaultMessage": "Zugriff verwalten"
-  },
-  "move": {
-    "defaultMessage": "Verschieben"
-  },
-  "moveTo": {
-    "defaultMessage": "Verschieben zu"
-  },
-  "moveTree": {
-    "defaultMessage": "Baum verschieben"
-  },
-  "name": {
-    "defaultMessage": "Name"
-  },
-  "navigationTabs": {
-    "defaultMessage": "Navigation"
-  },
-  "orderNumbers": {
-    "defaultMessage": "Bestellnummer"
-  },
-  "region": {
-    "defaultMessage": "Region"
-  },
-  "requiredLocation": {
-    "defaultMessage": "Standort ist erforderlich"
-  },
-  "requiredName": {
-    "defaultMessage": "Name ist erforderlich"
-  },
-  "requiredRegion": {
-    "defaultMessage": "Region ist erforderlich"
-  },
-  "search": {
-    "defaultMessage": "Suche"
-  },
-  "submit": {
-    "defaultMessage": "Senden"
-  },
-  "updateFolderErrorMessage": {
-    "defaultMessage": "Fehler, Ordner kann nicht aktualisiert werden"
-  },
-  "updatedSuccessfully": {
-    "defaultMessage": "Erfolgreich aktualisiert"
-  },
-  "user": {
-    "defaultMessage": "Nutzer"
-  },
-  "userTabs": {
-    "defaultMessage": "Nutzer"
-  },
-  "users": {
-    "defaultMessage": "Nutzer"
-  }
-}

typescript/Frontend/lang/en.json

@@ -1,47 +0,0 @@
-{
-  "Information": "Information",
-  "addNewChild": "Add new child",
-  "addNewDialogButton": "Add new dialog button",
-  "addUser": "Create user",
-  "alarms": "Alarms",
-  "applyChanges": "Apply changes",
-  "country": "Country",
-  "createNewFolder": "Create new folder",
-  "createNewUser": "Create new user",
-  "customerName": "Customer",
-  "email": "Email",
-  "english": "English",
-  "error": {},
-  "folder": "Folder",
-  "german": "German",
-  "groupTabs": "Group tabs",
-  "groupTree": "Group tree",
-  "information": "Information",
-  "inheritedAccess": "Inherited access from",
-  "installation": "Installation",
-  "installationTabs": "Installation tabs",
-  "installations": "Installations",
-  "lastWeek": "Last week",
-  "location": "Location",
-  "log": "Log",
-  "logout": "Logout",
-  "makeASelection": "Please make a selection on the left",
-  "manageAccess": "Manage access",
-  "move": "Move",
-  "moveTo": "Move to",
-  "moveTree": "Move tree",
-  "name": "Name",
-  "navigationTabs": "Navigation tabs",
-  "orderNumbers": "Order number",
-  "region": "Region",
-  "requiredLocation": "Location is required",
-  "requiredName": "Name is required",
-  "requiredRegion": "Region is required",
-  "search": "Search",
-  "submit": "Submit",
-  "updateFolderErrorMessage": "Couldn't update folder, an error occured",
-  "updatedSuccessfully": "Updated successfully",
-  "user": "User",
-  "userTabs": "user tabs",
-  "users": "Users"
-}

typescript/Frontend/lang/fr.json

@@ -1,136 +0,0 @@
-{
-  "Information": {
-    "defaultMessage": "Informations"
-  },
-  "addNewChild": {
-    "defaultMessage": "Ajouter un nouvel enfant"
-  },
-  "addNewDialogButton": {
-    "defaultMessage": "Ajouter un nouveau bouton de dialogue"
-  },
-  "addUser": {
-    "defaultMessage": "Créer un utilisateur"
-  },
-  "alarms": {
-    "defaultMessage": "Alarmes"
-  },
-  "applyChanges": {
-    "defaultMessage": "Appliquer les modifications"
-  },
-  "country": {
-    "defaultMessage": "Pays"
-  },
-  "createNewFolder": {
-    "defaultMessage": "Créer un nouveau dossier"
-  },
-  "createNewUser": {
-    "defaultMessage": "Créer un nouvel utilisateur"
-  },
-  "customerName": {
-    "defaultMessage": "Nom du client"
-  },
-  "email": {
-    "defaultMessage": "E-mail"
-  },
-  "english": {
-    "defaultMessage": "Anglais"
-  },
-  "error": {
-  },
-  "folder": {
-    "defaultMessage": "Dossier"
-  },
-  "german": {
-    "defaultMessage": "Allemand"
-  },
-  "groupTabs": {
-    "defaultMessage": "Onglets de groupe"
-  },
-  "groupTree": {
-    "defaultMessage": "Arbre de groupe"
-  },
-  "information": {
-    "defaultMessage": "Informations"
-  },
-  "inheritedAccess": {
-    "defaultMessage": "Accès hérité de"
-  },
-  "installation": {
-    "defaultMessage": "Installation"
-  },
-  "installationTabs": {
-    "defaultMessage": "Onglets d'installation"
-  },
-  "installations": {
-    "defaultMessage": "Installations"
-  },
-  "lastWeek": {
-    "defaultMessage": "La semaine dernière"
-  },
-  "location": {
-    "defaultMessage": "Localisation"
-  },
-  "log": {
-    "defaultMessage": "Journal"
-  },
-  "logout": {
-    "defaultMessage": "Déconnexion"
-  },
-  "makeASelection": {
-    "defaultMessage": "Veuillez faire une sélection à gauche"
-  },
-  "manageAccess": {
-    "defaultMessage": "Gérer l'accès"
-  },
-  "move": {
-    "defaultMessage": "Déplacer"
-  },
-  "moveTo": {
-    "defaultMessage": "Déplacer à"
-  },
-  "moveTree": {
-    "defaultMessage": "Déplacer l'arbre"
-  },
-  "name": {
-    "defaultMessage": "Nom"
-  },
-  "navigationTabs": {
-    "defaultMessage": "Onglets de navigation"
-  },
-  "orderNumbers": {
-    "defaultMessage": "Numéro de commande"
-  },
-  "region": {
-    "defaultMessage": "Région"
-  },
-  "requiredLocation": {
-    "defaultMessage": "L'emplacement est requis"
-  },
-  "requiredName": {
-    "defaultMessage": "Le nom est obligatoire"
-  },
-  "requiredRegion": {
-    "defaultMessage": "La région est obligatoire"
-  },
-  "search": {
-    "defaultMessage": "Recherche"
-  },
-  "submit": {
-    "defaultMessage": "Soumettre"
-  },
-  "updateFolderErrorMessage": {
-    "defaultMessage": "Une erreur s'est produite, impossible de mettre à jour le dossier."
-  },
-  "updatedSuccessfully": {
-    "defaultMessage": "Mise à jour réussie"
-  },
-  "user": {
-    "defaultMessage": "Utilisateur"
-  },
-  "userTabs": {
-    "defaultMessage": "Onglets utilisateurs"
-  },
-  "users": {
-    "defaultMessage": "Utilisateurs"
-  }
-}

typescript/Frontend/src/App.css

@@ -1,39 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

typescript/Frontend/src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

typescript/Frontend/src/App.tsx

@@ -4,7 +4,7 @@ import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 
 import { Container, Grid, Box } from "@mui/material";
 import routes from "./routes.json";
-import { IntlProvider, MessageFormatElement } from "react-intl";
+import { IntlProvider } from "react-intl";
 import { useContext, useState } from "react";
 import en from "./lang/en.json";
 import de from "./lang/de.json";
@@ -28,9 +28,9 @@ const App = () => {
   const getTranslations = () => {
     switch (language) {
       case "en":
-        return de;
-      case "de":
         return en;
+      case "de":
+        return de;
       case "fr":
         return fr;
     }
@@ -42,7 +42,6 @@ const App = () => {
   if (token && getCurrentUser()?.mustResetPassword) {
     return <ResetPassword />;
   }
-  console.log("lang", language);
   return (
     <BrowserRouter>
       <IntlProvider
@@ -78,7 +77,7 @@ const App = () => {
           bgcolor={colors.greyLight}
           pt={3}
           borderTop="2px solid"
-          borderColor=" #a8b0be"
+          borderColor={colors.borderColor}
           flex="1 0 auto"
         >
           <Container maxWidth="xl">

typescript/Frontend/src/Login.tsx

@@ -1,11 +1,5 @@
 import React, { useContext, useState } from "react";
-import {
+import { Alert, CircularProgress, Grid, useTheme } from "@mui/material";
-  Alert,
-  CircularProgress,
-  Grid,
-  Typography,
-  useTheme,
-} from "@mui/material";
 import Container from "@mui/material/Container";
 import { axiosConfigWithoutToken } from "./config/axiosConfig";
 import InnovenergyTextfield from "./components/Layout/InnovenergyTextfield";

typescript/Frontend/src/components/Context/GroupContextProvider.tsx

@@ -2,8 +2,9 @@ import { createContext, ReactNode, useCallback, useState } from "react";
 import axiosConfig from "../../config/axiosConfig";
 import { transformArrayToTree } from "../../util/group.util";
 import { I_Folder, I_Installation } from "../../util/types";
+import { AxiosError } from "axios";
 
-interface GroupContextProviderProps {
+interface I_GroupContextProviderProps {
   currentType: string;
   setCurrentType: (value: string) => void;
   data: (I_Folder | I_Installation)[];
@@ -11,10 +12,10 @@ interface GroupContextProviderProps {
   fetchData: () => Promise<void>;
   loading: boolean;
   setLoading: (value: boolean) => void;
-  getError: boolean;
+  getError?: AxiosError;
 }
 
-export const GroupContext = createContext<GroupContextProviderProps>({
+export const GroupContext = createContext<I_GroupContextProviderProps>({
   currentType: "",
   setCurrentType: () => {},
   data: [],
@@ -22,14 +23,14 @@ export const GroupContext = createContext<GroupContextProviderProps>({
   fetchData: () => Promise.resolve(),
   loading: false,
   setLoading: () => {},
-  getError: false,
+  getError: undefined,
 });
 
 const GroupContextProvider = ({ children }: { children: ReactNode }) => {
   const [currentType, setCurrentType] = useState("");
   const [data, setData] = useState<(I_Folder | I_Installation)[]>([]);
   const [loading, setLoading] = useState(false);
-  const [getError, setGetError] = useState(false);
+  const [getError, setGetError] = useState<AxiosError>();
 
   const fetchData = useCallback(async () => {
     setLoading(true);

typescript/Frontend/src/components/Context/InstallationsContextProvider.tsx

@@ -3,7 +3,7 @@ import { createContext, ReactNode, useCallback, useState } from "react";
 import axiosConfig from "../../config/axiosConfig";
 import { I_Installation } from "../../util/types";
 
-interface InstallationContextProviderProps {
+interface I_InstallationContextProviderProps {
   data: I_Installation[];
   setData: (value: I_Installation[]) => void;
   fetchData: () => Promise<void>;
@@ -14,7 +14,7 @@ interface InstallationContextProviderProps {
 }
 
 export const InstallationsContext =
-  createContext<InstallationContextProviderProps>({
+  createContext<I_InstallationContextProviderProps>({
     data: [],
     setData: () => {},
     fetchData: () => Promise.resolve(),

typescript/Frontend/src/components/Context/LogContextProvider.tsx

@@ -1,16 +1,16 @@
 import { createContext, ReactNode, useState } from "react";
-import { TreeElement } from "../Installations/Log/CheckboxTree";
+import { I_TreeElement } from "../Installations/Log/CheckboxTree";
 import React from "react";
 
-interface LogContextProviderProps {
+interface I_LogContextProviderProps {
-  toggles: TreeElement[] | null;
+  toggles: I_TreeElement[] | null;
-  setToggles: (value: TreeElement[]) => void;
+  setToggles: (value: I_TreeElement[]) => void;
   checkedToggles: string[];
   setChecked: (newValue: string) => void;
   removeChecked: (value: string) => void;
 }
 
-export const LogContext = createContext<LogContextProviderProps>({
+export const LogContext = createContext<I_LogContextProviderProps>({
   toggles: [],
   setToggles: () => {},
   checkedToggles: [],
@@ -19,7 +19,7 @@ export const LogContext = createContext<LogContextProviderProps>({
 });
 
 const LogContextProvider = ({ children }: { children: ReactNode }) => {
-  const [toggles, setToggles] = useState<TreeElement[] | null>(null);
+  const [toggles, setToggles] = useState<I_TreeElement[] | null>(null);
   const [checkedToggles, setCheckedToggles] = useState<string[]>([]);
 
   const setChecked = (newValue: string) => {

typescript/Frontend/src/components/Context/S3CredentialsContextProvider.tsx

@@ -1,21 +1,20 @@
 import { createContext, ReactNode, useState } from "react";
-import { I_User } from "../../util/user.util";
+import { I_S3Credentials } from "../../util/types";
-import { I_Installation, S3Credentials } from "../../util/types";
 import { UnixTime } from "../../dataCache/time";
 import { FetchResult } from "../../dataCache/dataCache";
 import { DataRecord } from "../../dataCache/data";
 import { S3Access } from "../../dataCache/S3/S3Access";
 import { parseCsv } from "../../util/graph.util";
 
-interface S3CredentialsContextProviderProps {
+interface I_S3CredentialsContextProviderProps {
-  s3Credentials?: S3Credentials;
+  s3Credentials?: I_S3Credentials;
-  saveS3Credentials: (credentials: S3Credentials, id: string) => void;
+  saveS3Credentials: (credentials: I_S3Credentials, id: string) => void;
   fetchData: (timestamp: UnixTime) => Promise<FetchResult<DataRecord>>;
 }
 
 export const S3CredentialsContext =
-  createContext<S3CredentialsContextProviderProps>({
+  createContext<I_S3CredentialsContextProviderProps>({
-    s3Credentials: {} as S3Credentials,
+    s3Credentials: {} as I_S3Credentials,
     saveS3Credentials: () => {},
     fetchData: () => ({} as Promise<FetchResult<DataRecord>>),
   });
@@ -25,18 +24,11 @@ const S3CredentialsContextProvider = ({
 }: {
   children: ReactNode;
 }) => {
-  const [s3Credentials, setS3Credentials] = useState<S3Credentials>();
+  const [s3Credentials, setS3Credentials] = useState<I_S3Credentials>();
 
-  const saveS3Credentials = (credentials: S3Credentials, id: string) => {
+  const saveS3Credentials = (credentials: I_S3Credentials, id: string) => {
     const s3Bucket = id + "-3e5b3069-214a-43ee-8d85-57d72000c10d";
     setS3Credentials({ s3Bucket, ...credentials });
-    /*    setS3Credentials({
-                      s3Region: "sos-ch-dk-2",
-                      s3Provider: "exo.io",
-                      s3Key: "EXO15c0bf710e158e9b83270f0a",
-                      s3Secret: "Dd5jYSiZtt_Zt5Ba5mDmaiLCdASUaKLfduSKY-SU-lg",
-                      s3Bucket: "saliomameiringen",
-                    });*/
   };
 
   const fetchData = (timestamp: UnixTime): Promise<FetchResult<DataRecord>> => {
@@ -63,7 +55,6 @@ const S3CredentialsContextProvider = ({
           }
         })
         .catch((e) => {
-          console.log("catch", e);
           return Promise.resolve(FetchResult.tryLater);
         });
     }

typescript/Frontend/src/components/Context/UserContextProvider.tsx

@@ -1,14 +1,14 @@
 import { createContext, ReactNode, useState } from "react";
 import { I_User } from "../../util/user.util";
 
-interface InstallationContextProviderProps {
+interface I_InstallationContextProviderProps {
   currentUser?: I_User;
   setCurrentUser: (value: I_User) => void;
   saveCurrentUser: (user: I_User) => void;
   getCurrentUser: () => I_User;
 }
 
-export const UserContext = createContext<InstallationContextProviderProps>({
+export const UserContext = createContext<I_InstallationContextProviderProps>({
   currentUser: {} as I_User,
   setCurrentUser: () => {},
   saveCurrentUser: () => {},

typescript/Frontend/src/components/Context/UsersContextProvider.tsx

@@ -8,14 +8,14 @@ import {
 } from "react";
 import { useParams } from "react-router-dom";
 import axiosConfig from "../../config/axiosConfig";
-import { I_User, UserWithInheritedAccess } from "../../util/user.util";
+import { I_User, I_UserWithInheritedAccess } from "../../util/user.util";
 import { GroupContext } from "./GroupContextProvider";
 
-interface UsersContextProviderProps {
+interface I_UsersContextProviderProps {
   directAccessUsers: I_User[];
   setDirectAccessUsers: (value: I_User[]) => void;
-  inheritedAccessUsers: UserWithInheritedAccess[];
+  inheritedAccessUsers: I_UserWithInheritedAccess[];
-  setInheritedAccessUsers: (value: UserWithInheritedAccess[]) => void;
+  setInheritedAccessUsers: (value: I_UserWithInheritedAccess[]) => void;
   availableUsers: I_User[];
   setAvailableUsers: (value: I_User[]) => void;
   getAvailableUsersForResource: () => I_User[];
@@ -24,7 +24,7 @@ interface UsersContextProviderProps {
   fetchAvailableUsers: () => Promise<void>;
 }
 
-export const UsersContext = createContext<UsersContextProviderProps>({
+export const UsersContext = createContext<I_UsersContextProviderProps>({
   directAccessUsers: [],
   setDirectAccessUsers: () => {},
   inheritedAccessUsers: [],
@@ -48,7 +48,7 @@ export const UsersContext = createContext<UsersContextProviderProps>({
 const UsersContextProvider = ({ children }: { children: ReactNode }) => {
   const [directAccessUsers, setDirectAccessUsers] = useState<I_User[]>([]);
   const [inheritedAccessUsers, setInheritedAccessUsers] = useState<
-    UserWithInheritedAccess[]
+    I_UserWithInheritedAccess[]
   >([]);
   const [availableUsers, setAvailableUsers] = useState<I_User[]>([]);
 

typescript/Frontend/src/components/Groups/AccessManagement/AccessManagement.tsx

@@ -1,7 +1,7 @@
 import { Grid } from "@mui/material";
 import UsersContextProvider from "../../Context/UsersContextProvider";
 import AvailableUserDialog from "./AvailableUserDialog";
-import InnovenergyList from "./InnovenergyList";
+import InnovenergyList from "../../Layout/InnovenergyList";
 import UsersWithDirectAccess from "./UsersWithDirectAccess";
 import UsersWithInheritedAccess from "./UsersWithInheritedAccess";
 import { useContext } from "react";

typescript/Frontend/src/components/Groups/AccessManagement/AvailableUserDialog.tsx

@@ -4,7 +4,6 @@ import {
   DialogContent,
   DialogTitle,
   TextField,
-  colors,
   Alert,
 } from "@mui/material";
 import DialogActions from "@mui/material/DialogActions";

typescript/Frontend/src/components/Groups/AccessManagement/UsersWithDirectAccess.tsx

@@ -18,11 +18,11 @@ import { UserContext } from "../../Context/UserContextProvider";
 import { FormattedMessage } from "react-intl";
 
 const UsersWithDirectAccess = () => {
+  const { id } = useParams();
+  const [error, setError] = useState<any>();
   const { fetchUsersWithDirectAccessForResource, directAccessUsers } =
     useContext(UsersContext);
-  const [error, setError] = useState<any>();
   const { currentType } = useContext(GroupContext);
-  const { id } = useParams();
   const { getCurrentUser } = useContext(UserContext);
 
   useEffect(() => {

typescript/Frontend/src/components/Groups/AccessManagement/UsersWithInheritedAccess.tsx

@@ -10,7 +10,7 @@ import { Fragment, useContext, useEffect } from "react";
 import { Link } from "react-router-dom";
 import {
   filterDuplicateUsers,
-  UserWithInheritedAccess,
+  I_UserWithInheritedAccess,
 } from "../../../util/user.util";
 import routes from "../../../routes.json";
 import PersonIcon from "@mui/icons-material/Person";
@@ -29,7 +29,7 @@ const UsersWithInheritedAccess = () => {
     return (
       <>
         {filterDuplicateUsers(inheritedAccessUsers).map(
-          ({ user, folderName }: UserWithInheritedAccess) => {
+          ({ user, folderName }: I_UserWithInheritedAccess) => {
             return (
               <Fragment key={user.id}>
                 <ListItem id={"inherited-access-user-list-item" + user.id}>

typescript/Frontend/src/components/Groups/AddNewButtons.tsx

@@ -1,13 +1,9 @@
-import { Dialog, DialogContent, DialogTitle, IconButton } from "@mui/material";
+import { FormattedMessage } from "react-intl";
-import { useState } from "react";
-import { FormattedMessage, useIntl } from "react-intl";
 import axiosConfig from "../../config/axiosConfig";
 import { I_Folder, I_Installation } from "../../util/types";
-import FolderForm from "./FolderForm";
+import FolderForm from "./Detail/FolderForm";
-import CloseIcon from "@mui/icons-material/Close";
+import InstallationForm from "../Installations/Detail/InstallationForm";
-import InnovenergyButton from "../Layout/InnovenergyButton";
+import AddNewDialog from "./AddNewDialog";
-import InstallationForm from "../Installations/InstallationForm";
-import AddNewDialog from "./AddNew";
 
 interface AddNewDialogProps {
   values: I_Folder | I_Installation;
@@ -15,8 +11,6 @@ interface AddNewDialogProps {
 }
 
 const AddNewButtons = (props: AddNewDialogProps) => {
-  const [open, setOpen] = useState(false);
-
   const handleFolderSubmit = (data: I_Folder, childData: Partial<I_Folder>) => {
     return axiosConfig
       .post("/CreateFolder", {
@@ -24,7 +18,6 @@ const AddNewButtons = (props: AddNewDialogProps) => {
         parentId: data.id,
       })
       .then((res) => {
-        setOpen(false);
         return res;
       });
   };
@@ -39,7 +32,6 @@ const AddNewButtons = (props: AddNewDialogProps) => {
         parentId: data.id,
       })
       .then((res) => {
-        setOpen(false);
         return res;
       });
   };

typescript/Frontend/src/components/Groups/AddNewDialog.tsx

@@ -5,15 +5,15 @@ import CloseIcon from "@mui/icons-material/Close";
 import { ReactNode, useState } from "react";
 import InnovenergyButton from "../Layout/InnovenergyButton";
 
-interface AddNewDialogProps {
+interface I_AddNewDialogProps {
   form: ReactNode;
   message: ReactNode;
   id: number;
 }
 
-const AddNewDialog = (props: AddNewDialogProps) => {
+const AddNewDialog = (props: I_AddNewDialogProps) => {
-  const [open, setOpen] = useState(false);
   const { form, id, message } = props;
+  const [open, setOpen] = useState(false);
   const intl = useIntl();
   return (
     <>

typescript/Frontend/src/components/Groups/Detail/Folder.tsx

@@ -2,12 +2,11 @@ import { Box, CircularProgress, Alert, useTheme } from "@mui/material";
 import { AxiosError } from "axios";
 import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
-import axiosConfig from "../../config/axiosConfig";
+import axiosConfig from "../../../config/axiosConfig";
-import { I_Folder } from "../../util/types";
+import { I_Folder } from "../../../util/types";
-import AddNewButtons from "./AddNewButtons";
+import AddNewButtons from "../AddNewButtons";
 import FolderForm from "./FolderForm";
-import MoveDialog from "./Tree/MoveDialog";
+import MoveDialog from "./MoveDialog";
-import { colors } from "index";
 
 const Folder = () => {
   const { id } = useParams();
@@ -43,7 +42,7 @@ const Folder = () => {
         <Box
           sx={{
             py: 3,
-            bgcolor: colors.greyDark,
+            bgcolor: theme.palette.primary.dark,
             px: 1,
             borderBottom: 2,
             borderRight: 2,
@@ -54,7 +53,6 @@ const Folder = () => {
             borderBottomLeftRadius: 4,
             borderBottomRightRadius: 4,
             borderColor: theme.palette.text.disabled,
-            marginTop: 0.05,
           }}
         >
           <FolderForm

typescript/Frontend/src/components/Groups/Detail/FolderForm.tsx

@@ -3,15 +3,13 @@ import { AxiosResponse } from "axios";
 import { useFormik } from "formik";
 import { ReactNode, useContext, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import { I_Folder } from "../../util/types";
+import { I_Folder } from "../../../util/types";
-import { GroupContext } from "../Context/GroupContextProvider";
+import { GroupContext } from "../../Context/GroupContextProvider";
-import InnovenergySnackbar from "../InnovenergySnackbar";
+import InnovenergySnackbar from "../../Layout/InnovenergySnackbar";
-import InnovenergyButton from "../Layout/InnovenergyButton";
+import InnovenergyButton from "../../Layout/InnovenergyButton";
-import {
+import { I_InnovenergyTextfieldProps } from "../../Layout/InnovenergyTextfield";
-  I_InnovenergyTextfieldProps,
+import { UserContext } from "../../Context/UserContextProvider";
-  IePropertyGrid,
+import InnovenergyPropertyGrid from "../../Layout/InnovenergyPropertyGrid";
-} from "../Layout/InnovenergyTextfield";
-import { UserContext } from "../Context/UserContextProvider";
 
 interface I_CustomerFormProps {
   values: I_Folder;
@@ -24,14 +22,16 @@ interface I_CustomerFormProps {
 
 const FolderForm = (props: I_CustomerFormProps) => {
   const { values, additionalButtons, handleSubmit } = props;
-  const intl = useIntl();
-  const { fetchData } = useContext(GroupContext);
-  const { getCurrentUser } = useContext(UserContext);
 
   const [snackbarOpen, setSnackbarOpen] = useState(false);
   const [error, setError] = useState();
   const [loading, setLoading] = useState(false);
 
+  const intl = useIntl();
+  const theme = useTheme();
+  const { fetchData } = useContext(GroupContext);
+  const { getCurrentUser } = useContext(UserContext);
+
   const readOnly = !getCurrentUser().hasWriteAccess;
 
   const formik = useFormik({
@@ -55,7 +55,6 @@ const FolderForm = (props: I_CustomerFormProps) => {
         });
     },
   });
-  const theme = useTheme();
 
   const rows: I_InnovenergyTextfieldProps[] = [
     {
@@ -83,33 +82,31 @@ const FolderForm = (props: I_CustomerFormProps) => {
   ];
 
   return (
-    <>
+    <form onSubmit={formik.handleSubmit}>
-      <form onSubmit={formik.handleSubmit}>
+      <InnovenergyPropertyGrid rows={rows} />
-        <IePropertyGrid rows={rows} />
+      <Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
-        <Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
+        {loading && (
-          {loading && (
+          <CircularProgress sx={{ color: theme.palette.secondary.main }} />
-            <CircularProgress sx={{ color: theme.palette.secondary.main }} />
+        )}
-          )}
+        {!readOnly &&
-          {!readOnly &&
+          additionalButtons &&
-            additionalButtons &&
+          additionalButtons.map((button) => button)}
-            additionalButtons.map((button) => button)}
+        {!readOnly && (
-          {!readOnly && (
+          <InnovenergyButton
-            <InnovenergyButton
+            id="folder-form-submit-button"
-              id="folder-form-submit-button"
+            type="submit"
-              type="submit"
+            sx={{ ml: 2 }}
-              sx={{ ml: 2 }}
+          >
-            >
+            <FormattedMessage id="submit" defaultMessage="Submit" />
-              <FormattedMessage id="submit" defaultMessage="Submit" />
+          </InnovenergyButton>
-            </InnovenergyButton>
+        )}
-          )}
+      </Grid>
-        </Grid>
+      <InnovenergySnackbar
-        <InnovenergySnackbar
+        error={error}
-          error={error}
+        setOpen={setSnackbarOpen}
-          setOpen={setSnackbarOpen}
+        open={snackbarOpen}
-          open={snackbarOpen}
+      />
-        />
+    </form>
-      </form>
-    </>
   );
 };
 

typescript/Frontend/src/components/Groups/Detail/MoveDialog.tsx

@@ -9,21 +9,21 @@ import { GroupContext } from "../../Context/GroupContextProvider";
 import InnovenergyButton from "../../Layout/InnovenergyButton";
 import MoveTree from "./MoveTree";
 
-interface MoveDialogProps {
+interface I_MoveDialogProps {
   values: I_Folder;
 }
 
-const MoveDialog = (props: MoveDialogProps) => {
+const MoveDialog = (props: I_MoveDialogProps) => {
   const { values } = props;
 
   const [open, setOpen] = useState(false);
-
   const [selectedParentId, setSelectedParentId] = useState<number>(
     values.parentId
   );
+  const [error, setError] = useState();
+
   const { fetchData, currentType } = useContext(GroupContext);
   const { id } = useParams();
-  const [error, setError] = useState();
 
   const handleMove = () => {
     const route =

typescript/Frontend/src/components/Groups/Detail/MoveTree.tsx

@@ -6,14 +6,14 @@ import { I_Folder, I_Installation } from "../../../util/types";
 import { GroupContext } from "../../Context/GroupContextProvider";
 import { instanceOfFolder } from "../../../util/group.util";
 import { useIntl } from "react-intl";
-import InnovEnergyTreeItem from "../../Layout/InnovEnergyTreeItem";
+import InnovenergyTreeItem from "../../Layout/InnovenergyTreeItem";
 
-interface MoveTreeProps {
+interface I_MoveTreeProps {
   setSelectedParentId: (value: number) => void;
   parentId: number;
 }
 
-const MoveTree = (props: MoveTreeProps) => {
+const MoveTree = (props: I_MoveTreeProps) => {
   const { data } = useContext(GroupContext);
   const intl = useIntl();
 
@@ -29,7 +29,7 @@ const MoveTree = (props: MoveTreeProps) => {
       .filter((element) => element.type === "Folder")
       .map((element) => {
         return (
-          <InnovEnergyTreeItem
+          <InnovenergyTreeItem
             id={"move-tree-item-" + element.id}
             key={"move-tree-item-" + element.id}
             nodeId={element.id.toString()}
@@ -37,7 +37,7 @@ const MoveTree = (props: MoveTreeProps) => {
             label={element.name}
           >
             {getNodes(element)}
-          </InnovEnergyTreeItem>
+          </InnovenergyTreeItem>
         );
       });
   };

typescript/Frontend/src/components/Groups/GroupTabs.tsx

@@ -12,6 +12,8 @@ import { useTheme } from "@mui/material";
 
 const GroupTabs = () => {
   const theme = useTheme();
+  const intl = useIntl();
+  const { currentType } = useContext(GroupContext);
   const routeMatch = useRouteMatch([
     routes.installations + routes.tree + routes.folder + ":id",
     routes.installations + routes.tree + routes.manageAccess + ":id",
@@ -19,8 +21,6 @@ const GroupTabs = () => {
   ]);
 
   const id = routeMatch?.params?.id;
-  const intl = useIntl();
-  const { currentType } = useContext(GroupContext);
 
   if (id) {
     return (
@@ -29,14 +29,15 @@ const GroupTabs = () => {
           <InnovenergyTabs id="group-tabs" value={routeMatch?.pattern?.path}>
             {currentType === "Folder" ? (
               <InnovenergyTab
-              sx={{
+                sx={{
-                "&.Mui-selected": {
+                  "&.Mui-selected": {
-                  color: colors.black,
+                    color: colors.black,
-                  backgroundColor: theme.palette.primary.dark, 
+                    backgroundColor: theme.palette.primary.dark,
-                  borderColor: theme.palette.text.disabled,
+                    borderColor: theme.palette.text.disabled,
-                  borderBottom: 0,
+                    borderBottom: 0,
-                  mb:-1/8,
+                    mb: -1 / 8,
-              }}}
+                  },
+                }}
                 id="styled-tab-folder"
                 label={intl.formatMessage({
                   id: "folder",
@@ -49,16 +50,16 @@ const GroupTabs = () => {
                 to={routes.folder + id}
               />
             ) : (
-
               <InnovenergyTab
-              sx={{
+                sx={{
-                "&.Mui-selected": {
+                  "&.Mui-selected": {
-                  color: colors.black,
+                    color: colors.black,
-                  backgroundColor: theme.palette.primary.dark, 
+                    backgroundColor: theme.palette.primary.dark,
-                  borderColor: theme.palette.text.disabled,
+                    borderColor: theme.palette.text.disabled,
-                  borderBottom: 0,
+                    borderBottom: 0,
-                  mb:-1/8,
+                    mb: -1 / 8,
-              }}}
+                  },
+                }}
                 id="styled-tab-installation"
                 label={intl.formatMessage({
                   id: "installation",
@@ -79,11 +80,12 @@ const GroupTabs = () => {
               sx={{
                 "&.Mui-selected": {
                   color: colors.black,
-                  backgroundColor: theme.palette.primary.dark, 
+                  backgroundColor: theme.palette.primary.dark,
                   borderColor: theme.palette.text.disabled,
                   borderBottom: 0,
-                  mb:-1/8,
+                  mb: -1 / 8,
-              }}}
+                },
+              }}
               id="styled-tab-manage-access"
               label={intl.formatMessage({
                 id: "manageAccess",

typescript/Frontend/src/components/Groups/GroupTree.tsx

@@ -1,20 +1,20 @@
 import TreeView from "@mui/lab/TreeView";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import { ReactNode, useContext, useEffect, useState } from "react";
+import React, { ReactNode, useContext, useEffect, useState } from "react";
-import { TreeItem } from "@mui/lab";
+import { I_Folder, I_Installation } from "../../util/types";
-import { I_Folder, I_Installation } from "../../../util/types";
 import { Link } from "react-router-dom";
-import routes from "../../../routes.json";
+import routes from "../../routes.json";
-import { GroupContext } from "../../Context/GroupContextProvider";
+import { GroupContext } from "../Context/GroupContextProvider";
-import { instanceOfFolder } from "../../../util/group.util";
+import { instanceOfFolder } from "../../util/group.util";
-import { Grid, CircularProgress, useTheme } from "@mui/material";
+import { Grid, CircularProgress, useTheme, Alert } from "@mui/material";
 import { useIntl } from "react-intl";
-import { colors } from "../../..";
+import InnovenergyTreeItem from "../Layout/InnovenergyTreeItem";
-import InnovEnergyTreeItem from "../../Layout/InnovEnergyTreeItem";
+import TypeIcon from "./TypeIcon";
 
 const GroupTree = () => {
-  const { setCurrentType, fetchData, data, loading } = useContext(GroupContext);
+  const { setCurrentType, fetchData, data, loading, getError } =
+    useContext(GroupContext);
   const [openNodes, setOpenNodes] = useState<string[]>([]);
   const [selected, setSelected] = useState<string>("");
   const intl = useIntl();
@@ -48,19 +48,27 @@ const GroupTree = () => {
           }}
           draggable={false}
         >
-          <InnovEnergyTreeItem
+          <InnovenergyTreeItem
             id={"group-tree-item-" + element.id}
             key={element.type + element.id}
             nodeId={element.type + element.id}
-            label={element.name}
+            label={
-            onClick={() => setCurrentType(element.type)}
+              <>
+                <TypeIcon type={element.type} /> {element.name}
+              </>
+            }
+            onClick={() => {
+              setCurrentType(element.type);
+            }}
+            sx={{ ".MuiTreeItem-label": { display: "flex" } }}
           >
             {getNodes(element)}
-          </InnovEnergyTreeItem>
+          </InnovenergyTreeItem>
         </Link>
       );
     });
   };
+
   if (loading) {
     return (
       <Grid container justifyContent="center" width="100%">
@@ -68,6 +76,9 @@ const GroupTree = () => {
       </Grid>
     );
   }
+  if (getError) {
+    return <Alert severity="error">{getError.message} </Alert>;
+  }
   if (data) {
     return (
       <TreeView

typescript/Frontend/src/components/Groups/Groups.tsx

@@ -1,12 +1,12 @@
 import { Grid } from "@mui/material";
 import { Routes, Route } from "react-router";
 import routes from "../../routes.json";
-import Folder from "./Folder";
+import Folder from "./Detail/Folder";
 import GroupTabs from "./GroupTabs";
 import GroupContextProvider from "../Context/GroupContextProvider";
-import GroupTree from "./Tree/GroupTree";
+import GroupTree from "./GroupTree";
 import AccessManagement from "./AccessManagement/AccessManagement";
-import Installation from "../Installations/Installation";
+import Installation from "../Installations/Detail/Installation";
 import useRouteMatch from "../../hooks/useRouteMatch";
 import useInstallation from "../../hooks/useInstallation";
 import { useEffect } from "react";
@@ -25,7 +25,6 @@ const Groups = () => {
   const id = routeMatch?.params?.id;
 
   useEffect(() => {
-    // TODO remove if
     getInstallation(id);
   }, [id]);
   return (

typescript/Frontend/src/components/Groups/Tree/GroupTree.scss

@@ -1,4 +0,0 @@
-.groupTreeLink {
-    text-decoration: "none";
-    color: "red";
-}

typescript/Frontend/src/components/Groups/TypeIcon.tsx

@@ -1,14 +1,19 @@
 import FolderIcon from "@mui/icons-material/Folder";
 import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
 
-interface TypeIconProps {
+interface I_TypeIconProps {
   type: string | undefined;
 }
-const TypeIcon = (props: TypeIconProps) => {
+
+const TypeIcon = (props: I_TypeIconProps) => {
   return (
-    <div>
+    <>
-      {props.type === "Folder" ? <FolderIcon /> : <InsertDriveFileIcon />}
+      {props.type === "Folder" ? (
-    </div>
+        <FolderIcon sx={{ height: "20px", mt: "1px", mr: 1 }} />
+      ) : (
+        <InsertDriveFileIcon sx={{ height: "20px", mt: "1px", mr: 1 }} />
+      )}
+    </>
   );
 };
 

typescript/Frontend/src/components/Installations/Detail/Installation.tsx

@@ -1,13 +1,10 @@
 import { Alert, Box, CircularProgress, useTheme } from "@mui/material";
 import { AxiosError } from "axios";
-import { useContext, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import axiosConfig from "../../config/axiosConfig";
+import axiosConfig from "../../../config/axiosConfig";
-import { I_Folder, I_Installation } from "../../util/types";
+import { I_Folder, I_Installation } from "../../../util/types";
 import InstallationForm from "./InstallationForm";
-import { colors } from "../..";
+import MoveDialog from "../../Groups/Detail/MoveDialog";
-import { S3CredentialsContext } from "../Context/S3CredentialsContextProvider";
-import MoveDialog from "../Groups/Tree/MoveDialog";
 
 interface I_InstallationProps {
   loading?: boolean;
@@ -31,7 +28,7 @@ const Installation = (props: I_InstallationProps) => {
       <Box
         sx={{
           py: 3,
-          bgcolor: colors.greyDark,
+          bgcolor: theme.palette.primary.dark,
           px: 1,
           borderLeft: 2,
           borderRight: 2,
@@ -46,7 +43,7 @@ const Installation = (props: I_InstallationProps) => {
         <InstallationForm
           values={values}
           handleSubmit={handleSubmit}
-          additionalButtons={props.hasMoveButton ? [moveDialog] : []}
+          additionalButtons={props.hasMoveButton ? [moveDialog] : undefined}
         />
         <Box>
           {values.s3WriteKey && <div>{`Write key: ${values.s3WriteKey}`}</div>}

typescript/Frontend/src/components/Installations/Detail/InstallationForm.tsx

@@ -2,18 +2,15 @@ import { Alert, Grid, Snackbar } from "@mui/material";
 import { useFormik } from "formik";
 import { ReactNode, useContext, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import axiosConfig from "../../config/axiosConfig";
+import { I_Installation } from "../../../util/types";
-import { I_Folder, I_Installation } from "../../util/types";
+import { InstallationsContext } from "../../Context/InstallationsContextProvider";
-import { InstallationsContext } from "../Context/InstallationsContextProvider";
+import InnovenergyButton from "../../Layout/InnovenergyButton";
-import MoveDialog from "../Groups/Tree/MoveDialog";
+import { I_InnovenergyTextfieldProps } from "../../Layout/InnovenergyTextfield";
-import InnovenergyButton from "../Layout/InnovenergyButton";
+import { UserContext } from "../../Context/UserContextProvider";
-import InnovenergyTextfield, {
-  I_InnovenergyTextfieldProps,
-  IePropertyGrid,
-} from "../Layout/InnovenergyTextfield";
-import { UserContext } from "../Context/UserContextProvider";
 import * as Yup from "yup";
-import { AxiosResponse } from "axios";
+import { AxiosError, AxiosResponse } from "axios";
+import InnovenergyPropertyGrid from "../../Layout/InnovenergyPropertyGrid";
+import { GroupContext } from "../../Context/GroupContextProvider";
 
 interface I_InstallationFormProps {
   values: I_Installation;
@@ -27,8 +24,11 @@ interface I_InstallationFormProps {
 const InstallationForm = (props: I_InstallationFormProps) => {
   const { values, additionalButtons, handleSubmit } = props;
   const [open, setOpen] = useState(false);
+  const [error, setError] = useState<AxiosError>();
+
+  const { fetchData: fetchInstallations } = useContext(InstallationsContext);
+  const { fetchData: fetchGroups } = useContext(GroupContext);
 
-  const { fetchData } = useContext(InstallationsContext);
   const { getCurrentUser } = useContext(UserContext);
 
   const readOnly = !getCurrentUser().hasWriteAccess;
@@ -66,9 +66,15 @@ const InstallationForm = (props: I_InstallationFormProps) => {
     onSubmit: (formikValues) => {
       handleSubmit(values, formikValues)
         .then(() => {
-          fetchData();
+          setOpen(true);
+          additionalButtons && additionalButtons.length > 0
+            ? fetchGroups()
+            : fetchInstallations();
         })
-        .catch((err) => {});
+        .catch((err) => {
+          setError(err);
+          setOpen(true);
+        });
     },
     validationSchema,
   });
@@ -150,7 +156,7 @@ const InstallationForm = (props: I_InstallationFormProps) => {
 
   return (
     <form onSubmit={formik.handleSubmit}>
-      <IePropertyGrid rows={rows} />
+      <InnovenergyPropertyGrid rows={rows} />
       <Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
         {/*{hasMoveButton && !readOnly && <MoveDialog values={values} />}*/}
         {!readOnly &&
@@ -175,10 +181,14 @@ const InstallationForm = (props: I_InstallationFormProps) => {
         onClose={handleClose}
       >
         <Alert onClose={handleClose} severity="success" sx={{ width: "100%" }}>
-          <FormattedMessage
+          {error ? (
-            id="updatedSuccessfully"
+            error.message
-            defaultMessage="Updated successfully"
+          ) : (
-          />
+            <FormattedMessage
+              id="updatedSuccessfully"
+              defaultMessage="Updated successfully"
+            />
+          )}
         </Alert>
       </Snackbar>
     </form>

typescript/Frontend/src/components/Installations/ExampleLogData.tsx

@@ -1,492 +0,0 @@
-import { I_GraphData } from "../../util/types";
-
-export type Datum = string | number | boolean | Array<string>;
-type LogData = Record<string, Datum>;
-
-export type TimeSeries = Record<number, LogData>;
-
-export const timeSeries: TimeSeries = {
-  1673427378: {
-    "TruConvertAc/Ac/Current": 124,
-    "TruConvertAc/Ac/Voltage": 200,
-    "TruConvertAc/Ac/Phi": 2.89,
-    "TruConvertAc/Frequency": 2.89,
-  },
-  1674427380: {
-    "TruConvertAc/Ac/Current": 150,
-    "TruConvertAc/Ac/Voltage": 120,
-    "TruConvertAc/Ac/Phi": 3.21,
-    "TruConvertAc/Frequency": 2.41,
-  },
-  1675427382: {
-    "TruConvertAc/Ac/Current": 153,
-    "TruConvertAc/Ac/Voltage": 140,
-    "TruConvertAc/Ac/Phi": 3.9,
-    "TruConvertAc/Frequency": 4.41,
-  },
-};
-
-const exampleLogData: I_GraphData[] = [
-  {
-    TimeStamp: "1673427378",
-    Devices: [
-      {
-        Name: "TruConvertAc",
-        Type: "Inverter",
-        Ac: [
-          {
-            Current: 2.85,
-            Voltage: 236.2,
-            Phi: 2.896,
-          },
-          {
-            Current: 2.87,
-            Voltage: 234.5,
-            Phi: 2.793,
-          },
-          {
-            Current: 2.65,
-            Voltage: 240.6,
-            Phi: 2.941,
-          },
-        ],
-        Frequency: 50.02,
-        Dc: {
-          Current: -2.254,
-          Voltage: 869,
-        },
-        Alarms: [],
-        MainState: "Operation",
-      },
-      {
-        Name: "TruConvertDc",
-        Type: "DcDc",
-        Dc: {
-          Current: -2.017,
-          Voltage: 868,
-        },
-        Dc48: {
-          Current: -31,
-          Voltage: 55.9,
-        },
-        Warnings: [],
-        Alarms: [],
-        "DC Power": -1751,
-      },
-      {
-        Name: "EmuMeter",
-        Type: "Grid",
-        Ac: [
-          {
-            Current: 15.658,
-            Voltage: 236.3,
-            Phi: 0.318,
-          },
-          {
-            Current: 14.052,
-            Voltage: 234.8,
-            Phi: 0.2,
-          },
-          {
-            Current: 9.046,
-            Voltage: 240.4,
-            Phi: 0.142,
-          },
-        ],
-        Frequency: 50,
-      },
-      {
-        Name: "EmuMeter",
-        Type: "AcInToAcOut",
-        Ac: [
-          {
-            Current: 15.658,
-            Voltage: 236.3,
-            Phi: 0.318,
-          },
-          {
-            Current: 14.052,
-            Voltage: 234.8,
-            Phi: 0.2,
-          },
-          {
-            Current: 9.046,
-            Voltage: 240.4,
-            Phi: 0.142,
-          },
-        ],
-        Frequency: 50,
-      },
-      {
-        Name: "AMPT",
-        Type: "PvOnDc",
-        Dc: {
-          Current: 0.229,
-          Voltage: 921.855,
-        },
-      },
-      {
-        Name: "48TL Battery",
-        Type: "Battery",
-        Dc48: {
-          Current: 38.56,
-          Voltage: 53.29,
-        },
-        Alarms: [],
-        Warnings: [],
-        Soc: 21.6,
-        HeaterOn: true,
-        EocReached: false,
-        BatteryCold: false,
-        Temperature: 265.3,
-      },
-    ],
-  },
-  {
-    TimeStamp: "1673427380",
-    Devices: [
-      {
-        Name: "TruConvertAc",
-        Type: "Inverter",
-        Ac: [
-          {
-            Current: 3.01,
-            Voltage: 235.6,
-            Phi: 2.941,
-          },
-          {
-            Current: 3.04,
-            Voltage: 234.4,
-            Phi: 2.739,
-          },
-          {
-            Current: 2.48,
-            Voltage: 241.1,
-            Phi: 2.765,
-          },
-        ],
-        Frequency: 50.02,
-        Dc: {
-          Current: -2.215,
-          Voltage: 868,
-        },
-        Alarms: [],
-        MainState: "Operation",
-      },
-      {
-        Name: "TruConvertDc",
-        Type: "DcDc",
-        Dc: {
-          Current: -1.953,
-          Voltage: 868,
-        },
-        Dc48: {
-          Current: -30,
-          Voltage: 55.9,
-        },
-        Warnings: [],
-        Alarms: [],
-        "DC Power": -1695,
-      },
-      {
-        Name: "EmuMeter",
-        Type: "Grid",
-        Ac: [
-          {
-            Current: 15.658,
-            Voltage: 236.3,
-            Phi: 0.318,
-          },
-          {
-            Current: 14.052,
-            Voltage: 234.8,
-            Phi: 0.2,
-          },
-          {
-            Current: 9.046,
-            Voltage: 240.4,
-            Phi: 0.142,
-          },
-        ],
-        Frequency: 50,
-      },
-      {
-        Name: "EmuMeter",
-        Type: "AcInToAcOut",
-        Ac: [
-          {
-            Current: 15.658,
-            Voltage: 236.3,
-            Phi: 0.318,
-          },
-          {
-            Current: 14.052,
-            Voltage: 234.8,
-            Phi: 0.2,
-          },
-          {
-            Current: 9.046,
-            Voltage: 240.4,
-            Phi: 0.142,
-          },
-        ],
-        Frequency: 50,
-      },
-      {
-        Name: "AMPT",
-        Type: "PvOnDc",
-        Dc: {
-          Current: 0.229,
-          Voltage: 921.855,
-        },
-      },
-      {
-        Name: "48TL Battery",
-        Type: "Battery",
-        Dc48: {
-          Current: 38.51,
-          Voltage: 53.29,
-        },
-        Alarms: [],
-        Warnings: [],
-        Soc: 21.6,
-        HeaterOn: true,
-        EocReached: false,
-        BatteryCold: false,
-        Temperature: 265.3,
-      },
-    ],
-  },
-  {
-    TimeStamp: "1673427381",
-    Devices: [
-      {
-        Name: "TruConvertAc",
-        Type: "Inverter",
-        Ac: [
-          {
-            Current: 0.4,
-            Voltage: 237.2,
-            Phi: 1.4,
-          },
-          {
-            Current: 0.55,
-            Voltage: 235.6,
-            Phi: 1.551,
-          },
-          {
-            Current: 0.44,
-            Voltage: 241.7,
-            Phi: 1.501,
-          },
-        ],
-        Frequency: 50.02,
-        Dc: {
-          Current: 0.007,
-          Voltage: 849,
-        },
-        Alarms: [],
-        MainState: "Operation",
-      },
-      {
-        Name: "TruConvertDc",
-        Type: "DcDc",
-        Dc: {
-          Current: 0.153,
-          Voltage: 849,
-        },
-        Dc48: {
-          Current: 3,
-          Voltage: 52.0,
-        },
-        Warnings: [],
-        Alarms: [],
-        "DC Power": 130,
-      },
-      {
-        Name: "EmuMeter",
-        Type: "Grid",
-        Ac: [
-          {
-            Current: 15.658,
-            Voltage: 236.3,
-            Phi: 0.318,
-          },
-          {
-            Current: 14.052,
-            Voltage: 234.8,
-            Phi: 0.2,
-          },
-          {
-            Current: 9.046,
-            Voltage: 240.4,
-            Phi: 0.142,
-          },
-        ],
-        Frequency: 50,
-      },
-      {
-        Name: "EmuMeter",
-        Type: "AcInToAcOut",
-        Ac: [
-          {
-            Current: 15.658,
-            Voltage: 236.3,
-            Phi: 0.318,
-          },
-          {
-            Current: 14.052,
-            Voltage: 234.8,
-            Phi: 0.2,
-          },
-          {
-            Current: 9.046,
-            Voltage: 240.4,
-            Phi: 0.142,
-          },
-        ],
-        Frequency: 50,
-      },
-      {
-        Name: "AMPT",
-        Type: "PvOnDc",
-        Dc: {
-          Current: 0.229,
-          Voltage: 921.855,
-        },
-      },
-      {
-        Name: "48TL Battery",
-        Type: "Battery",
-        Dc48: {
-          Current: 6.14,
-          Voltage: 51.96,
-        },
-        Alarms: [],
-        Warnings: [],
-        Soc: 21.6,
-        HeaterOn: true,
-        EocReached: false,
-        BatteryCold: false,
-        Temperature: 265.3,
-      },
-    ],
-  },
-  {
-    TimeStamp: "1673427383",
-    Devices: [
-      {
-        Name: "TruConvertAc",
-        Type: "Inverter",
-        Ac: [
-          {
-            Current: 1.16,
-            Voltage: 237.7,
-            Phi: 0.376,
-          },
-          {
-            Current: 1.25,
-            Voltage: 236.0,
-            Phi: 0.707,
-          },
-          {
-            Current: 0.98,
-            Voltage: 242.1,
-            Phi: 0.246,
-          },
-        ],
-        Frequency: 50.02,
-        Dc: {
-          Current: 0.847,
-          Voltage: 847,
-        },
-        Alarms: [],
-        MainState: "Operation",
-      },
-      {
-        Name: "TruConvertDc",
-        Type: "DcDc",
-        Dc: {
-          Current: 0.979,
-          Voltage: 846,
-        },
-        Dc48: {
-          Current: 18,
-          Voltage: 51.2,
-        },
-        Warnings: [],
-        Alarms: [],
-        "DC Power": 828,
-      },
-      {
-        Name: "EmuMeter",
-        Type: "Grid",
-        Ac: [
-          {
-            Current: 12.563,
-            Voltage: 237.2,
-            Phi: 0.376,
-          },
-          {
-            Current: 10.913,
-            Voltage: 235.6,
-            Phi: 0.246,
-          },
-          {
-            Current: 5.983,
-            Voltage: 241.2,
-            Phi: 0.142,
-          },
-        ],
-        Frequency: 50,
-      },
-      {
-        Name: "EmuMeter",
-        Type: "AcInToAcOut",
-        Ac: [
-          {
-            Current: 12.563,
-            Voltage: 237.2,
-            Phi: 0.376,
-          },
-          {
-            Current: 10.913,
-            Voltage: 235.6,
-            Phi: 0.246,
-          },
-          {
-            Current: 5.983,
-            Voltage: 241.2,
-            Phi: 0.142,
-          },
-        ],
-        Frequency: 50,
-      },
-      {
-        Name: "AMPT",
-        Type: "PvOnDc",
-        Dc: {
-          Current: 0.229,
-          Voltage: 921.855,
-        },
-      },
-      {
-        Name: "48TL Battery",
-        Type: "Battery",
-        Dc48: {
-          Current: -7.99,
-          Voltage: 51.31,
-        },
-        Alarms: [],
-        Warnings: [],
-        Soc: 21.6,
-        HeaterOn: true,
-        EocReached: false,
-        BatteryCold: false,
-        Temperature: 265.3,
-      },
-    ],
-  },
-];
-
-export default exampleLogData;

typescript/Frontend/src/components/Installations/InstallationList.tsx

@@ -1,13 +1,7 @@
 import List from "@mui/material/List";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
-import {
+import { Alert, CircularProgress, Grid, useTheme } from "@mui/material";
-  Alert,
-  CircularProgress,
-  Divider,
-  Grid,
-  useTheme,
-} from "@mui/material";
 import { Link } from "react-router-dom";
 import useRouteMatch from "../../hooks/useRouteMatch";
 import routes from "../../routes.json";
@@ -21,14 +15,6 @@ interface InstallationListProps {
   searchQuery: string;
 }
 
-const getPathWithoutId = (path?: string) => {
-  if (path) {
-    const splitString = path.split(":");
-    return splitString[0];
-  }
-  return routes.installation;
-};
-
 const filterData = (
   searchQuery: string,
   data: I_Installation[] | undefined
@@ -45,15 +31,12 @@ const filterData = (
 
 const InstallationList = (props: InstallationListProps) => {
   const { fetchData, data, loading, error } = useContext(InstallationsContext);
-
   const filteredData = filterData(props.searchQuery, data);
-
   const routeMatch = useRouteMatch([
     routes.installations + routes.list + routes.installation + ":id",
     routes.installations + routes.list + routes.liveView + ":id",
     routes.installations + routes.list + routes.log + ":id",
   ]);
-
   const theme = useTheme();
 
   useEffect(() => {
@@ -108,13 +91,13 @@ const InstallationList = (props: InstallationListProps) => {
                     borderStyle: "solid",
                     backgroundColor: theme.palette.primary.dark,
                     "&.Mui-selected": {
-                      backgroundColor: colors.orangeSelected,
+                      backgroundColor: theme.palette.secondary.main,
                     },
                     ":hover": {
-                      backgroundColor: colors.orangeHover,
+                      backgroundColor: theme.palette.secondary.light,
                     },
                     "&.Mui-selected:hover": {
-                      backgroundColor: colors.orangeSelected,
+                      backgroundColor: theme.palette.secondary.main,
                     },
                   }}
                 >

typescript/Frontend/src/components/Installations/InstallationTabs.tsx

@@ -5,14 +5,13 @@ import routes from "../../routes.json";
 import useRouteMatch from "../../hooks/useRouteMatch";
 import { useIntl } from "react-intl";
 import InnovenergyTab from "../Layout/InnovenergyTab";
-import InnovenergyTabBorder from "../Layout/InnovenergyTab";
 import InnovenergyTabs from "components/Layout/InnovenergyTabs";
 import { useTheme } from "@mui/material";
-import { red } from "@mui/material/colors";
 import { colors } from "index";
 
 const InstallationTabs = () => {
   const theme = useTheme();
+  const intl = useIntl();
   const routeMatch = useRouteMatch([
     routes.installations + routes.list + routes.installation + ":id",
     routes.installations + routes.list + routes.liveView + ":id",
@@ -20,7 +19,6 @@ const InstallationTabs = () => {
   ]);
 
   const id = routeMatch?.params?.id;
-  const intl = useIntl();
 
   if (id) {
     return (

typescript/Frontend/src/components/Installations/Installations.tsx

@@ -1,13 +1,13 @@
-import { Grid, colors } from "@mui/material";
+import { Grid } from "@mui/material";
 import { Routes, Route } from "react-router";
-import LiveView from "./LiveView";
+import LiveView from "./LiveView/LiveView";
 import InstallationTabs from "./InstallationTabs";
 import Log from "./Log/Log";
 import routes from "../../routes.json";
 import InstallationsContextProvider from "../Context/InstallationsContextProvider";
 import SearchSidebar from "../Layout/Search";
 import InstallationList from "./InstallationList";
-import Installation from "./Installation";
+import Installation from "./Detail/Installation";
 import CheckboxTree from "./Log/CheckboxTree";
 import LogContextProvider from "../Context/LogContextProvider";
 import useRouteMatch from "../../hooks/useRouteMatch";
@@ -27,7 +27,6 @@ const Installations = () => {
   const id = routeMatch?.params?.id;
 
   useEffect(() => {
-    // TODO remove if
     getInstallation(id);
   }, [id]);
 

typescript/Frontend/src/components/Installations/LiveView/LiveView.tsx

@@ -1,6 +1,5 @@
-import TopologyView from "./Log/TopologyView";
+import TopologyView from "./TopologyView";
 import { Box, useTheme } from "@mui/material";
-import { colors } from "../../index";
 
 const LiveView = () => {
   const theme = useTheme();
@@ -8,7 +7,7 @@ const LiveView = () => {
     <Box
       sx={{
         py: 3,
-        bgcolor: colors.greyDark,
+        bgcolor: theme.palette.primary.dark,
         px: 1,
         borderLeft: 2,
         borderRight: 2,

typescript/Frontend/src/components/Installations/LiveView/TopologyBox.tsx

@@ -1,14 +1,14 @@
 import { Box } from "@mui/material";
 import { getBoxColor } from "../../../util/graph.util";
 
-export interface BoxDataValue {
+export interface I_BoxDataValue {
   unit: string;
   value: string | number;
 }
 
 export type BoxData = {
   label: string;
-  values: BoxDataValue[];
+  values: I_BoxDataValue[];
 };
 
 export type TopologyBoxProps = {

typescript/Frontend/src/components/Installations/LiveView/TopologyView.tsx

@@ -1,4 +1,4 @@
-import { Alert, Box, useTheme } from "@mui/material";
+import { Alert, Box } from "@mui/material";
 import TopologyColumn from "./TopologyColumn";
 import { TimeSpan, UnixTime } from "../../../dataCache/time";
 import {
@@ -15,7 +15,6 @@ import { S3CredentialsContext } from "../../Context/S3CredentialsContextProvider
 const TopologyView = () => {
   const [values, setValues] = useState<TopologyValues | null>(null);
   const { fetchData } = useContext(S3CredentialsContext);
-  const theme = useTheme();
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -225,7 +224,6 @@ const TopologyView = () => {
       />
     </Alert>
   );
-  return <div>TopologyView</div>;
 };
 
 export default TopologyView;

typescript/Frontend/src/components/Installations/Log/CheckboxTree.tsx

@@ -1,5 +1,5 @@
-import { TreeItem, TreeView } from "@mui/lab";
+import { TreeView } from "@mui/lab";
-import { Checkbox, Divider, useTheme } from "@mui/material";
+import { Checkbox } from "@mui/material";
 import { useContext, ReactNode } from "react";
 import { LogContext } from "../../Context/LogContextProvider";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
@@ -7,17 +7,12 @@ import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import useRouteMatch from "../../../hooks/useRouteMatch";
 import routes from "../../../routes.json";
 import React from "react";
-import { colors } from "index";
+import InnovenergyTreeItem from "../../Layout/InnovenergyTreeItem";
-import InnovEnergyTreeItem from "../../Layout/InnovEnergyTreeItem";
 
-export interface ToggleElement {
+export interface I_TreeElement {
-  [key: string]: boolean;
-}
-
-export interface TreeElement {
   id: string;
   name: string;
-  children: TreeElement[];
+  children: I_TreeElement[];
   checked?: boolean;
 }
 
@@ -28,13 +23,13 @@ const CheckboxTree = () => {
     routes.installations + routes.list + routes.log + ":id",
   ]);
 
-  const getNodes = (element: TreeElement): null | ReactNode => {
+  const getNodes = (element: I_TreeElement): null | ReactNode => {
     return element.children.length > 0 ? renderTree(element.children) : null;
   };
 
   const handleClick = (
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-    element: TreeElement,
+    element: I_TreeElement,
     checked?: string
   ) => {
     if (checked) {
@@ -50,12 +45,13 @@ const CheckboxTree = () => {
   ) => {
     event.stopPropagation();
   };
-  const renderTree = (data: TreeElement[]): ReactNode => {
+
+  const renderTree = (data: I_TreeElement[]): ReactNode => {
     return data.map((element) => {
       const checked = checkedToggles.find((toggle) => element.id === toggle);
       const splitName = element.name.split("/");
       return (
-        <InnovEnergyTreeItem
+        <InnovenergyTreeItem
           id={"checkbox-tree-" + element.name}
           key={element.name}
           nodeId={element.name}
@@ -77,7 +73,7 @@ const CheckboxTree = () => {
           }
         >
           {getNodes(element)}
-        </InnovEnergyTreeItem>
+        </InnovenergyTreeItem>
       );
     });
   };

typescript/Frontend/src/components/Installations/Log/DatePicker/DateRangePicker.tsx

@@ -3,21 +3,21 @@ import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import dayjs from "dayjs";
 import { FormattedMessage } from "react-intl";
+import { createTimes } from "../../../../util/graph.util";
+import { TimeRange, UnixTime } from "../../../../dataCache/time";
+import { useTheme } from "@mui/material";
+import { colors } from "../../../../index";
 import ShortcutButton from "./ShortcutButton";
-import { createTimes } from "../../../util/graph.util";
-import { TimeRange, UnixTime } from "../../../dataCache/time";
-import { TextField, useTheme } from "@mui/material";
-import { colors } from "../../..";
 
-interface DateRangePickerProps {
+interface I_DateRangePickerProps {
   setRange: (value: Date[]) => void;
   range: Date[];
   getCacheSeries: (xaxisRange0: Date, xaxisRange1: Date) => void;
 }
 
-const DateRangePicker = (props: DateRangePickerProps) => {
+const DateRangePicker = (props: I_DateRangePickerProps) => {
-  const theme = useTheme();
   const { setRange, range, getCacheSeries } = props;
+  const theme = useTheme();
 
   const handleChange = (fromDate: Date, toDate: Date) => {
     const timeRange = createTimes(

typescript/Frontend/src/components/Installations/Log/DatePicker/ShortcutButton.tsx

@@ -1,17 +1,15 @@
-import { colors } from "@mui/material";
+import { UnixTime, TimeSpan } from "../../../../dataCache/time";
-import { UnixTime, TimeSpan } from "../../../dataCache/time";
+import { createTimes } from "../../../../util/graph.util";
-import { createTimes } from "../../../util/graph.util";
+import InnovenergyButton from "../../../Layout/InnovenergyButton";
-import InnovenergyButton from "../../Layout/InnovenergyButton";
-import { red } from "@mui/material/colors";
 
-interface ShortcutButtonProps {
+interface I_ShortcutButtonProps {
   setRange: (value: Date[]) => void;
   getCacheSeries: (xaxisRange0: Date, xaxisRange1: Date) => void;
   dayRange: number;
   children?: React.ReactNode;
 }
 
-const ShortcutButton = (props: ShortcutButtonProps) => {
+const ShortcutButton = (props: I_ShortcutButtonProps) => {
   return (
     <InnovenergyButton
       onClick={() => {

typescript/Frontend/src/components/Installations/Log/Log.tsx

@@ -19,6 +19,7 @@ const Log = () => {
         borderBottomLeftRadius: 4,
         borderBottomRightRadius: 4,
         borderColor: theme.palette.text.disabled,
+        overflowX: "auto",
       }}
     >
       <ScalarGraph />

typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx

@@ -1,50 +1,51 @@
 import Plot from "react-plotly.js";
-import { DataRecord, RecordSeries } from "../../../dataCache/data";
+import { RecordSeries } from "../../../dataCache/data";
 import {
-  GraphData,
+  I_GraphData,
   createTimes,
   getTreeElements,
   isNumeric,
-  parseCsv,
   stringToColor,
   transformToBarGraphData,
 } from "../../../util/graph.util";
 import { TimeRange, TimeSpan, UnixTime } from "../../../dataCache/time";
 import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { BehaviorSubject, startWith, throttleTime, withLatestFrom } from "rxjs";
-import { S3Access } from "../../../dataCache/S3/S3Access";
+import DataCache from "../../../dataCache/dataCache";
-import DataCache, { FetchResult } from "../../../dataCache/dataCache";
 import { LogContext } from "../../Context/LogContextProvider";
 import { isDefined } from "../../../dataCache/utils/maybe";
-import { Data, Icons, Layout, PlotRelayoutEvent, relayout } from "plotly.js";
+import { Data, Layout, PlotRelayoutEvent } from "plotly.js";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { FormattedMessage } from "react-intl";
-import DateRangePicker from "./DateRangePicker";
+import DateRangePicker from "./DatePicker/DateRangePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers";
-import { Alert, useTheme } from "@mui/material";
+import { Alert } from "@mui/material";
 import { S3CredentialsContext } from "../../Context/S3CredentialsContextProvider";
 
 const NUMBER_OF_NODES = 100;
 
 const ScalarGraph = () => {
   const timeRange = createTimes(
-    UnixTime.now()
+    UnixTime.now().rangeBefore(TimeSpan.fromDays(1)),
-      /* .fromTicks(1682085650) */
-      .rangeBefore(TimeSpan.fromDays(1)),
     NUMBER_OF_NODES
   );
+
   const [timeSeries, setTimeSeries] = useState<RecordSeries>([]);
+  const [plotTitles, setPlotTitles] = useState<string[]>([]);
   const [range, setRange] = useState([
     timeRange[0].toDate(),
     timeRange[timeRange.length - 1].toDate(),
   ]);
-  const [plotTitles, setPlotTitles] = useState<string[]>([]);
 
   const { toggles, setToggles, checkedToggles } = useContext(LogContext);
   const { fetchData } = useContext(S3CredentialsContext);
 
   const times$ = useMemo(() => new BehaviorSubject(timeRange), []);
 
+  const cache = useMemo(() => {
+    return new DataCache(fetchData, TimeSpan.fromSeconds(2));
+  }, []);
+
   useEffect(() => {
     const subscription = cache.gotData
       .pipe(
@@ -57,8 +58,6 @@ const ScalarGraph = () => {
         setTimeSeries(timeSeries);
 
         const toggleValues = timeSeries.find((timeStamp) => timeStamp.value);
-        console.log("toggles", timeSeries, toggleValues);
-
         if (toggles === null && toggleValues && toggleValues.value) {
           const treeElements = getTreeElements(toggleValues.value);
           setToggles(treeElements);
@@ -67,11 +66,7 @@ const ScalarGraph = () => {
     return () => subscription.unsubscribe();
   }, [toggles]);
 
-  const cache = useMemo(() => {
+  const transformToGraphData = (input: RecordSeries): I_GraphData => {
-    return new DataCache(fetchData, TimeSpan.fromSeconds(2));
-  }, []);
-
-  const transformToGraphData = (input: RecordSeries): GraphData => {
     const transformedObject: any = {};
 
     input.forEach((item) => {
@@ -95,6 +90,7 @@ const ScalarGraph = () => {
         setPlotTitles(Object.keys(transformedObject));
       }
     });
+
     return Object.keys(transformedObject).length > 0
       ? transformedObject
       : plotTitles.reduce(
@@ -105,7 +101,7 @@ const ScalarGraph = () => {
               y: [],
             },
           }),
-          {} as GraphData
+          {} as I_GraphData
         );
   };
 
@@ -138,9 +134,7 @@ const ScalarGraph = () => {
     [getCacheSeries]
   );
 
-  const theme = useTheme();
   const renderGraphs = () => {
-    console.log("toggles", toggles);
     if (checkedToggles.length > 0) {
       const coordinateTimeSeries = transformToGraphData(timeSeries);
       const visibleGraphs = Object.keys(coordinateTimeSeries).filter((path) => {
@@ -158,7 +152,6 @@ const ScalarGraph = () => {
             </LocalizationProvider>
             {visibleGraphs.map((path) => {
               const isScalar = isNumeric(coordinateTimeSeries[path].y[0]);
-              console.log("graphdata", timeSeries, coordinateTimeSeries);
 
               const data = isScalar
                 ? [
@@ -212,6 +205,15 @@ const ScalarGraph = () => {
           </div>
         );
       }
+    } else if (checkedToggles.length === 0) {
+      return (
+        <Alert sx={{ mt: 2 }} severity="info">
+          <FormattedMessage
+            id="makeASelection"
+            defaultMessage="Please make a selection on the left"
+          />
+        </Alert>
+      );
     } else if (toggles === null) {
       return (
         <Alert sx={{ mt: 2 }} severity="error">
@@ -222,14 +224,7 @@ const ScalarGraph = () => {
         </Alert>
       );
     }
-    return (
+    return null;
-      <Alert sx={{ mt: 2 }} severity="info">
-        <FormattedMessage
-          id="makeASelection"
-          defaultMessage="Please make a selection on the left"
-        />
-      </Alert>
-    );
   };
 
   return <>{renderGraphs()}</>;

typescript/Frontend/src/components/Installations/Log/TopologyBox.scss

@@ -1,10 +0,0 @@
-.topologyBoxTitle{
-    margin-block-start: "0";
-    margin-block-end: "0";
-    background-color: titleColor;
-    padding: "5px";
-    border-top-left-radius: "4px";
-    border-top-right-radius: "4px";
-    display: "flex";
-    justify-content: "center";
-  }

typescript/Frontend/src/components/Layout/Detail.tsx

@@ -1,60 +0,0 @@
-import { Box, CircularProgress, Alert, useTheme } from "@mui/material";
-import { AxiosError } from "axios";
-import { useState, useEffect, FC } from "react";
-import { useParams } from "react-router-dom";
-import axiosConfig from "../../config/axiosConfig";
-export interface I_FormProps<T> {
-  values: T;
-  id: string;
-  hasMoveButton?: boolean;
-}
-interface I_DetailProps<T> {
-  formComponent: FC<I_FormProps<T>>;
-  route: string;
-  hasMoveButton?: boolean;
-}
-const Detail = <T extends { id: number }>(props: I_DetailProps<T>) => {
-  const { id } = useParams();
-  const { formComponent: FormComponent, route, hasMoveButton } = props;
-  const [values, setValues] = useState<T>();
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<AxiosError>();
-
-  useEffect(() => {
-    setLoading(true);
-    axiosConfig
-      .get(route + id)
-      .then((res) => {
-        setValues(res.data);
-        setLoading(false);
-      })
-      .catch((err: AxiosError) => {
-        setError(err);
-        setLoading(false);
-      });
-  }, [id, route]);
-  const theme = useTheme();
-
-  if (values && values.id && values.id.toString() === id) {
-    return (
-      <FormComponent values={values} id={id} hasMoveButton={hasMoveButton} />
-    );
-  } else if (loading) {
-    return (
-      <Box
-        sx={{ width: 1 / 2, justifyContent: "center", display: "flex", mt: 10 }}
-      >
-        <CircularProgress sx={{ m: 2, color: theme.palette.secondary.main }} />
-      </Box>
-    );
-  } else if (error) {
-    return (
-      <Alert severity="error" sx={{ mt: 1 }}>
-        {error.message}
-      </Alert>
-    );
-  }
-  return null;
-};
-
-export default Detail;

typescript/Frontend/src/components/Layout/InnovenergyButton.tsx

@@ -1,4 +1,4 @@
-import { Button, SxProps, Theme, colors, useTheme } from "@mui/material";
+import { Button, SxProps, Theme, useTheme } from "@mui/material";
 import { ReactNode } from "react";
 
 interface I_InnovenergyButtonProps {

typescript/Frontend/src/components/Layout/InnovenergyList.tsx

@@ -1,12 +1,12 @@
 import { List, useTheme } from "@mui/material";
 import { ReactNode } from "react";
 
-interface InnovenergyListProps {
+interface I_InnovenergyListProps {
   id: string;
   children: ReactNode;
 }
 
-const InnovenergyList = (props: InnovenergyListProps) => {
+const InnovenergyList = (props: I_InnovenergyListProps) => {
   const theme = useTheme();
   return (
     <List
@@ -18,7 +18,6 @@ const InnovenergyList = (props: InnovenergyListProps) => {
         pb: 0,
       }}
       component="nav"
-      aria-labelledby="nested-list-subheader"
     >
       {props.children}
     </List>

typescript/Frontend/src/components/Layout/InnovenergyPropertyGrid.tsx

@@ -0,0 +1,68 @@
+import { InputLabel, TextField } from "@mui/material";
+import { colors } from "../../index";
+import { I_InnovenergyTextfieldProps } from "./InnovenergyTextfield";
+
+interface I_InnovenergyPropertyGridProps {
+  rows: I_InnovenergyTextfieldProps[];
+}
+
+export const InnovenergyPropertyGrid = (
+  props: I_InnovenergyPropertyGridProps
+) => {
+  return (
+    <div style={{ display: "flex", flexDirection: "row" }}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-around",
+          marginRight: "20px",
+        }}
+      >
+        {props.rows.map((prop) => (
+          <InputLabel key={prop.label}>{prop.label}</InputLabel>
+        ))}
+      </div>
+      <div>
+        {props.rows.map((element) => {
+          return (
+            <TextField
+              key={element.label}
+              color="secondary"
+              id={element.id}
+              variant="outlined"
+              name={element.name}
+              type={element.type}
+              fullWidth
+              sx={{
+                input: {
+                  bgcolor: "white",
+                  border: 0.5,
+                  borderRadius: 1,
+                  height: 15,
+                },
+                my: 0.5,
+                ".Mui-focused": {
+                  borderRadius: 1,
+                },
+                "MuiInputLabel-root": {
+                  color: colors.black,
+                },
+              }}
+              value={element.value || ""}
+              onChange={element.handleChange}
+              InputProps={{
+                readOnly: element.readOnly,
+              }}
+              disabled={element.disabled}
+              helperText={element.helperText}
+              error={element.error}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default InnovenergyPropertyGrid;

typescript/Frontend/src/components/Layout/InnovenergySnackbar.tsx

@@ -1,13 +1,13 @@
 import { Alert, Snackbar } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 
-interface InnovenergySnackbarProps {
+interface I_InnovenergySnackbarProps {
   open: boolean;
   setOpen: (value: boolean) => void;
   error?: any;
 }
 
-const InnovenergySnackbar = (props: InnovenergySnackbarProps) => {
+const InnovenergySnackbar = (props: I_InnovenergySnackbarProps) => {
   const { open, setOpen, error } = props;
 
   const handleClose = () => {

typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx

@@ -1,15 +1,15 @@
-import { SxProps, Tabs, Theme, useTheme } from "@mui/material";
+import { Tabs, useTheme } from "@mui/material";
 import { ReactNode } from "react";
 import { colors } from "index";
 
-interface AntTabsProps {
+interface I_AntTabsProps {
   id: string;
   value?: string;
   sx?: any;
   children: ReactNode;
 }
 
-const InnovenergyTabs = (props: AntTabsProps) => {
+const InnovenergyTabs = (props: I_AntTabsProps) => {
   const theme = useTheme();
   return (
     <Tabs
@@ -25,7 +25,6 @@ const InnovenergyTabs = (props: AntTabsProps) => {
         "&.Mui-selected": {
           color: colors.black,
           backgroundColor: theme.palette.primary.light,
-          borderColor: `#90A7c5 #90A7c5 #fff`,
         },
         "& .MuiTabs-indicator": {
           display: "flex",

typescript/Frontend/src/components/Layout/InnovenergyTextfield.tsx

@@ -1,17 +1,4 @@
-import {
+import { Grid, InputLabel, TextField } from "@mui/material";
-  Grid,
-  InputLabel,
-  Paper,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TextField,
-  useTheme,
-} from "@mui/material";
-import { colors } from "../../index";
 
 export interface I_InnovenergyTextfieldProps {
   id: string;
@@ -26,67 +13,7 @@ export interface I_InnovenergyTextfieldProps {
   error?: boolean;
 }
 
-export const IePropertyGrid = (props: {
-  rows: I_InnovenergyTextfieldProps[];
-}) => {
-  return (
-    <div style={{ display: "flex", flexDirection: "row" }}>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "space-around",
-          marginRight: "20px",
-        }}
-      >
-        {props.rows.map((prop) => (
-          <InputLabel key={prop.label}>{prop.label}</InputLabel>
-        ))}
-      </div>
-      <div>
-        {props.rows.map((element) => {
-          return (
-            <TextField
-              key={element.label}
-              color="secondary"
-              id={element.id}
-              variant="outlined"
-              name={element.name}
-              type={element.type}
-              fullWidth
-              sx={{
-                input: {
-                  bgcolor: "white",
-                  border: 0.5,
-                  borderRadius: 1,
-                  height: 15,
-                },
-                my: 0.5,
-                ".Mui-focused": {
-                  borderRadius: 1,
-                },
-                "MuiInputLabel-root": {
-                  color: colors.black,
-                },
-              }}
-              value={element.value || ""}
-              onChange={element.handleChange}
-              InputProps={{
-                readOnly: element.readOnly,
-              }}
-              disabled={element.disabled}
-              helperText={element.helperText}
-              error={element.error}
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-
 const InnovenergyTextfield = (props: I_InnovenergyTextfieldProps) => {
-  const theme = useTheme();
   return (
     <Grid container direction="row" alignItems="center" spacing={2}>
       <Grid item xs={3}>
@@ -107,7 +34,6 @@ const InnovenergyTextfield = (props: I_InnovenergyTextfieldProps) => {
               borderRadius: 1,
             },
             my: 0.5,
-            borderColor: "red",
           }}
           value={props.value || ""}
           onChange={props.handleChange}

typescript/Frontend/src/components/Layout/InnovenergyTreeItem.tsx

@@ -2,14 +2,14 @@ import { TreeItem, TreeItemProps } from "@mui/lab";
 import { colors } from "../../index";
 import { useTheme } from "@mui/material";
 
-const InnovEnergyTreeItem = (props: TreeItemProps) => {
+const InnovenergyTreeItem = (props: TreeItemProps) => {
   const theme = useTheme();
   return (
     <TreeItem
       id={props.id}
       nodeId={props.nodeId}
       label={props.label}
-      onClick={() => props.onClick}
+      onClick={props.onClick}
       sx={{
         ".MuiTreeItem-content": {
           py: "10px",
@@ -30,6 +30,7 @@ const InnovEnergyTreeItem = (props: TreeItemProps) => {
         },
         borderRadius: "4px",
         bgcolor: colors.greyDark,
+        ...props.sx,
       }}
     >
       {props.children}
@@ -37,4 +38,4 @@ const InnovEnergyTreeItem = (props: TreeItemProps) => {
   );
 };
 
-export default InnovEnergyTreeItem;
+export default InnovenergyTreeItem;

typescript/Frontend/src/components/Layout/LanguageSelect.tsx

@@ -1,12 +1,12 @@
 import { MenuItem, Select } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 
-interface LanguageSelectProps {
+interface I_LanguageSelectProps {
   language: string;
   setLanguage: (language: string) => void;
 }
 
-const LanguageSelect = (props: LanguageSelectProps) => {
+const LanguageSelect = (props: I_LanguageSelectProps) => {
   return (
     <Select
       color="secondary"

typescript/Frontend/src/components/Layout/LogoutButton.tsx

@@ -2,14 +2,15 @@ import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
 import axiosConfig from "../../config/axiosConfig";
 import InnovenergyButton from "./InnovenergyButton";
-import { colors } from "index";
+import { useTheme } from "@mui/material";
 
-interface LogoutButtonProps {
+interface I_LogoutButtonProps {
   removeToken: () => void;
 }
 
-const LogoutButton = (props: LogoutButtonProps) => {
+const LogoutButton = (props: I_LogoutButtonProps) => {
   const navigate = useNavigate();
+  const theme = useTheme();
 
   return (
     <InnovenergyButton
@@ -20,7 +21,11 @@ const LogoutButton = (props: LogoutButtonProps) => {
           props.removeToken();
         });
       }}
-      sx={{ mx: 1, bgcolor: colors.orangeSelected, textTransform: "none" }}
+      sx={{
+        mx: 1,
+        bgcolor: theme.palette.secondary.main,
+        textTransform: "none",
+      }}
     >
       <FormattedMessage id="logout" defaultMessage="Logout" />
     </InnovenergyButton>

typescript/Frontend/src/components/Layout/ModeButtons.tsx

@@ -27,10 +27,14 @@ const ModeButtons = () => {
       >
         <ToggleButton
           sx={{
-            color: "#707071",
+            color: theme.palette.text.secondary,
             "&.Mui-selected": {
-              bgcolor: theme.palette.primary.dark,
+              bgcolor: theme.palette.secondary.dark,
-              color: "#707071",
+              color: theme.palette.text.primary,
+            },
+            "&.Mui-selected:hover": {
+              bgcolor: theme.palette.secondary.dark,
+              color: theme.palette.text.primary,
             },
           }}
           id="mode-toggle-button-list"
@@ -42,10 +46,14 @@ const ModeButtons = () => {
         </ToggleButton>
         <ToggleButton
           sx={{
-            color: "#707071",
+            color: theme.palette.text.secondary,
             "&.Mui-selected": {
-              bgcolor: theme.palette.primary.dark,
+              bgcolor: theme.palette.secondary.dark,
-              color: "#707071",
+              color: theme.palette.text.primary,
+            },
+            "&.Mui-selected:hover": {
+              bgcolor: theme.palette.secondary.dark,
+              color: theme.palette.text.primary,
             },
           }}
           id="mode-toggle-button-tree"

typescript/Frontend/src/components/Layout/NavigationTabs.tsx

@@ -1,4 +1,4 @@
-import { FormattedMessage, useIntl } from "react-intl";
+import { FormattedMessage } from "react-intl";
 import { Link } from "react-router-dom";
 import useRouteMatch from "../../hooks/useRouteMatch";
 import routes from "../../routes.json";

typescript/Frontend/src/components/Layout/Search.tsx

@@ -2,7 +2,6 @@ import {
   OutlinedInputProps,
   TextField,
   TextFieldProps,
-  alpha,
   styled,
   useTheme,
 } from "@mui/material";
@@ -10,7 +9,7 @@ import { colors } from "index";
 import { FC, useState } from "react";
 import { useIntl } from "react-intl";
 
-interface SearchSidebarProps {
+interface I_SearchSidebarProps {
   listComponent: FC<{ searchQuery: string }>;
   id: string;
   height?: string;
@@ -45,11 +44,10 @@ const SearchInputTextfield = styled((props: TextFieldProps) => (
   },
 }));
 
-const SearchSidebar = (props: SearchSidebarProps) => {
+const SearchSidebar = (props: I_SearchSidebarProps) => {
   const { listComponent: ListComponent, id, height } = props;
   const [searchQuery, setSearchQuery] = useState("");
   const intl = useIntl();
-  const theme = useTheme();
 
   return (
     <div style={{ height: height ?? "750px", overflow: "hidden" }}>

typescript/Frontend/src/components/Users/AddUser.tsx

@@ -1,4 +1,4 @@
-import { Dialog, DialogTitle, IconButton, DialogContent, colors } from "@mui/material";
+import { Dialog, DialogTitle, IconButton, DialogContent } from "@mui/material";
 import { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import axiosConfig from "../../config/axiosConfig";
@@ -24,7 +24,7 @@ const AddUser = () => {
     <>
       <InnovenergyButton
         id="add-user-button"
-          sx={{ my: 1, }}
+        sx={{ my: 1 }}
         onClick={() => setOpen(true)}
       >
         <FormattedMessage id="addUser" defaultMessage="Create user" />
@@ -37,7 +37,6 @@ const AddUser = () => {
           ".MuiDialogContent-root": { overflowX: "hidden" },
           maxHeight: 500,
         }}
-        scroll="paper"
         fullWidth
         maxWidth="sm"
       >

typescript/Frontend/src/components/Users/User.tsx

@@ -1,4 +1,4 @@
-import { Box, CircularProgress, Alert, collapseClasses, useTheme } from "@mui/material";
+import { Box, CircularProgress, Alert, useTheme } from "@mui/material";
 import { AxiosError } from "axios";
 import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
@@ -8,10 +8,11 @@ import UserForm from "./UserForm";
 import { useIntl } from "react-intl";
 import { colors } from "../..";
 
-interface I_DetailProps {
+interface I_UserProps {
   hasMoveButton?: boolean;
 }
-const Detail = (props: I_DetailProps) => {
+
+const User = (props: I_UserProps) => {
   const { id } = useParams();
   const { locale } = useIntl();
   const [values, setValues] = useState<I_User>();
@@ -56,7 +57,7 @@ const Detail = (props: I_DetailProps) => {
           borderTopLeftRadius: 0,
           WebkitBorderTopRightRadius: 0,
           borderBottomLeftRadius: 4,
-          borderBottomRightRadius: 4, 
+          borderBottomRightRadius: 4,
           borderColor: theme.palette.text.disabled,
         }}
       >
@@ -68,7 +69,7 @@ const Detail = (props: I_DetailProps) => {
       <Box
         sx={{ width: 1 / 2, justifyContent: "center", display: "flex", mt: 10 }}
       >
-        <CircularProgress sx={{ m: 2 ,color: theme.palette.secondary.main}} />
+        <CircularProgress sx={{ m: 2, color: theme.palette.secondary.main }} />
       </Box>
     );
   } else if (error) {
@@ -81,4 +82,4 @@ const Detail = (props: I_DetailProps) => {
   return null;
 };
 
-export default Detail;
+export default User;

typescript/Frontend/src/components/Users/UserForm.tsx

@@ -11,17 +11,16 @@ import { useContext, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { I_User } from "../../util/user.util";
 import InnovenergyButton from "../Layout/InnovenergyButton";
-import InnovenergyTextfield, {
+import { I_InnovenergyTextfieldProps } from "../Layout/InnovenergyTextfield";
-  I_InnovenergyTextfieldProps,
-  IePropertyGrid,
-} from "../Layout/InnovenergyTextfield";
 import { UserContext } from "../Context/UserContextProvider";
 import { UsersContext } from "../Context/UsersContextProvider";
+import InnovenergyPropertyGrid from "../Layout/InnovenergyPropertyGrid";
 
 interface I_UserFormProps {
   handleSubmit: (formikValues: Partial<I_User>) => Promise<AxiosResponse>;
   values?: I_User;
 }
+
 const UserForm = (props: I_UserFormProps) => {
   const { values, handleSubmit } = props;
   const [open, setOpen] = useState(false);
@@ -100,7 +99,7 @@ const UserForm = (props: I_UserFormProps) => {
 
   return (
     <form onSubmit={formik.handleSubmit}>
-      <IePropertyGrid rows={rows} />
+      <InnovenergyPropertyGrid rows={rows} />
       <Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
         {loading && (
           <CircularProgress sx={{ color: theme.palette.secondary.main }} />
@@ -125,7 +124,6 @@ const UserForm = (props: I_UserFormProps) => {
           severity={error ? "error" : "success"}
           sx={{ width: "100%" }}
         >
-          {/* TODO how to handle err translation? */}
           {error ? (
             <FormattedMessage id="error" defaultMessage={error.message} />
           ) : (

typescript/Frontend/src/components/Users/UserList.tsx

@@ -28,11 +28,11 @@ const filterData = (searchQuery: string, data: I_User[] | undefined) => {
   return data;
 };
 
-interface UserListProps {
+interface I_UserListProps {
   searchQuery: string;
 }
 
-const UserList = (props: UserListProps) => {
+const UserList = (props: I_UserListProps) => {
   const { availableUsers } = useContext(UsersContext);
   const filteredData = filterData(props.searchQuery, availableUsers);
 
@@ -44,7 +44,6 @@ const UserList = (props: UserListProps) => {
       <List
         sx={{
           width: "100%",
-          bgcolor: "background.paper",
           position: "relative",
           overflow: "auto",
           py: 0,

typescript/Frontend/src/dataCache/data.ts

@@ -1,14 +1,14 @@
 import { Maybe } from "yup";
 import { Timestamped } from "./types";
 import { isDefined } from "./utils/maybe";
-import { CsvEntry } from "../util/graph.util";
+import { I_CsvEntry } from "../util/graph.util";
 
-export type DataRecord = Record<string, CsvEntry>;
+export type DataRecord = Record<string, I_CsvEntry>;
 
 export type DataPoint = Timestamped<Maybe<DataRecord>>;
 export type RecordSeries = Array<DataPoint>;
-export type PointSeries = Array<Timestamped<Maybe<CsvEntry>>>;
+export type PointSeries = Array<Timestamped<Maybe<I_CsvEntry>>>;
-export type DataSeries = Array<Maybe<CsvEntry>>;
+export type DataSeries = Array<Maybe<I_CsvEntry>>;
 
 export function getPoints(
   recordSeries: RecordSeries,

typescript/Frontend/src/dataCache/dataCache.ts

@@ -7,7 +7,7 @@ import { SkipListNode } from "./skipList/skipListNode";
 import { RecordSeries } from "./data";
 import { isUndefined, Maybe } from "./utils/maybe";
 import { isNumber } from "./utils/runtimeTypeChecking";
-import { CsvEntry } from "../util/graph.util";
+import { I_CsvEntry } from "../util/graph.util";
 
 export const FetchResult = {
   notAvailable: "N/A",
@@ -31,7 +31,7 @@ function reverseBits(x: number): number {
   return x >>> 0;
 }
 
-export default class DataCache<T extends Record<string, CsvEntry>> {
+export default class DataCache<T extends Record<string, I_CsvEntry>> {
   private readonly cache: SkipList<Maybe<T>> = new SkipList<Maybe<T>>();
   private readonly resolution: TimeSpan;
 
@@ -104,7 +104,7 @@ export default class DataCache<T extends Record<string, CsvEntry>> {
     const n = after.index - t;
     const pn = p + n;
 
-    let interpolated: Record<string, CsvEntry> = {};
+    let interpolated: Record<string, I_CsvEntry> = {};
 
     //What about string nodes? like Alarms
     for (const k of Object.keys(dataBefore)) {

typescript/Frontend/src/index.css

@@ -1,16 +1,17 @@
 body {
-  margin: 0;
+    margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
-  -webkit-font-smoothing: antialiased;
+    -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
 body {
-  background-color: #f3f4f7;
+    background-color: #f3f4f7;
 }

typescript/Frontend/src/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import "./index.css";
 import App from "./App";
+import "./index.css";
 import reportWebVitals from "./reportWebVitals";
 import { createTheme, ThemeProvider } from "@mui/material";
 import UserContextProvider from "./components/Context/UserContextProvider";
@@ -12,6 +12,7 @@ const root = ReactDOM.createRoot(
 
 export const colors = {
   black: "#000000",
+  darkGrey: "#707071",
   blueBlack: "#2b3e54",
   borderColor: "#a8b0be",
 
@@ -38,6 +39,7 @@ const theme = createTheme({
   palette: {
     text: {
       primary: colors.black,
+      secondary: colors.darkGrey,
       disabled: colors.borderColor,
     },
     primary: {

typescript/Frontend/src/library.scss

@@ -1 +0,0 @@
-$innovenergy-orange: #F59100;

typescript/Frontend/src/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

typescript/Frontend/src/tests/helper.js

@@ -1,14 +1,12 @@
-
+import { t } from "testcafe";
-import {Selector, t} from 'testcafe';
 
 export async function login(name, pw) {
-    await t
+  await t
-        .typeText('#username-textfield', name)
+    .typeText("#username-textfield", name)
-        .typeText('#password-textfield', pw)
+    .typeText("#password-textfield", pw)
-        .click('.MuiButtonBase-root') //todo id
+    .click(".MuiButtonBase-root"); //todo id
 }
 
 export async function logout() {
-    await t
+  await t.click(".MuiButtonBase-root");
-        .click('.MuiButtonBase-root');
 }

typescript/Frontend/src/util/graph.util.tsx

@@ -1,14 +1,14 @@
 import { Datum, TypedArray } from "plotly.js";
-import { TreeElement } from "../components/Installations/Log/CheckboxTree";
+import { I_TreeElement } from "../components/Installations/Log/CheckboxTree";
 import { TimeRange, UnixTime } from "../dataCache/time";
 import { DataPoint, DataRecord } from "../dataCache/data";
 import { isDefined } from "../dataCache/utils/maybe";
 import {
   BoxData,
-  BoxDataValue,
+  I_BoxDataValue,
-} from "../components/Installations/Log/TopologyBox";
+} from "../components/Installations/LiveView/TopologyBox";
 
-export interface GraphCoordinates {
+export interface I_GraphCoordinates {
   x: Datum[] | Datum[][] | TypedArray;
   y: Datum[] | Datum[][] | TypedArray;
   xaxis?: string;
@@ -32,8 +32,8 @@ export const createTimes = (
   return roundedRange.sample(oneSpan);
 };
 
-export interface GraphData {
+export interface I_GraphData {
-  [path: string]: GraphCoordinates;
+  [path: string]: I_GraphCoordinates;
 }
 
 // connections must have the word Connection in the prop name, so the topology works correctly
@@ -141,11 +141,12 @@ export const extractTopologyValues = (
   const timeSeriesValue = timeSeriesData.value;
   if (isDefined(timeSeriesValue)) {
     return Object.keys(topologyPaths).reduce((acc, topologyKey) => {
-      let topologyValues: BoxDataValue[];
+      let topologyValues: I_BoxDataValue[];
       const values = topologyPaths[topologyKey as keyof TopologyValues].map(
         (topologyPath) => timeSeriesValue[topologyPath]
       );
       switch (topologyKey as keyof TopologyValues) {
+        // special cases for certain connections should be extracted accordingly in this switch
         case "gridToAcInConnection":
           topologyValues = [
             values.reduce(
@@ -195,18 +196,17 @@ export const getHighestConnectionValue = (values: TopologyValues) =>
 
 export const getAmount = (
   highestConnectionValue: number,
-  values: BoxDataValue[]
+  values: I_BoxDataValue[]
 ) => {
   return Math.abs(values[0].value as number) / highestConnectionValue;
 };
 
-export interface CsvEntry {
+export interface I_CsvEntry {
   value: string | number;
   unit: string;
 }
 
 export const parseCsv = (text: string): DataRecord => {
-  console.log("parseText", text);
   const y = text
     .split(/\r?\n/)
     .filter((split) => split.length > 0)
@@ -215,11 +215,6 @@ export const parseCsv = (text: string): DataRecord => {
     });
   return y
     .map((fields) => {
-      if (fields[0].includes("LoadOnAcIsland")) {
-        console.log("fields", fields, {
-          [fields[0]]: { value: parseFloat(fields[1]), unit: fields[2] },
-        });
-      }
       if (isNaN(Number(fields[1])) || fields[1] === "") {
         return { [fields[0]]: { value: fields[1], unit: fields[2] } };
       }
@@ -229,9 +224,9 @@ export const parseCsv = (text: string): DataRecord => {
 };
 
 export const insertTreeElements = (
-  children: TreeElement[] = [],
+  children: I_TreeElement[] = [],
   [head, ...tail]: string[]
-): TreeElement[] => {
+): I_TreeElement[] => {
   let child = children.find((child) => child.name === head);
 
   if (!child) {
@@ -253,7 +248,7 @@ export const isText = (data: any): data is string => {
   return typeof data === "string";
 };
 
-export const flattenBarGraphData = (arr: any): GraphCoordinates[] => {
+export const flattenBarGraphData = (arr: any): I_GraphCoordinates[] => {
   return arr.reduce((flat: any, toFlatten: any) => {
     return flat.concat(
       Array.isArray(toFlatten) ? flattenBarGraphData(toFlatten) : toFlatten
@@ -281,7 +276,7 @@ export const isNumeric = (value: any) => {
   return !isNaN(value) && !isNaN(parseFloat(value));
 };
 
-export const transformToBarGraphData = (data: GraphCoordinates) => {
+export const transformToBarGraphData = (data: I_GraphCoordinates) => {
   let names: string[] = [];
   const barGraphData = data.y.map((text, i) => {
     if (isText(text)) {
@@ -317,6 +312,6 @@ export const getTreeElements = (toggleValues: DataRecord) => {
     )
     .reduce(
       (children, path) => insertTreeElements(children, path),
-      [] as TreeElement[]
+      [] as I_TreeElement[]
     );
 };

typescript/Frontend/src/util/types.tsx

@@ -1,5 +1,4 @@
-// TODO add if required or not
+export interface I_S3Credentials {
-export interface S3Credentials {
   s3Region: string;
   s3Provider: string;
   s3Key: string;
@@ -7,7 +6,7 @@ export interface S3Credentials {
   s3Bucket?: string;
 }
 
-export interface I_Installation extends S3Credentials {
+export interface I_Installation extends I_S3Credentials {
   type: string;
   title?: string;
   status?: number;
@@ -35,37 +34,3 @@ export interface I_Folder {
   type: string;
   children?: (I_Installation | I_Folder)[];
 }
-
-interface I_Ac {
-  Current: number;
-  Voltage: number;
-  Phi?: number;
-}
-
-interface I_Dc {
-  Current: number;
-  Voltage: number;
-}
-
-export interface I_Device {
-  Name: string;
-  Type: string;
-  Ac?: I_Ac[];
-  Dc?: I_Dc;
-  Dc48?: I_Dc;
-  Frequency?: number;
-  Alarms?: any[];
-  Warnings?: any[];
-  MainState?: string;
-  "DC Power"?: number;
-  Soc?: number;
-  HeaterOn?: boolean;
-  EocReached?: boolean;
-  BatteryCold?: boolean;
-  Temperature?: number;
-}
-
-export interface I_GraphData {
-  TimeStamp: string;
-  Devices: I_Device[];
-}

typescript/Frontend/src/util/user.util.tsx

@@ -12,7 +12,7 @@ export interface I_User {
   mustResetPassword: boolean;
 }
 
-export interface UserWithInheritedAccess {
+export interface I_UserWithInheritedAccess {
   folderId: number;
   folderName: string;
   user: I_User;
@@ -20,7 +20,7 @@ export interface UserWithInheritedAccess {
 
 export const filterDuplicateUsers = (data: any[]) => {
   return data.reduce(
-    (prev: UserWithInheritedAccess[], curr: UserWithInheritedAccess) => {
+    (prev: I_UserWithInheritedAccess[], curr: I_UserWithInheritedAccess) => {
       const foundUser = prev.find(({ user }) => user.id === curr.user.id);
       if (foundUser) {
         const prevIds = foundUser.user.folderIds