Browse Source

add ui to start listening for devices

Mark deVilliers 2 years ago
parent
commit
221103e7ba
5 changed files with 2026 additions and 606 deletions
  1. 1880 593
      ui/node.js
  2. 18 6
      ui/search.js
  3. 20 1
      ui/src/Decoders.elm
  4. 61 6
      ui/src/Node.elm
  5. 47 0
      ui/static/elm-bootstrap.svg

File diff suppressed because it is too large
+ 1880 - 593
ui/node.js


+ 18 - 6
ui/search.js

@@ -10457,16 +10457,28 @@ var _user$project$Decoders$Entitlement = F4(
10457 10457
 	function (a, b, c, d) {
10458 10458
 		return {subject: a, level: b, uid: c, status: d};
10459 10459
 	});
10460
-var _user$project$Decoders$MetadataItem = F2(
10461
-	function (a, b) {
10462
-		return {subject: a, description: b};
10460
+var _user$project$Decoders$MetadataItem = F3(
10461
+	function (a, b, c) {
10462
+		return {subject: a, description: b, name: c};
10463 10463
 	});
10464
-var _user$project$Decoders$decodeMetadataItem = A3(
10465
-	_elm_lang$core$Json_Decode$map2,
10464
+var _user$project$Decoders$decodeMetadataItem = A4(
10465
+	_elm_lang$core$Json_Decode$map3,
10466 10466
 	_user$project$Decoders$MetadataItem,
10467 10467
 	A2(_elm_lang$core$Json_Decode$field, 'subject', _elm_lang$core$Json_Decode$string),
10468
-	A2(_elm_lang$core$Json_Decode$field, 'description', _elm_lang$core$Json_Decode$string));
10468
+	A2(_elm_lang$core$Json_Decode$field, 'description', _elm_lang$core$Json_Decode$string),
10469
+	A2(_elm_lang$core$Json_Decode$field, 'name', _elm_lang$core$Json_Decode$string));
10469 10470
 var _user$project$Decoders$decodeMetadata = _elm_lang$core$Json_Decode$list(_user$project$Decoders$decodeMetadataItem);
10471
+var _user$project$Decoders$Device = F4(
10472
+	function (a, b, c, d) {
10473
+		return {typez: a, description: b, uid: c, name: d};
10474
+	});
10475
+var _user$project$Decoders$decodeDevice = A5(
10476
+	_elm_lang$core$Json_Decode$map4,
10477
+	_user$project$Decoders$Device,
10478
+	A2(_elm_lang$core$Json_Decode$field, 'type', _elm_lang$core$Json_Decode$string),
10479
+	A2(_elm_lang$core$Json_Decode$field, 'description', _elm_lang$core$Json_Decode$string),
10480
+	A2(_elm_lang$core$Json_Decode$field, 'uid', _elm_lang$core$Json_Decode$string),
10481
+	A2(_elm_lang$core$Json_Decode$field, 'name', _elm_lang$core$Json_Decode$string));
10470 10482
 var _user$project$Decoders$Requesting = {ctor: 'Requesting'};
10471 10483
 var _user$project$Decoders$RequestAccess = {ctor: 'RequestAccess'};
10472 10484
 var _user$project$Decoders$Unknown = {ctor: 'Unknown'};

+ 20 - 1
ui/src/Decoders.elm

@@ -159,14 +159,16 @@ decodeEntitlements =
159 159
 type alias MetadataItem =
160 160
     { subject : String
161 161
     , description : String
162
+    , name : String
162 163
     }
163 164
 
164 165
 
165 166
 decodeMetadataItem : Decoder MetadataItem
166 167
 decodeMetadataItem =
167
-    Json.Decode.map2 MetadataItem
168
+    Json.Decode.map3 MetadataItem
168 169
         (Json.Decode.field "subject" Json.Decode.string)
169 170
         (Json.Decode.field "description" Json.Decode.string)
171
+        (Json.Decode.field "name" Json.Decode.string)
170 172
 
171 173
 
172 174
 type alias Metadata =
@@ -176,3 +178,20 @@ type alias Metadata =
176 178
 decodeMetadata : Decoder Metadata
177 179
 decodeMetadata =
178 180
     Json.Decode.list decodeMetadataItem
181
+
182
+
183
+type alias Device =
184
+    { typez : String
185
+    , description : String
186
+    , uid : String
187
+    , name : String
188
+    }
189
+
190
+
191
+decodeDevice : Decoder Device
192
+decodeDevice =
193
+    Json.Decode.map4 Device
194
+        (Json.Decode.field "type" Json.Decode.string)
195
+        (Json.Decode.field "description" Json.Decode.string)
196
+        (Json.Decode.field "uid" Json.Decode.string)
197
+        (Json.Decode.field "name" Json.Decode.string)

+ 61 - 6
ui/src/Node.elm

@@ -6,8 +6,9 @@ import Html.Attributes exposing (..)
6 6
 import Html.Events exposing (onClick)
7 7
 import List.Extra exposing (..)
8 8
 import Json.Encode exposing (..)
9
+import Bootstrap.Button as Button
10
+import Bootstrap.Card as Card
9 11
 import Bootstrap.CDN as CDN
10
-import Bootstrap.Grid as Grid
11 12
 import Bootstrap.Tab as Tab
12 13
 import Bootstrap.Table as Table
13 14
 import Decoders
@@ -57,6 +58,8 @@ type Msg
57 58
     | DeclineEntitlementCompleted (Result Http.Error Decoders.Entitlement)
58 59
     | AmendEntitlement Decoders.Entitlement
59 60
     | AmendEntitlementCompleted (Result Http.Error Decoders.Entitlement)
61
+    | AddDevice String
62
+    | AddDeviceCompleted (Result Http.Error Decoders.Device)
60 63
     | TabMsg Tab.State
61 64
 
62 65
 
@@ -117,6 +120,15 @@ update msg model =
117 120
         TabMsg state ->
118 121
             ( { model | tabState = state }, Cmd.none )
119 122
 
123
+        AddDevice deviceType ->
124
+            ( model, addDevice deviceType )
125
+
126
+        AddDeviceCompleted (Ok ent) ->
127
+            ( model, getAcceptedEntitlements )
128
+
129
+        AddDeviceCompleted (Err httpError) ->
130
+            Debug.crash (toString httpError)
131
+
120 132
 
121 133
 
122 134
 --RPC
@@ -204,6 +216,22 @@ amendEntitlement ent =
204 216
         Http.send AmendEntitlementCompleted request
205 217
 
206 218
 
219
+deviceRequestEncoder : String -> Json.Encode.Value
220
+deviceRequestEncoder deviceType =
221
+    Json.Encode.object
222
+        [ ( "type", Json.Encode.string deviceType )
223
+        ]
224
+
225
+
226
+addDevice : String -> Cmd Msg
227
+addDevice deviceType =
228
+    let
229
+        request =
230
+            Http.post (nodeURL ++ "/devices/") (Http.jsonBody (deviceRequestEncoder deviceType)) Decoders.decodeDevice
231
+    in
232
+        Http.send AddDeviceCompleted request
233
+
234
+
207 235
 
208 236
 -- SUBSCRIPTIONS
209 237
 
@@ -238,15 +266,42 @@ view model =
238 266
         ]
239 267
 
240 268
 
241
-deviceTab : Model -> Tab.Pane msg
269
+deviceTab : Model -> Tab.Pane Msg
242 270
 deviceTab model =
243 271
     Tab.pane [ Html.Attributes.class "mt-3" ]
244 272
         [ h4 [] [ text "Devices" ]
245
-        , p [] [ text "This is the page where you can add, remove devices." ]
246
-        , text "coming soon"
273
+        , p [] [ text "This is the page where you can add, list and remove devices." ]
274
+        , Card.group devicesGallery
275
+
276
+        --|> Card.view
247 277
         ]
248 278
 
249 279
 
280
+devicesGallery : List (Card.Config Msg)
281
+devicesGallery =
282
+    [ Card.config [ Card.attrs [ width 100 ] ]
283
+        |> Card.header [ class "text-center" ]
284
+            [ img [ src "/static/elm-bootstrap.svg", width 100 ] []
285
+            ]
286
+        |> Card.block []
287
+            [ Card.titleH5 [] [ text "Sine Fake Device" ]
288
+            , Card.text [] [ text "Fake device to generate the perfect sine curve." ]
289
+            , Card.custom <|
290
+                Button.button [ Button.primary, Button.attrs [ onClick (AddDevice "fake-sine") ] ] [ text "Add device" ]
291
+            ]
292
+    , Card.config [ Card.attrs [] ]
293
+        |> Card.header [ class "text-center" ]
294
+            [ img [ src "/static/elm-bootstrap.svg", width 100 ] []
295
+            ]
296
+        |> Card.block []
297
+            [ Card.titleH5 [] [ text "Temp Humidity Fake Device" ]
298
+            , Card.text [] [ text "Fake device to generate temperature and humidity values." ]
299
+            , Card.custom <|
300
+                Button.button [ Button.primary, Button.attrs [ onClick (AddDevice "fake-temp-humidity") ] ] [ text "Add device" ]
301
+            ]
302
+    ]
303
+
304
+
250 305
 entitlementsTab : Model -> Tab.Pane Msg
251 306
 entitlementsTab model =
252 307
     Tab.pane [ Html.Attributes.class "mt-3" ]
@@ -290,7 +345,7 @@ drawMetadataItem m model =
290 345
         requested =
291 346
             findEntitlement m.subject model.requested
292 347
     in
293
-        Table.tr [] [ Table.td [] [ text (m.description) ], Table.td [] [ drawAccepted (accepted) ], Table.td [] [ drawRequested (requested) ] ]
348
+        Table.tr [] [ Table.td [] [ text m.name, div [] [ text m.description ] ], Table.td [] [ drawAccepted (accepted) ], Table.td [] [ drawRequested (requested) ] ]
294 349
 
295 350
 
296 351
 drawEntitlementSelector : Decoders.MetadataItem -> Model -> Html Msg
@@ -336,7 +391,7 @@ drawAccessLevel : Decoders.AccessLevel -> Html Msg
336 391
 drawAccessLevel level =
337 392
     case level of
338 393
         Decoders.OwnerOnly ->
339
-            text ("Only the owner (you) can see the data")
394
+            text ("No one can see the data")
340 395
 
341 396
         Decoders.CanDiscover ->
342 397
             text ("Anyone can discover the data")

+ 47 - 0
ui/static/elm-bootstrap.svg

@@ -0,0 +1,47 @@
1
+<?xml version="1.0" encoding="utf-8"?>
2
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
3
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5
+   viewBox="0 0 323.141 322.95" enable-background="new 0 0 323.141 322.95" xml:space="preserve">
6
+<g>
7
+
8
+  <!-- mid orange -->
9
+  <polygon
10
+    fill="#C7BFD3"
11
+    points="161.649,152.782 231.514,82.916 91.783,82.916"/>
12
+
13
+
14
+  <!-- top green -->
15
+  <polygon
16
+    fill="#e5e1ea"
17
+    points="8.867,0 79.241,70.375 232.213,70.375 161.838,0"/>
18
+
19
+  <!-- green square -->
20
+  <rect
21
+    fill="#e5e1ea"
22
+    x="192.99"
23
+    y="107.392"
24
+    transform="matrix(0.7071 0.7071 -0.7071 0.7071 186.4727 -127.2386)"
25
+    width="107.676"
26
+    height="108.167"/>
27
+
28
+  <!-- upper-right blue triangle -->
29
+  <polygon
30
+    fill="#c7bfd3"
31
+    points="323.298,143.724 323.298,0 179.573,0"/>
32
+
33
+  <!-- left dark triangle -->
34
+  <polygon
35
+    fill="#563d7c"
36
+    points="152.781,161.649 0,8.868 0,314.432"/>
37
+
38
+  <polygon
39
+    fill="#C7BFD3"
40
+    points="255.522,246.655 323.298,314.432 323.298,178.879"/>
41
+
42
+  <!-- bottom blue triangle -->
43
+  <polygon
44
+    fill="#c7bfd3"
45
+    points="161.649,170.517 8.869,323.298 314.43,323.298"/>
46
+</g>
47
+</svg>