TimeTableComponent.fs

module CalendarTimeline

open System
open Elmish
open Fable.Core.JsInterop
open Fable.Core
open Fable.Import
open Fable.Helpers.React

module R = Fable.Helpers.React

type RCom = React.ComponentClass<obj>
let Timeline: RCom = importDefault "react-calendar-timeline/lib"
importSideEffects "../../node_modules/react-calendar-timeline/lib/Timeline.css"


type [<Pojo>] Group = {
    id: string
    title: string
}


type [<Pojo>] Item = {
    id: string
    group: string
    title: string
    start_time: int64
    end_time: int64
}

let unixStart = DateTime(1970, 1, 1)
let toUnixTime (time:DateTime) : int64 = ((time.Subtract(unixStart)).TotalMilliseconds) |> unbox
let fromUnixTime (time:int64) : DateTime = unixStart.Add(TimeSpan.FromMilliseconds(unbox time))

module Props =

    type ITimelineProperties =
        interface end

    [<RequireQualifiedAccess>]
    type TimelineProperties =
    | CanMove of bool
    | CanChangeGroup of bool
    | CanResize of bool
    | Items of Item []
    | OnItemResize of Func<string,int64,string,unit>
    | OnItemMove of Func<string,int64,int,unit>
    | DefaultTimeStart of DateTime
    | DefaultTimeEnd of DateTime
    | SidebarContent of React.ReactElement
    | Groups of Group []
        interface ITimelineProperties        


/// A wrapper around https://github.com/namespace-ee/react-calendar-timeline
let timeLine (props:Props.ITimelineProperties list) children : React.ReactElement =
    R.from Timeline (keyValueList CaseRules.LowerFirst props) children