fix: remove leftover localities dialog prototype
This commit is contained in:
@@ -1,227 +0,0 @@
|
||||
module LocalitiesDialog
|
||||
|
||||
open Browser
|
||||
open Fable.Core
|
||||
open Fable.Core.JsInterop
|
||||
open Lit
|
||||
|
||||
open Atlantis
|
||||
open Atlantis.Types
|
||||
open Archmaester.Dto
|
||||
open Maps
|
||||
open Model
|
||||
open Utils
|
||||
|
||||
type private Locality = {
|
||||
id: int
|
||||
name: string
|
||||
// species: string
|
||||
capacity: float
|
||||
latitude: float
|
||||
longitude: float
|
||||
municipality: string
|
||||
prodAreaName: string
|
||||
prodAreaCode: int
|
||||
} with
|
||||
static member empty = {
|
||||
id = 0
|
||||
name = ""
|
||||
// species = ""
|
||||
capacity = 0.0
|
||||
latitude = 0.0
|
||||
longitude = 0.0
|
||||
municipality = ""
|
||||
prodAreaName = ""
|
||||
prodAreaCode = 0
|
||||
}
|
||||
|
||||
let private siteDataToLocalitys (site: Fiskeridir.SiteData) : Locality =
|
||||
{
|
||||
id = site.SiteNr
|
||||
name = site.Name
|
||||
latitude = site.Latitude
|
||||
longitude = site.Longitude
|
||||
capacity = site.Capacity
|
||||
municipality = site.Placement.MunicipalityName
|
||||
prodAreaName = site.Placement.ProdAreaName
|
||||
prodAreaCode = site.Placement.ProdAreaCode |> tryParseInt |> Option.defaultValue 0
|
||||
}
|
||||
|
||||
let private fetchProductionAreaInfo onFetch (poOpt: int option) =
|
||||
promise {
|
||||
match poOpt with
|
||||
| Some po ->
|
||||
let! data = Fiskeridir.fetchInfoPO po
|
||||
data |> onFetch
|
||||
| None ->
|
||||
Fiskeridir.ProductionAreaData.empty
|
||||
|> onFetch
|
||||
}
|
||||
|
||||
let private fetchAquacultureSites onFetch (poOpt: int option) =
|
||||
promise {
|
||||
// match poOpt with
|
||||
// | Some po ->
|
||||
// let! sites =
|
||||
// [| for i in 0..9 do
|
||||
// // the api accepts only 100 sites at a time, so batching up the requests
|
||||
// // don't know how many sites there are, so fetching up to 1000...
|
||||
// let range = (i*100, i*100 + 99)
|
||||
// Fiskeridir.fetchSitesPO range po
|
||||
// |]
|
||||
// |> Array.map (Promise.map (Array.map siteDataToLocalitys))
|
||||
// |> Promise.all
|
||||
// |> Promise.map Array.concat
|
||||
//
|
||||
// sites
|
||||
// |> onFetch
|
||||
// | None -> ()
|
||||
()
|
||||
}
|
||||
|
||||
[<HookComponent>]
|
||||
let localitiesDialog
|
||||
(arg: {|
|
||||
onClose: unit -> unit
|
||||
prodArea: int option
|
||||
selectedLocalityId: int option
|
||||
|}) =
|
||||
let localities, setLocalities = Hook.useState<Locality array> [||]
|
||||
let modelData, setModelData = Hook.useState Fiskeridir.ProductionAreaData.empty
|
||||
let selectedLocalityId, setOriginLocalityId = Hook.useState arg.selectedLocalityId
|
||||
let searchTerm, setSearchTerm = Hook.useState ""
|
||||
|
||||
let selectedLocality =
|
||||
selectedLocalityId
|
||||
|> Option.bind (fun siteNr ->
|
||||
localities |> Array.tryFind (fun locality -> locality.id = siteNr)
|
||||
)
|
||||
|
||||
// let updateItems = Array.map siteDataToLocalitys >> setLocalities
|
||||
// let appendItems = Array.append localities >> setLocalities
|
||||
|
||||
Hook.useEffectOnce (Utils.handleKeyPress "Escape" arg.onClose)
|
||||
// Hook.useEffectOnChange (arg.localities, updateItems)
|
||||
|
||||
Hook.useEffectOnChange(localities, fun _ ->
|
||||
let table = document.getElementById "localities-table"
|
||||
table?selected <- localities |> Array.choose (fun item -> Some item.id)
|
||||
table?items <- localities)
|
||||
|
||||
|
||||
// NOTE(simkir): To enable a virtualized table, we do not create the rows by iterating over drifters, we instead
|
||||
// programatically add the rows to the table. In this useEffect, we wait for the table to be created, and then we
|
||||
// add all the items.
|
||||
// sp-table api: https://opensource.adobe.com/spectrum-web-components/components/table/api/
|
||||
Hook.useEffectOnce (fun () ->
|
||||
arg.prodArea
|
||||
|> fetchProductionAreaInfo setModelData
|
||||
|> Promise.start
|
||||
|
||||
arg.prodArea
|
||||
|> fetchAquacultureSites setLocalities
|
||||
|> Promise.start
|
||||
|
||||
let table = document.getElementById "localities-table"
|
||||
table?selected <- localities
|
||||
|
||||
// NOTE: These are members of the spectrum table that we get
|
||||
// TODO: Make a small class for type safety
|
||||
table?items <- localities
|
||||
// NOTE: Function to get an id for each row
|
||||
table?itemValue <- (fun (item : Locality) -> $"{item.id}")
|
||||
// NOTE: Function to render each row. Creating the cell elements that corresponds to the header. Calls
|
||||
// this function on each item that we have sent into it.
|
||||
table?renderItem <- (fun (item: Locality) ->
|
||||
html $"""
|
||||
<sp-table-cell style="max-width: 100px"><div style="padding-top: 5px;">{item.id}</div></sp-table-cell>
|
||||
<sp-table-cell style="max-width: 200px"><div style="padding-top: 5px;">{item.name}</div></sp-table-cell>
|
||||
<sp-table-cell style="max-width: 130px"><div style="padding-top: 5px;">{item.latitude |> sprintf "%.6f"}</div></sp-table-cell>
|
||||
<sp-table-cell style="max-width: 130px"><div style="padding-top: 5px;">{item.longitude |> sprintf "%.6f"}</div></sp-table-cell>
|
||||
<sp-table-cell style="max-width: 130px"><div style="padding-top: 5px;">{item.capacity |> sprintf "%.0f"}</div></sp-table-cell>
|
||||
<sp-table-cell style="max-width: 200px"><div style="padding-top: 5px;">{item.municipality}</div></sp-table-cell>
|
||||
""")
|
||||
|
||||
// NOTE: The table fires a "sorted" event when you click on the table headers
|
||||
table.addEventListener("sorted", fun ev ->
|
||||
// NOTE: The event has a detail member with these two members
|
||||
let sortDir: string = ev?detail?sortDirection
|
||||
let sortKey: string = ev?detail?sortKey // This comes from the sort-key given to the headers below
|
||||
let sortFn = if sortDir = "asc" then Array.sortBy else Array.sortByDescending
|
||||
table?items
|
||||
|> sortFn (fun item ->
|
||||
// NOTE(simkir): WARNING! Hack to access an objects members :) Everything is an object in
|
||||
// JS, right!?
|
||||
JS.expr_js $"{item}[{sortKey}]")
|
||||
|> setLocalities))
|
||||
|
||||
Hook.useEffectOnChange(searchTerm, fun _ ->
|
||||
let table = document.getElementById "localities-table"
|
||||
table?items <- localities |> Array.filter (fun locality ->
|
||||
locality.name.ToLower().Trim().Contains(searchTerm.ToLower().Trim()))
|
||||
)
|
||||
|
||||
let handleChangeSearch _ev (data: obj) =
|
||||
setSearchTerm data?value
|
||||
|
||||
let setupSimButton =
|
||||
html $"""
|
||||
<sp-action-menu size="m">
|
||||
<sp-icon-social-network slot="icon"></sp-icon-social-network>
|
||||
<span slot="label">Network analysis</span>
|
||||
<sp-menu-item>
|
||||
Lice
|
||||
</sp-menu-item>
|
||||
<sp-menu-item>
|
||||
Water Contact
|
||||
</sp-menu-item>
|
||||
</sp-action-menu>
|
||||
"""
|
||||
|
||||
let table =
|
||||
html $"""
|
||||
<sp-table
|
||||
id="localities-table"
|
||||
size="s"
|
||||
scroller="true"
|
||||
style="height: 80%%; "
|
||||
@change={Ev(fun _ -> console.log $"[Localities table]: localities length changed to {localities.Length}")}
|
||||
>
|
||||
<sp-table-head>
|
||||
<sp-table-head-cell sortable sort-key="id" style="max-width: 100px">
|
||||
SiteId
|
||||
</sp-table-head-cell>
|
||||
<sp-table-head-cell sortable sort-key="name" style="max-width: 200px">
|
||||
Name
|
||||
</sp-table-head-cell>
|
||||
<sp-table-head-cell sortable sort-key="latitude" style="max-width: 130px">
|
||||
Latitude
|
||||
</sp-table-head-cell>
|
||||
<sp-table-head-cell sortable sort-key="longitude" style="max-width: 130px">
|
||||
Longitude
|
||||
</sp-table-head-cell>
|
||||
<sp-table-head-cell sortable sort-key="capacity" style="max-width: 130px">
|
||||
Capacity (TN)
|
||||
</sp-table-head-cell>
|
||||
<sp-table-head-cell sortable sort-key="municipality" style="max-width: 200px">
|
||||
Municipality
|
||||
</sp-table-head-cell>
|
||||
</sp-table-head>
|
||||
</sp-table>
|
||||
"""
|
||||
|
||||
html $"""
|
||||
<div class="archive-dialog">
|
||||
<sp-underlay ?open={true} @click={Ev(ignore >> arg.onClose)}></sp-underlay>
|
||||
<sp-dialog size="l" no-divider dismissable @close={Ev(fun _ -> arg.onClose ())}>
|
||||
<h1 slot="heading">{modelData.ToLabel()}</h1>
|
||||
{FluentUI.Lit.Input("Filter by name", searchTerm, handleChangeSearch)}
|
||||
{table}
|
||||
<div style="padding-top: 10px">
|
||||
<sp-action-group horizontal>
|
||||
{setupSimButton}
|
||||
</sp-action-group>
|
||||
</div>
|
||||
</sp-dialog>
|
||||
</div>
|
||||
"""
|
||||
@@ -48,7 +48,6 @@
|
||||
<Compile Include="ProbingControls.fs" />
|
||||
<Compile Include="PlotBox.fs" />
|
||||
<Compile Include="ArchiveDialog.fs" />
|
||||
<Compile Include="LocalitiesDialog.fs" />
|
||||
<Compile Include="Inbox.fs" />
|
||||
<Compile Include="Navigation.fs" />
|
||||
<Compile Include="Mapster.fs" />
|
||||
|
||||
Reference in New Issue
Block a user