module Files exposing (..) import Element exposing (..) import Element.Background as Background import Element.Border as Border import Element.Font as Font import Element.Input as Input import Element.Region as Region import Http 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 -- type alias Model = { files : List File , filter : String , error : Maybe String } initModel : Model initModel = { files = [] , filter = "" , error = Nothing } init : ( Model, Cmd Msg ) init = ( initModel, queryFiles ) -- Messages -- type Msg = Reload | QueryRequestResult (Result Http.Error FilesResponse) -- 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 [ width (px 800) , height shrink , centerX , spacing 36 , padding 10 ] [ 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) ]