File Display size

Modules/Website/CMakeLists.txt

@@ -0,0 +1,5 @@
+
+add_custom_target(Website
+        ALL
+        elm make --optimize --output=${CMAKE_CURRENT_BINARY_DIR}/index.html src/Main.elm
+        WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR})

Modules/Website/src/Files.elm

@@ -7,17 +7,25 @@ import Element.Font as Font
 import Element.Input as Input
 import Element.Region as Region
 import Http
-import MainPage exposing (Msg)
+import Json.Decode exposing (Decoder, int, list, string, succeed)
+import Json.Decode.Pipeline exposing (required)
+import String exposing (left)
+import Debug exposing (toString)
 
 
 type alias File =
     { name : String
+    , file_name : String
     , source : String
     , id : Int
     , status : String
     }
 
 
+type alias FilesResponse =
+    { queue : List File }
+
+
 
 -- Model --
 
@@ -25,41 +33,147 @@ type alias File =
 type alias Model =
     { files : List File
     , filter : String
+    , error : Maybe String
     }
 
 
 initModel : Model
 initModel =
-    { files = []
+    { files =
+        []
     , filter = ""
+    , error = Nothing
     }
 
 
+init : ( Model, Cmd Msg )
+init =
+    ( initModel, queryFiles )
+
+
 
 -- Messages --
 
 
 type Msg
     = Reload
+    | QueryRequestResult (Result Http.Error FilesResponse)
 
 
 
---   | QueryRequestResult (Result Http.Error _)
 -- Request --
+
+
+fileDecoder : Decoder File
+fileDecoder =
+    succeed File
+        |> required "name" string
+        |> required "file_name" string
+        |> required "source" string
+        |> required "id" int
+        |> required "status" string
+
+
+queueDecoder : Decoder FilesResponse
+queueDecoder =
+    succeed FilesResponse
+        |> required "queue" (list fileDecoder)
+
+
+
 -- Update --
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     case msg of
+        QueryRequestResult (Ok res) ->
+            ( { model | files = res.queue }, Cmd.none )
+
+        QueryRequestResult (Err (Http.BadBody er)) ->
+            ( { model | error = Just er }, Cmd.none )
+
         _ ->
             ( model, Cmd.none )
 
 
+queryFiles : Cmd Msg
+queryFiles =
+    Http.get
+        { url = "http://127.0.0.1/api/files"
+        , expect = Http.expectJson QueryRequestResult queueDecoder
+        }
+
+
 
 -- View --
 
 
+shadow : Attr decorative msg
+shadow =
+    Border.shadow
+        { offset = ( 2, 2 )
+        , size = 2
+        , blur = 2
+        , color = rgb 0.5 0.5 0.5
+        }
+
+
+viewFile : File -> Element Msg
+viewFile file =
+    el
+        [ width fill
+        , Background.color (rgb 0.8 0.8 0.8)
+        , padding 10
+        , Border.rounded 3
+        , shadow
+        , height (px 110)
+        ]
+        (Element.column
+            [ width fill
+            , spacing 6
+            ]
+            [ Element.row
+                [ width fill ]
+                [ el
+                    [ Region.heading 1
+                    , alignLeft
+                    , Font.size 24 
+                    ]
+                    (text file.name)
+                , el
+                    [ Region.heading 1
+                    , alignRight
+                    , Font.color (rgba 0 0 0 0.6)
+                    , Font.size 20 
+                    ]
+                    (text (String.concat [ "[", file.status, "]" ]))
+                ]
+            , el
+                [ Region.heading 2
+                , Font.size 16
+                , spacingXY 0 10
+                ]
+                (text (String.concat ["File name: ", file.file_name]))
+            ,el
+                [ Region.heading 2
+                , Font.size 16
+                ]
+                (text (String.concat ["Source: ", file.source]))
+            , download
+                [ Region.footer
+                , Font.color (rgb 0 0 0.8)
+                , Font.size 16
+                , alignBottom
+                , alignRight
+                ]
+                { url = String.concat ["http://127.0.0.1/api/file/", toString file.id ]
+                , label = text "Download"
+                }
+            ]
+        )
+
+
 view : Model -> Element Msg
 view model =
     Element.column
@@ -71,8 +185,24 @@ view model =
         ]
         [ el
             [ Region.heading 1
+            , width fill
             , alignLeft
             , Font.size 36
             ]
             (text "Files")
+        , case model.error of
+            Just e ->
+                el
+                    [ Font.color (rgb 1 0 0)
+                    , Font.size 16
+                    ]
+                    (text e)
+
+            Nothing ->
+                Element.column
+                    [ width fill
+                    , centerX
+                    , spacing 10
+                    ]
+                    (List.map viewFile model.files)
         ]

Modules/Website/src/Main.elm

@@ -61,7 +61,7 @@ initCurrentPage ( model, existingCmds ) =
                 Route.Files ->
                     let
                         ( pageModel, pageCmd ) =
-                            ( Files.initModel, Cmd.none )
+                            Files.init
                     in
                     ( FilesPage pageModel, Cmd.map FilesPageMsg pageCmd )
     in