Add: universal task display
This commit is contained in:
@@ -6,41 +6,27 @@ import Element.Font as Font
|
||||
import Element.Region as Region
|
||||
import Globals exposing (apiFiles)
|
||||
import Http
|
||||
import Json.Decode exposing (Decoder, int, list, string, succeed)
|
||||
import Json.Decode exposing (Decoder, list, succeed)
|
||||
import Json.Decode.Pipeline exposing (required)
|
||||
import TaskStatus
|
||||
|
||||
|
||||
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
|
||||
}
|
||||
type Model
|
||||
= RequestError String
|
||||
| Loading
|
||||
| Files (List TaskStatus.Status)
|
||||
|
||||
|
||||
|
||||
initModel : Model
|
||||
initModel =
|
||||
{ files =
|
||||
[]
|
||||
, filter = ""
|
||||
, error = Nothing
|
||||
}
|
||||
initModel = Loading
|
||||
|
||||
|
||||
|
||||
init : ( Model, Cmd Msg )
|
||||
@@ -55,26 +41,18 @@ init =
|
||||
type Msg
|
||||
= Reload
|
||||
| QueryRequestResult (Result Http.Error FilesResponse)
|
||||
| TaskStatusMsg TaskStatus.Msg
|
||||
|
||||
|
||||
|
||||
-- Request --
|
||||
|
||||
|
||||
fileDecoder : Decoder File
|
||||
fileDecoder =
|
||||
succeed File
|
||||
|> required "name" string
|
||||
|> required "file_name" string
|
||||
|> required "source" string
|
||||
|> required "id" int
|
||||
|> required "status" string
|
||||
|
||||
type alias FilesResponse =
|
||||
{ files : List TaskStatus.Status }
|
||||
|
||||
queueDecoder : Decoder FilesResponse
|
||||
queueDecoder =
|
||||
succeed FilesResponse
|
||||
|> required "queue" (list fileDecoder)
|
||||
|> required "files" (list TaskStatus.statusDecoder)
|
||||
|
||||
|
||||
|
||||
@@ -85,10 +63,13 @@ update : Msg -> Model -> ( Model, Cmd Msg )
|
||||
update msg model =
|
||||
case msg of
|
||||
QueryRequestResult (Ok res) ->
|
||||
( { model | files = res.queue }, Cmd.none )
|
||||
( Files res.files, Cmd.none )
|
||||
|
||||
QueryRequestResult (Err (Http.BadBody er)) ->
|
||||
( { model | error = Just er }, Cmd.none )
|
||||
QueryRequestResult (Err (Http.BadBody err)) ->
|
||||
( RequestError err, Cmd.none )
|
||||
|
||||
TaskStatusMsg sub_msg ->
|
||||
( model, Cmd.map TaskStatusMsg <| TaskStatus.update sub_msg)
|
||||
|
||||
_ ->
|
||||
( model, Cmd.none )
|
||||
@@ -126,62 +107,6 @@ cardShadowOver =
|
||||
}
|
||||
|
||||
|
||||
viewFile : File -> Element Msg
|
||||
viewFile file =
|
||||
el
|
||||
[ width fill
|
||||
|
||||
-- , Background.color (rgb 0.8 0.8 0.8)
|
||||
, padding 10
|
||||
, Border.rounded 3
|
||||
, cardShadow
|
||||
, height (px 110)
|
||||
, mouseOver [ cardShadowOver ]
|
||||
]
|
||||
(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/", String.fromInt file.id ]
|
||||
, label = text "Download"
|
||||
}
|
||||
]
|
||||
)
|
||||
|
||||
|
||||
view : Model -> Element Msg
|
||||
view model =
|
||||
@@ -199,19 +124,26 @@ view model =
|
||||
, Font.size 36
|
||||
]
|
||||
(text "Files")
|
||||
, case model.error of
|
||||
Just e ->
|
||||
, case model of
|
||||
Loading ->
|
||||
el
|
||||
[ Font.color (rgb 1 0 0)
|
||||
, Font.size 16
|
||||
]
|
||||
(text e)
|
||||
(text "Loading")
|
||||
|
||||
Nothing ->
|
||||
RequestError err ->
|
||||
el
|
||||
[ Font.color (rgb 1 0 0)
|
||||
, Font.size 16
|
||||
]
|
||||
(text <| String.concat ["Loading", err])
|
||||
|
||||
Files files ->
|
||||
Element.column
|
||||
[ width fill
|
||||
, centerX
|
||||
, spacing 20
|
||||
]
|
||||
(List.map viewFile model.files)
|
||||
( files |> List.map TaskStatus.statusView |> List.map (Element.map TaskStatusMsg) )
|
||||
]
|
||||
|
||||
@@ -44,7 +44,7 @@ type Msg
|
||||
| UpdateFormFormatChnaged Format
|
||||
| PostForm Form
|
||||
| PostResult (Result Http.Error PostFormResponse)
|
||||
| None
|
||||
|
||||
|
||||
|
||||
type AudioFormats
|
||||
|
||||
@@ -1,22 +1,16 @@
|
||||
module Status exposing (Model, Msg, init, queryStatus, update, view)
|
||||
|
||||
import Color exposing (color)
|
||||
import Debug exposing (toString)
|
||||
import Delay
|
||||
import Element exposing (..)
|
||||
import Element.Background as Background
|
||||
import Element.Border as Border
|
||||
import Element.Font as Font
|
||||
import Element.Input as Input
|
||||
import File.Download exposing (url)
|
||||
import Files exposing (Msg(..))
|
||||
import Globals exposing (apiDownloadFile, apiStatus)
|
||||
import Globals exposing (apiStatus)
|
||||
import Http
|
||||
import Json.Decode exposing (Decoder, int, list, string, succeed)
|
||||
import Json.Decode.Pipeline exposing (optional, required)
|
||||
import Json.Decode exposing (Decoder, succeed)
|
||||
import Json.Decode.Pipeline exposing (required)
|
||||
import Route exposing (Route(..))
|
||||
import String exposing (right)
|
||||
import Task
|
||||
import TaskStatus
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -26,7 +20,7 @@ import Task
|
||||
type Msg
|
||||
= Reload
|
||||
| StatusRequestResult (Result Http.Error StatusResponse)
|
||||
| Download String
|
||||
| TaskStatusMsg TaskStatus.Msg
|
||||
|
||||
|
||||
|
||||
@@ -35,7 +29,7 @@ type Msg
|
||||
|
||||
type alias Model =
|
||||
{ file_id : String
|
||||
, status : Maybe Status
|
||||
, status : Maybe TaskStatus.Status
|
||||
}
|
||||
|
||||
|
||||
@@ -47,55 +41,16 @@ init file_id =
|
||||
|
||||
-- Request
|
||||
|
||||
|
||||
type alias File =
|
||||
{ format : String
|
||||
, filename : String
|
||||
, timestamp : Int
|
||||
}
|
||||
|
||||
|
||||
type alias Status =
|
||||
{ file : Maybe File
|
||||
, name : String
|
||||
, source : String
|
||||
, status : String
|
||||
, status_id : Int
|
||||
, format : String
|
||||
, timestamp : Int
|
||||
, id : String
|
||||
}
|
||||
|
||||
|
||||
type alias StatusResponse =
|
||||
{ status : Status }
|
||||
{ status : TaskStatus.Status }
|
||||
|
||||
|
||||
fileDecoder : Decoder File
|
||||
fileDecoder =
|
||||
succeed File
|
||||
|> required "format" string
|
||||
|> required "name" string
|
||||
|> required "timestamp" int
|
||||
|
||||
|
||||
statusDecoder : Decoder Status
|
||||
statusDecoder =
|
||||
succeed Status
|
||||
|> optional "file" (Json.Decode.map Just fileDecoder) Nothing
|
||||
|> required "name" string
|
||||
|> required "source" string
|
||||
|> required "status" string
|
||||
|> required "status_id" int
|
||||
|> required "task_file_type" string
|
||||
|> required "timestamp" int
|
||||
|> required "id" string
|
||||
|
||||
|
||||
statusResponseDecoder : Decoder StatusResponse
|
||||
statusResponseDecoder =
|
||||
succeed StatusResponse
|
||||
|> required "status" statusDecoder
|
||||
|> required "status" TaskStatus.statusDecoder
|
||||
|
||||
|
||||
queryStatus : String -> Cmd Msg
|
||||
@@ -110,48 +65,6 @@ queryStatus id =
|
||||
-- Update
|
||||
|
||||
|
||||
cardShadow : Attr decorative msg
|
||||
cardShadow =
|
||||
Border.shadow
|
||||
{ offset = ( 0, 4 )
|
||||
, size = 4
|
||||
, blur = 8
|
||||
, color = rgba 0 0 0 0.2
|
||||
}
|
||||
|
||||
|
||||
cardShadowOver : Attr decorative msg
|
||||
cardShadowOver =
|
||||
Border.shadow
|
||||
{ offset = ( 0, 4 )
|
||||
, size = 8
|
||||
, blur = 16
|
||||
, color = rgba 0 0 0 0.2
|
||||
}
|
||||
|
||||
|
||||
card : List (Attribute msg) -> Element msg -> Element msg
|
||||
card attr element =
|
||||
el
|
||||
(List.concat
|
||||
[ attr
|
||||
, [ Border.rounded 15, cardShadow, mouseOver [ cardShadowOver ], padding 20 ]
|
||||
]
|
||||
)
|
||||
element
|
||||
|
||||
|
||||
innerCard : List (Attribute msg) -> Element msg -> Element msg
|
||||
innerCard attr element =
|
||||
el
|
||||
(List.concat
|
||||
[ attr
|
||||
, [ Border.roundEach { topLeft = 15, topRight = 15, bottomLeft = 15, bottomRight = 15 }, padding 5 ]
|
||||
]
|
||||
)
|
||||
element
|
||||
|
||||
|
||||
send : msg -> Cmd msg
|
||||
send msg =
|
||||
Task.succeed msg
|
||||
@@ -170,48 +83,11 @@ update msg model =
|
||||
StatusRequestResult _ ->
|
||||
( { model | status = Nothing }, Cmd.none )
|
||||
|
||||
Download file_id ->
|
||||
( model, url <| apiDownloadFile file_id )
|
||||
TaskStatusMsg sub_msg ->
|
||||
( model, Cmd.map TaskStatusMsg <| TaskStatus.update sub_msg )
|
||||
|
||||
|
||||
|
||||
-- View
|
||||
--Just (Download.
|
||||
|
||||
|
||||
statusView : Status -> Element Msg
|
||||
statusView status =
|
||||
card [ width fill, height shrink ]
|
||||
(Element.column
|
||||
[ width fill ]
|
||||
[ row [ width fill, height <| px 40 ]
|
||||
[ el [ Font.size 28, alignLeft ] <| text status.name
|
||||
, el [ Font.size 28, alignRight ] <| text (String.concat [ "[", status.status, "]" ])
|
||||
]
|
||||
, link [ Font.bold, Font.underline, Font.color color.blue, Font.size 16, padding 2 ]
|
||||
{ url = status.source, label = text status.source }
|
||||
, el [ height <| px 10 ] none
|
||||
, case status.file of
|
||||
Just file ->
|
||||
innerCard [ width fill, height shrink, Background.color color.grey ] <|
|
||||
row [ width fill, spacing 20 ]
|
||||
[ Input.button
|
||||
[ Background.color color.blue
|
||||
, Font.color color.white
|
||||
, Border.color color.red
|
||||
, paddingXY 32 16
|
||||
, Border.rounded 15
|
||||
]
|
||||
{ onPress = Just <| Download status.id
|
||||
, label = Element.text "Download"
|
||||
}
|
||||
, el [ Font.size 16 ] <| text file.filename
|
||||
]
|
||||
|
||||
Nothing ->
|
||||
Element.none
|
||||
]
|
||||
)
|
||||
|
||||
|
||||
view : Model -> Element Msg
|
||||
@@ -225,8 +101,8 @@ view model =
|
||||
]
|
||||
[ case model.status of
|
||||
Just status ->
|
||||
statusView status
|
||||
TaskStatus.statusView status |> Element.map TaskStatusMsg
|
||||
|
||||
Nothing ->
|
||||
Element.text "Test"
|
||||
Element.text "File Not Found"
|
||||
]
|
||||
|
||||
132
Modules/Website/src/TaskStatus.elm
Normal file
132
Modules/Website/src/TaskStatus.elm
Normal file
@@ -0,0 +1,132 @@
|
||||
module TaskStatus exposing (..)
|
||||
import Json.Decode exposing (Decoder, int, list, string, succeed)
|
||||
import Json.Decode.Pipeline exposing (optional, required)
|
||||
import Element.Background as Background
|
||||
import Element.Border as Border
|
||||
import Element.Font as Font
|
||||
import Element.Input as Input
|
||||
import Element exposing (..)
|
||||
import String
|
||||
import Globals exposing (apiDownloadFile)
|
||||
import File.Download exposing (url)
|
||||
import Color exposing (color)
|
||||
|
||||
type alias File =
|
||||
{ format : String
|
||||
, filename : String
|
||||
, timestamp : Int
|
||||
}
|
||||
|
||||
|
||||
type alias Status =
|
||||
{ file : Maybe File
|
||||
, name : String
|
||||
, source : String
|
||||
, status : String
|
||||
, timestamp : Int
|
||||
, id : String
|
||||
}
|
||||
|
||||
|
||||
fileDecoder : Decoder File
|
||||
fileDecoder =
|
||||
succeed File
|
||||
|> required "format" string
|
||||
|> required "filename" string
|
||||
|> required "timestamp" int
|
||||
|
||||
|
||||
statusDecoder : Decoder Status
|
||||
statusDecoder =
|
||||
succeed Status
|
||||
|> optional "file" (Json.Decode.map Just fileDecoder) Nothing
|
||||
|> required "name" string
|
||||
|> required "source" string
|
||||
|> required "status" string
|
||||
|> required "timestamp" int
|
||||
|> required "hash" string
|
||||
|
||||
type Msg
|
||||
= Download String
|
||||
|
||||
update : Msg -> Cmd Msg
|
||||
update msg =
|
||||
case msg of
|
||||
Download id -> url <| apiDownloadFile id
|
||||
|
||||
statusView : Status -> Element Msg
|
||||
statusView status =
|
||||
card [ width fill, height shrink ]
|
||||
(Element.column
|
||||
[ width fill ]
|
||||
[ row [ width fill, height <| px 40 ]
|
||||
[ el [ Font.size 28, alignLeft ] <| text status.name
|
||||
, el [ Font.size 28, alignRight ] <| text (String.concat [ "[", status.status, "]" ])
|
||||
]
|
||||
, link [ Font.bold, Font.underline, Font.color color.blue, Font.size 16, padding 2 ]
|
||||
{ url = status.source, label = text status.source }
|
||||
, el [ height <| px 10 ] none
|
||||
, case status.file of
|
||||
Just file ->
|
||||
innerCard [ width fill, height shrink, Background.color color.grey ] <|
|
||||
row [ width fill, spacing 20 ]
|
||||
[ Input.button
|
||||
[ Background.color color.blue
|
||||
, Font.color color.white
|
||||
, Border.color color.red
|
||||
, paddingXY 32 16
|
||||
, Border.rounded 15
|
||||
]
|
||||
{ onPress = Just <| Download status.id
|
||||
, label = Element.text "Download"
|
||||
}
|
||||
, el [ Font.size 16 ] <| text file.filename
|
||||
]
|
||||
|
||||
Nothing ->
|
||||
Element.none
|
||||
]
|
||||
)
|
||||
|
||||
|
||||
|
||||
cardShadow : Attr decorative msg
|
||||
cardShadow =
|
||||
Border.shadow
|
||||
{ offset = ( 0, 4 )
|
||||
, size = 4
|
||||
, blur = 8
|
||||
, color = rgba 0 0 0 0.2
|
||||
}
|
||||
|
||||
|
||||
cardShadowOver : Attr decorative msg
|
||||
cardShadowOver =
|
||||
Border.shadow
|
||||
{ offset = ( 0, 4 )
|
||||
, size = 8
|
||||
, blur = 16
|
||||
, color = rgba 0 0 0 0.2
|
||||
}
|
||||
|
||||
|
||||
card : List (Attribute msg) -> Element msg -> Element msg
|
||||
card attr element =
|
||||
el
|
||||
(List.concat
|
||||
[ attr
|
||||
, [ Border.rounded 15, cardShadow, mouseOver [ cardShadowOver ], padding 20 ]
|
||||
]
|
||||
)
|
||||
element
|
||||
|
||||
|
||||
innerCard : List (Attribute msg) -> Element msg -> Element msg
|
||||
innerCard attr element =
|
||||
el
|
||||
(List.concat
|
||||
[ attr
|
||||
, [ Border.roundEach { topLeft = 15, topRight = 15, bottomLeft = 15, bottomRight = 15 }, padding 5 ]
|
||||
]
|
||||
)
|
||||
element
|
||||
Reference in New Issue
Block a user