Merge f8ccd9a993d977641fd370069d4070458bc75f16 into 2d1117eac2bd14930ede872549e3f59e3b3c8965

examples/1-presidents.elm

@@ -1,20 +1,18 @@
+import Browser exposing (element)
 import Html exposing (Html, div, h1, input, text)
 import Html.Attributes exposing (placeholder)
 import Html.Events exposing (onInput)
 import Table
 
-
-
 main =
-  Html.program
-    { init = init presidents
+  Browser.element
+    { init = (init presidents)
     , update = update
     , view = view
     , subscriptions = \_ -> Sub.none
     }
 
 
-
 -- MODEL
 
 
@@ -24,9 +22,10 @@ type alias Model =
   , query : String
   }
 
+type alias Flags = {}
 
-init : List Person -> ( Model, Cmd Msg )
-init people =
+init : (List Person) -> Flags -> ( Model, Cmd Msg )
+init people _ =
   let
     model =
       { people = people

examples/2-travel.elm

@@ -1,14 +1,12 @@
+import Browser exposing ( element)
 import Html exposing (Html, Attribute, div, h1, input, p, text)
 import Html.Attributes exposing (checked, style, type_)
 import Html.Events exposing (onClick)
 import Html.Lazy exposing (lazy)
 import Table exposing (defaultCustomizations)
-import Time exposing (Time)
-
-
 
 main =
-  Html.program
+  Browser.element
     { init = init missionSights
     , update = update
     , view = view
@@ -25,9 +23,16 @@ type alias Model =
   , tableState : Table.State
   }
 
+type alias TimeSpan =
+  { hours: Float
+  , minutes: Float
+  }
 
-init : List Sight -> ( Model, Cmd Msg )
-init sights =
+type alias Flags = {}
+
+
+init : List Sight -> Flags -> ( Model, Cmd Msg )
+init sights _ =
   let
     model =
       { sights = sights
@@ -91,31 +96,36 @@ viewSummary allSights =
     sights ->
       let
         time =
-          List.sum (List.map .time sights)
+          sumTimeSpan (List.map .time sights)
 
         price =
           List.sum (List.map .price sights)
 
         summary =
-          "That is " ++ timeToString time ++ " of fun, costing $" ++ toString price
+          "That is " ++ timeToString time ++ " of fun, costing $" ++ String.fromFloat price
       in
         p [] [ text summary ]
 
+sumTimeSpan : List TimeSpan -> TimeSpan
+sumTimeSpan spans =
+  { hours = List.sum (List.map (.hours) spans)
+  , minutes = List.sum (List.map (.minutes) spans)
+  }
 
-timeToString : Time -> String
+timeToString : TimeSpan -> String
 timeToString time =
   let
     hours =
-      case floor (Time.inHours time) of
+      case floor (time.hours) of
         0 -> ""
         1 -> "1 hour"
-        n -> toString n ++ " hours"
+        n -> String.fromInt n ++ " hours"
 
     minutes =
-      case rem (round (Time.inMinutes time)) 60 of
+      case modBy 60 (round (time.minutes)) of
         0 -> ""
         1 -> "1 minute"
-        n -> toString n ++ " minutes"
+        n -> String.fromInt n ++ " minutes"
   in
     hours ++ " " ++ minutes
 
@@ -144,7 +154,7 @@ config =
 toRowAttrs : Sight -> List (Attribute Msg)
 toRowAttrs sight =
   [ onClick (ToggleSelected sight.name)
-  , style [ ("background", if sight.selected then "#CEFAF8" else "white") ]
+  , style "backgroundColor" (if sight.selected then "#CEFAF8" else "white")
   ]
 
 
@@ -153,10 +163,9 @@ timeColumn =
   Table.customColumn
     { name = "Time"
     , viewData = timeToString << .time
-    , sorter = Table.increasingOrDecreasingBy .time
+    , sorter = Table.unsortable
     }
 
-
 checkboxColumn : Table.Column Sight Msg
 checkboxColumn =
   Table.veryCustomColumn
@@ -179,7 +188,7 @@ viewCheckbox {selected} =
 
 type alias Sight =
   { name : String
-  , time : Time
+  , time : TimeSpan
   , price : Float
   , rating : Float
   , selected : Bool
@@ -188,12 +197,12 @@ type alias Sight =
 
 missionSights : List Sight
 missionSights =
-  [ Sight "Eat a Burrito" (30 * Time.minute) 7 4.6 False
-  , Sight "Buy drugs in Dolores park" Time.hour 20 4.8 False
-  , Sight "Armory Tour" (1.5 * Time.hour) 27 4.5 False
-  , Sight "Tartine Bakery" Time.hour 10 4.1 False
-  , Sight "Have Brunch" (2 * Time.hour) 25 4.2 False
-  , Sight "Get catcalled at BART" (5 * Time.minute) 0 1.6 False
-  , Sight "Buy a painting at \"Stuff\"" (45 * Time.minute) 400 4.7 False
-  , Sight "McDonalds at 24th" (20 * Time.minute) 5 2.8 False
+  [ Sight "Eat a Burrito" ( TimeSpan 0 30 ) 7 4.6 False
+  , Sight "Buy drugs in Dolores park" ( TimeSpan 1 0 ) 20 4.8 False
+  , Sight "Armory Tour" ( TimeSpan 1 30 ) 27 4.5 False
+  , Sight "Tartine Bakery" ( TimeSpan 1 0 ) 10 4.1 False
+  , Sight "Have Brunch" ( TimeSpan 2 0 ) 25 4.2 False
+  , Sight "Get catcalled at BART" ( TimeSpan 0 5 ) 0 1.6 False
+  , Sight "Buy a painting at \"Stuff\"" ( TimeSpan 0 45 ) 400 4.7 False
+  , Sight "McDonalds at 24th" ( TimeSpan 0 20 ) 5 2.8 False
   ]

examples/README.md

@@ -23,17 +23,17 @@ Then navigate to `1-presidents.elm` or `2-travel.elm` from [localhost:8000](http
 To see the examples *with* CSS, run the following commands:
 
 ```bash
-git clone https://github.com/evancz/elm-sortable-table.git
+git clone https://github.com/NoRedInk/elm-sortable-table.git
 cd elm-sortable-table
 cd examples
-elm-make 1-presidents.elm --yes --output=elm.js
+elm make 1-presidents.elm --output=elm.js
 elm-reactor
 ```
 
 Then open [localhost:8000/index.html](http://localhost:8000/index.html) in your browser. That HTML file loads in some CSS and whatever code is in `elm.js`. So if you want to see the second example with CSS, you can compile it like this:
 
 ```bash
-elm-make 2-travel.elm --yes --output=elm.js
+elm make 2-travel.elm --output=elm.js
 ```
 
 As you make changes, you will want to recompile the Elm code with `elm-make`.

examples/elm-package.json

@@ -1,16 +0,0 @@
-{
-    "version": "1.0.1",
-    "summary": "helpful summary of your project, less than 80 characters",
-    "repository": "https://github.com/user/project.git",
-    "license": "BSD3",
-    "source-directories": [
-        "."
-    ],
-    "exposed-modules": [],
-    "dependencies": {
-        "elm-lang/core": "5.0.0 <= v < 6.0.0",
-        "elm-lang/html": "2.0.0 <= v < 3.0.0",
-        "evancz/elm-sortable-table": "1.0.1 <= v < 2.0.0"
-    },
-    "elm-version": "0.18.0 <= v < 0.19.0"
-}

examples/elm.json

@@ -0,0 +1,25 @@
+{
+    "type": "application",
+    "source-directories": [
+        "src"
+    ],
+    "elm-version": "0.19.0",
+    "dependencies": {
+        "direct": {
+            "NoRedInk/elm-sortable-table": "1.0.0",
+            "elm/browser": "1.0.1",
+            "elm/core": "1.0.2",
+            "elm/html": "1.0.0",
+            "elm/time": "1.0.0"
+        },
+        "indirect": {
+            "elm/json": "1.1.2",
+            "elm/url": "1.0.0",
+            "elm/virtual-dom": "1.0.2"
+        }
+    },
+    "test-dependencies": {
+        "direct": {},
+        "indirect": {}
+    }
+}

examples/index.html

@@ -9,7 +9,12 @@
 </head>
 
 <body>
-	<script type="text/javascript">Elm.Main.fullscreen();</script>
+	<div id="elm-mount"></div>
+	<script type="text/javascript">
+	Elm.Main.init({
+		node: document.getElementById('elm-mount')
+	});
+	</script>
 </body>
 
 </html>