Last active
August 9, 2024 13:25
-
-
Save HarryMcCarney/c30f5b8745b3bb6fc9330632111174a0 to your computer and use it in GitHub Desktop.
Dynamic store creation with Sutil
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| namespace HNC4PL | |
| module CouriersPage = | |
| open Sutil | |
| open Sutil.CoreElements | |
| open HNC4PL.Model | |
| open HNC4PL.FormElements | |
| open HNC4PL.Maps | |
| open System | |
| open Data | |
| type controlType = Lat | Long | Radius | |
| let stores = | |
| getCouriers() | |
| |> Promise.map(fun cs -> | |
| cs | |
| |> List.map(fun c -> Store.make c) | |
| ) | |
| let load (user : User option) = | |
| let updatePointStoreFunc (courierStore: IStore<Courier>) (pointId: Guid) (controlType: controlType) (event: InputEvent) = | |
| Store.modify(fun courier -> | |
| let updatedPoints = | |
| courier.Regions | |
| |> List.find(fun p -> p.Id = pointId) | |
| |> fun p -> | |
| match controlType with | |
| | Radius -> | |
| {p with Radius = (event.inputElement.value |> int)} | |
| | Lat -> | |
| {p with Lat = (event.inputElement.value|> float)} | |
| | Long -> | |
| {p with Long = (event.inputElement.value|> float)} | |
| |> fun p -> | |
| ( | |
| courier.Regions | |
| |> List.filter(fun p -> p.Id <> pointId) | |
| ) @ [p] | |
| { | |
| courier with Regions = updatedPoints | |
| } | |
| ) courierStore | |
| let addRegionBTN (courierStore: IStore<Courier>) = | |
| Html.button [ | |
| Attr.id "addRegion" | |
| Attr.classes ["button"; "is-primary"; "mb-6";] | |
| Attr.text "Add Region" | |
| onClick (fun e -> | |
| Store.modify(fun courier -> | |
| let updatedRegions = | |
| courier.Regions | |
| @ | |
| [ | |
| {Id = Guid.NewGuid(); Lat = 50.0657; Long = 5.7132; Radius= 10000} | |
| ] | |
| { | |
| courier with Regions = updatedRegions | |
| } | |
| ) courierStore | |
| ) [] | |
| ] | |
| let addPointMap (courierStore: IStore<Courier>) = | |
| let courier = Store.get courierStore | |
| fragment [ | |
| Html.div [ | |
| Attr.classes ["column"; "is-one-half"] | |
| let pointMap : PointMap = | |
| { | |
| Id = courier.Id |> string | |
| Points = ( | |
| courier.Regions | |
| |> List.map(fun r -> | |
| { | |
| Id = r.Id | |
| Lat = r.Lat | |
| Long = r.Long | |
| Radius = r.Radius | |
| } | |
| ) | |
| ) | |
| } | |
| loadPointMap pointMap | |
| onElementReady(fun e -> | |
| Maps.initPointMap() | |
| ) [] | |
| ] | |
| ] | |
| let addRegions(courierStore : IStore<Courier>) = | |
| Html.div [ | |
| Attr.classes ["column" ; "is-one-half"] | |
| fragment | |
| ( | |
| (Store.get courierStore).Regions | |
| |> List.sortBy(fun r -> r.Id) | |
| |> List.map(fun p -> | |
| Html.div [ | |
| Attr.id (p.Id |> string) | |
| Attr.classes ["columns"] | |
| Html.div [ | |
| Attr.classes ["column"; "is-one-quarter"] | |
| numberInputWithValue (Some (p.Lat |> string)) "1-Latitude" "Latitude" true None (Some(updatePointStoreFunc courierStore p.Id Lat)) | |
| ] | |
| Html.div [ | |
| Attr.classes ["column"; "is-one-quarter"] | |
| numberInputWithValue (Some (p.Long |> string)) "1-Longitude" "Longitude" true None (Some(updatePointStoreFunc courierStore p.Id Long)) | |
| ] | |
| Html.div [ | |
| Attr.classes ["column"; "is-one-quarter"] | |
| numberInputWithValue (Some (p.Radius |> string)) "1-Radius" "Radius" true None (Some(updatePointStoreFunc courierStore p.Id Radius)) | |
| ] | |
| Html.div [ | |
| Attr.classes ["column"; "is-one-quarter"; "is-narrow"] | |
| Html.button [ | |
| Attr.classes ["delete"; "is-small"; "is-align-items-center"] | |
| onClick (fun e -> | |
| Store.modify(fun courier -> | |
| let updatedRegions = | |
| courier.Regions | |
| |> List.filter(fun remainingPoints -> remainingPoints.Id <> p.Id) | |
| { | |
| courier with Regions = updatedRegions | |
| } | |
| ) courierStore | |
| ) [] | |
| ] | |
| ] | |
| ] | |
| ) | |
| ) | |
| ] | |
| Html.div [ | |
| Attr.classes ["section"; "title"] | |
| Attr.id "Couriers" | |
| text "Couriers" | |
| Bind.promise( | |
| stores, | |
| (fun ss -> | |
| fragment ( | |
| ( | |
| ss | |
| |> List.sortBy (fun c -> (Store.get c).Name) | |
| |> List.map(fun courierStore -> | |
| Bind.el( | |
| courierStore, | |
| fun courer -> | |
| Html.div [ | |
| Attr.classes ["box"] | |
| Html.div [ | |
| Attr.classes ["block"; "title"] | |
| text courer.Name | |
| Html.div [ | |
| Attr.classes ["block"; "subtitle"] | |
| text "Regions" | |
| ] | |
| Html.div [ | |
| Attr.classes ["columns";] | |
| addRegions courierStore | |
| addPointMap courierStore | |
| ] | |
| addRegionBTN courierStore | |
| ] | |
| Html.script [ | |
| Attr.src "https://maps.googleapis.com/maps/api/js?key=SOMEKEY&callback=initPointMap" | |
| Attr.async true | |
| Attr.defer true | |
| ] | |
| ] | |
| ) | |
| ) | |
| ) | |
| @ | |
| [ | |
| Html.button [ | |
| Attr.id "saveCouriersBTN" | |
| Attr.classes ["button"; "is-primary"; "mb-6"; "block"] | |
| Attr.text "Save" | |
| onClick (fun _ -> | |
| ss | |
| |> List.map(fun c -> | |
| Data.setCourier (Store.get c) | |
| ) | |
| |> ignore | |
| ) [] | |
| ] | |
| ] | |
| ) | |
| ) | |
| ) | |
| ] | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment