diff options
Diffstat (limited to 'frontend/src/Product.elm')
-rw-r--r-- | frontend/src/Product.elm | 76 |
1 files changed, 58 insertions, 18 deletions
diff --git a/frontend/src/Product.elm b/frontend/src/Product.elm index 0975c8d..964538b 100644 --- a/frontend/src/Product.elm +++ b/frontend/src/Product.elm | |||
@@ -372,14 +372,51 @@ viewRating r = | |||
372 | 372 | ||
373 | viewInput : String -> String -> String -> (String -> msg) -> Html msg | 373 | viewInput : String -> String -> String -> (String -> msg) -> Html msg |
374 | viewInput t p v toMsg = | 374 | viewInput t p v toMsg = |
375 | input [ type_ t, placeholder p, value v, onInput toMsg ] [] | 375 | input |
376 | [ type_ t | ||
377 | , placeholder p | ||
378 | , value v | ||
379 | , onInput toMsg | ||
380 | , css [ Css.width (pct 100), Css.height (px 100) ] | ||
381 | ] | ||
382 | [] | ||
383 | |||
376 | 384 | ||
385 | viewStars : Model -> Html Msg | ||
386 | viewStars model = | ||
387 | let | ||
388 | activeStyle = | ||
389 | [ border3 (px 3) solid theme.fg ] | ||
377 | 390 | ||
378 | viewStars : Html Msg | 391 | inactiveStyle = |
379 | viewStars = | 392 | [ border3 (px 3) solid theme.primary ] |
380 | ul [] | 393 | |
394 | buttonStyle = | ||
395 | [ borderRadius (px 6), margin (px 6), backgroundColor theme.bg, padding2 (px 4) (px 8) ] | ||
396 | in | ||
397 | div | ||
398 | [ css | ||
399 | [ Css.width (pct 100) | ||
400 | , margin auto | ||
401 | , padding (px 12) | ||
402 | , textAlign center | ||
403 | ] | ||
404 | ] | ||
381 | (List.map | 405 | (List.map |
382 | (\i -> button [ onClick (AddRatingStars i) ] [ text <| String.fromInt i ]) | 406 | (\i -> |
407 | button | ||
408 | [ onClick (AddRatingStars i) | ||
409 | , (if i == model.ratingStars then | ||
410 | activeStyle | ||
411 | |||
412 | else | ||
413 | inactiveStyle | ||
414 | ) | ||
415 | ++ buttonStyle | ||
416 | |> css | ||
417 | ] | ||
418 | [ text <| String.fromInt i ] | ||
419 | ) | ||
383 | [ 1, 2, 3, 4, 5 ] | 420 | [ 1, 2, 3, 4, 5 ] |
384 | ) | 421 | ) |
385 | 422 | ||
@@ -393,16 +430,13 @@ view model = | |||
393 | _ -> | 430 | _ -> |
394 | div | 431 | div |
395 | [ css | 432 | [ css |
396 | [ Css.width (pct 60) | 433 | [ Css.width (pct 50) |
397 | , margin auto | 434 | , margin auto |
398 | ] | 435 | ] |
399 | ] | 436 | ] |
400 | [ div [] [ viewProduct model.listing ] | 437 | [ div [] [ viewProduct model.listing ] |
401 | , div | 438 | , div |
402 | [ css | 439 | [ css [ cardPrimaryText ] ] |
403 | [ cardPrimaryText | ||
404 | ] | ||
405 | ] | ||
406 | [ text "User Reviews" ] | 440 | [ text "User Reviews" ] |
407 | , if model.ratings == [] then | 441 | , if model.ratings == [] then |
408 | text "Be the first to add a review." | 442 | text "Be the first to add a review." |
@@ -415,13 +449,19 @@ view model = | |||
415 | ] | 449 | ] |
416 | ] | 450 | ] |
417 | (List.map viewRating model.ratings) | 451 | (List.map viewRating model.ratings) |
418 | , div [] [ text "Add Rating: " ] | 452 | , div |
419 | , div [] | 453 | [ css [ cardPrimaryText, margin2 (px 20) (px 0) ] ] |
420 | [ viewStars | 454 | [ text "Rate this product" ] |
421 | , viewInput "text" "Enter Comment Text" model.ratingText AddRatingComment | 455 | , div |
422 | , button [ onClick AddRatingPressed ] [ text "Submit Rating" ] | 456 | [] |
423 | ] | 457 | [ viewStars model |
424 | , div [] | 458 | , div |
425 | [ a [ href "/catalog" ] [ text "Back to catalog" ] | 459 | [] |
460 | [ viewInput "textarea" "Enter Comment Text" model.ratingText AddRatingComment ] | ||
461 | , div | ||
462 | [ css | ||
463 | [ textAlign center ] | ||
464 | ] | ||
465 | [ furbyButton [ onClick AddRatingPressed ] [ text "Submit Rating" ] ] | ||
426 | ] | 466 | ] |
427 | ] | 467 | ] |