From 75c1a593bc1d2bb66b60f69c7c94664729ecd487 Mon Sep 17 00:00:00 2001
From: Giorgos Vyronos <gv319@ic.ac.uk>
Date: Mon, 14 Mar 2022 22:21:36 +0000
Subject: [PATCH] Added submit button for changing ports.

---
 src/Renderer/DrawBlock/Symbol.fs         |  6 +--
 src/Renderer/UI/SelectedComponentView.fs | 53 ++++++++++++++----------
 2 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/src/Renderer/DrawBlock/Symbol.fs b/src/Renderer/DrawBlock/Symbol.fs
index edef3d0..395eb34 100644
--- a/src/Renderer/DrawBlock/Symbol.fs
+++ b/src/Renderer/DrawBlock/Symbol.fs
@@ -512,8 +512,8 @@ let redefineCustomHW symbol =
      let r,b,l,t = countsides symbol.APortOffsetsMap
      let maxRL = max r l
      let maxTB = max t b
-     let heightNew = 100 //GridSize + GridSize * maxRL
-     let widthNew = max (maxname*2 + maxname*maxTB) (GridSize * 4) //maxname*2 + maxname*maxTB
+     let heightNew = GridSize + GridSize * maxRL
+     let widthNew = max (maxname*3 + maxname*maxTB) (GridSize * 4) //maxname*2 + maxname*maxTB
      let newcompo = {symbol.Compo with H = heightNew}
      let newcompo'= {newcompo with W = widthNew}
      {symbol with Compo = newcompo'}
@@ -1372,9 +1372,7 @@ let update (msg : Msg) (model : Model): Model*Cmd<'a>  =
             | _ -> failwithf "Side not implemented"
    
         let symbol' = {tempsym with APortOffsetsMap = (changePortSide tempsym.APortOffsetsMap portName newSide tempsym)}
-        //let symbol'' = {redefineCustomHW} ->
         let symbol'' = redefineCustomHW symbol'
-        //{symbol'' with map = redefineportmap}
         let symbol'''  = {symbol'' with APortOffsetsMap = redefineCustomPorts symbol'' symbol'.APortOffsetsMap}
         { model with Symbols = Map.add sId symbol''' model.Symbols }, Cmd.none
 
diff --git a/src/Renderer/UI/SelectedComponentView.fs b/src/Renderer/UI/SelectedComponentView.fs
index 9f2f502..97bb3e9 100644
--- a/src/Renderer/UI/SelectedComponentView.fs
+++ b/src/Renderer/UI/SelectedComponentView.fs
@@ -446,29 +446,40 @@ let viewSelectedComponent (model: ModelType.Model) dispatch : ReactElement =
             let mutable portName = ""
             let mutable portSide = ""
             
-            let dropDown (available:bool) (name:string) (lst:string list): ReactElement =
-                if available then
-                    Field.div [] [
-                        Label.label [] [ str name ]
-                        Label.label [ ]
-                            [Select.select []
-                                [ select [(OnChange(fun option ->
-                                    match name with
-                                    | "Port" -> portName <- option.Value; if (portName <> "" && portSide <> "") then setComponentPortUpdate model sheetDispatch comp portName portSide; dispatch <| SetPopupDialogText (Some portName);dispatch (ReloadSelectedComponent model.LastUsedDialogWidth) else printf "Not yet"
-                                    | "Side" -> portSide <- option.Value; if (portName <> "" && portSide <> "") then setComponentPortUpdate model sheetDispatch comp portName portSide; dispatch <| SetPopupDialogText (Some portSide);dispatch (ReloadSelectedComponent model.LastUsedDialogWidth) else printf "Not yet"
-                                    | _ -> failwithf "Case not an option"
-                                    ))]
-                                    
-                                    ([option [Value "";Selected true;Disabled true] [str ("Choose " + string name)]] @ List.map(fun value -> option [Value value] [str value]) lst)
-                                    ]
+            if allowedDescription then
+                Field.div [] [
+                    Label.label [] [ str "Port Movements" ]
+                    p [  Style [ FontStyle "italic"; FontSize "12px"; LineHeight "1.1"]] [
+                    str <| $"To change the location of the ports on the symbol:\n 1. Select the port to change its location.
+                             2. Select the side of the Symbol on where the Port should be.\n 3. Press the Submit button to submit your changes.\n"]
+                             
+                    Label.label [] [ str "Port Selection" ]
+                    Label.label [ ]
+                        [Select.select []
+                            [ select [(OnChange(fun option ->
+                                portName <- option.Value;(printf "%A\n" option.Value)))]
+                                
+                                ([option [Value "";Selected true;Disabled true] [str ("Choose Port")]] @ List.map(fun value -> option [Value value] [str value]) portNameLst)
                                 ]
+                            ]
+                    Label.label [] [ str "Side Selection" ]
+                    Label.label [ ]
+                        [Select.select []
+                            [ select [(OnChange(fun option ->
+                                portSide <- option.Value; (printf "%A\n" option.Value)))]
+                                
+                                ([option [Value "";Selected true;Disabled true] [str ("Choose Side")]] @ List.map(fun value -> option [Value value] [str value]) portSideLst)
+                                ]
+                            ]
+                    Button.button [
+                        Button.Color IsPrimary
+                        Button.Props [ OnClick (fun _ -> (if (portName <> "" && portSide <> "") then setComponentPortUpdate model sheetDispatch comp portName portSide; dispatch <| SetPopupDialogText (Some (portName+" "+portSide));dispatch (ReloadSelectedComponent model.LastUsedDialogWidth)))]
                     ]
-                else
-                    Field.div [] []
-            dropDown allowedDescription "Port" portNameLst
-            dropDown allowedDescription "Side" portSideLst
-            
-            ]
+                        [ str "Submit" ]
+                ]
+            else
+                Field.div [] []
+        ]
         ]
     | _ -> div [] [ str "Select a component in the diagram to view or change its properties, for example number of bits." ]