diff --git a/web/app/views/index.scala.html b/web/app/views/index.scala.html index 2310a73..06e4de0 100644 --- a/web/app/views/index.scala.html +++ b/web/app/views/index.scala.html @@ -3,8 +3,25 @@ - - + Road Quality + + + + + + + + + + + + + + + + + + diff --git a/web/elm-package.json b/web/elm-package.json index 6e95b36..81478d4 100644 --- a/web/elm-package.json +++ b/web/elm-package.json @@ -15,6 +15,7 @@ "elm-lang/html": "2.0.0 <= v < 3.0.0", "elm-lang/http": "1.0.0 <= v < 2.0.0", "elm-lang/navigation": "2.1.0 <= v < 3.0.0", + "elm-lang/svg": "2.0.0 <= v < 3.0.0", "evancz/url-parser": "2.0.1 <= v < 3.0.0", "lukewestby/elm-http-builder": "5.1.0 <= v < 6.0.0", "mdgriffith/elm-style-animation": "3.5.5 <= v < 4.0.0", diff --git a/web/public/favicon/android-icon-144x144.png b/web/public/favicon/android-icon-144x144.png new file mode 100644 index 0000000..4fbd2b0 Binary files /dev/null and b/web/public/favicon/android-icon-144x144.png differ diff --git a/web/public/favicon/android-icon-192x192.png b/web/public/favicon/android-icon-192x192.png new file mode 100644 index 0000000..6872335 Binary files /dev/null and b/web/public/favicon/android-icon-192x192.png differ diff --git a/web/public/favicon/android-icon-36x36.png b/web/public/favicon/android-icon-36x36.png new file mode 100644 index 0000000..d028186 Binary files /dev/null and b/web/public/favicon/android-icon-36x36.png differ diff --git a/web/public/favicon/android-icon-48x48.png b/web/public/favicon/android-icon-48x48.png new file mode 100644 index 0000000..afd6800 Binary files /dev/null and b/web/public/favicon/android-icon-48x48.png differ diff --git a/web/public/favicon/android-icon-72x72.png b/web/public/favicon/android-icon-72x72.png new file mode 100644 index 0000000..c435839 Binary files /dev/null and b/web/public/favicon/android-icon-72x72.png differ diff --git a/web/public/favicon/android-icon-96x96.png b/web/public/favicon/android-icon-96x96.png new file mode 100644 index 0000000..7bfaf91 Binary files /dev/null and b/web/public/favicon/android-icon-96x96.png differ diff --git a/web/public/favicon/apple-icon-114x114.png b/web/public/favicon/apple-icon-114x114.png new file mode 100644 index 0000000..7cec0ea Binary files /dev/null and b/web/public/favicon/apple-icon-114x114.png differ diff --git a/web/public/favicon/apple-icon-120x120.png b/web/public/favicon/apple-icon-120x120.png new file mode 100644 index 0000000..665ec48 Binary files /dev/null and b/web/public/favicon/apple-icon-120x120.png differ diff --git a/web/public/favicon/apple-icon-144x144.png b/web/public/favicon/apple-icon-144x144.png new file mode 100644 index 0000000..4fbd2b0 Binary files /dev/null and b/web/public/favicon/apple-icon-144x144.png differ diff --git a/web/public/favicon/apple-icon-152x152.png b/web/public/favicon/apple-icon-152x152.png new file mode 100644 index 0000000..2323262 Binary files /dev/null and b/web/public/favicon/apple-icon-152x152.png differ diff --git a/web/public/favicon/apple-icon-180x180.png b/web/public/favicon/apple-icon-180x180.png new file mode 100644 index 0000000..ce9c2c2 Binary files /dev/null and b/web/public/favicon/apple-icon-180x180.png differ diff --git a/web/public/favicon/apple-icon-57x57.png b/web/public/favicon/apple-icon-57x57.png new file mode 100644 index 0000000..378a053 Binary files /dev/null and b/web/public/favicon/apple-icon-57x57.png differ diff --git a/web/public/favicon/apple-icon-60x60.png b/web/public/favicon/apple-icon-60x60.png new file mode 100644 index 0000000..74dabe1 Binary files /dev/null and b/web/public/favicon/apple-icon-60x60.png differ diff --git a/web/public/favicon/apple-icon-72x72.png b/web/public/favicon/apple-icon-72x72.png new file mode 100644 index 0000000..c435839 Binary files /dev/null and b/web/public/favicon/apple-icon-72x72.png differ diff --git a/web/public/favicon/apple-icon-76x76.png b/web/public/favicon/apple-icon-76x76.png new file mode 100644 index 0000000..2846cab Binary files /dev/null and b/web/public/favicon/apple-icon-76x76.png differ diff --git a/web/public/favicon/apple-icon-precomposed.png b/web/public/favicon/apple-icon-precomposed.png new file mode 100644 index 0000000..cd88001 Binary files /dev/null and b/web/public/favicon/apple-icon-precomposed.png differ diff --git a/web/public/favicon/apple-icon.png b/web/public/favicon/apple-icon.png new file mode 100644 index 0000000..cd88001 Binary files /dev/null and b/web/public/favicon/apple-icon.png differ diff --git a/web/public/favicon/browserconfig.xml b/web/public/favicon/browserconfig.xml new file mode 100644 index 0000000..c554148 --- /dev/null +++ b/web/public/favicon/browserconfig.xml @@ -0,0 +1,2 @@ + +#ffffff \ No newline at end of file diff --git a/web/public/favicon/favicon-16x16.png b/web/public/favicon/favicon-16x16.png new file mode 100644 index 0000000..75e8f0c Binary files /dev/null and b/web/public/favicon/favicon-16x16.png differ diff --git a/web/public/favicon/favicon-32x32.png b/web/public/favicon/favicon-32x32.png new file mode 100644 index 0000000..624f32c Binary files /dev/null and b/web/public/favicon/favicon-32x32.png differ diff --git a/web/public/favicon/favicon-96x96.png b/web/public/favicon/favicon-96x96.png new file mode 100644 index 0000000..7bfaf91 Binary files /dev/null and b/web/public/favicon/favicon-96x96.png differ diff --git a/web/public/favicon/favicon.ico b/web/public/favicon/favicon.ico new file mode 100644 index 0000000..9f1220b Binary files /dev/null and b/web/public/favicon/favicon.ico differ diff --git a/web/public/favicon/manifest.json b/web/public/favicon/manifest.json new file mode 100644 index 0000000..013d4a6 --- /dev/null +++ b/web/public/favicon/manifest.json @@ -0,0 +1,41 @@ +{ + "name": "App", + "icons": [ + { + "src": "\/android-icon-36x36.png", + "sizes": "36x36", + "type": "image\/png", + "density": "0.75" + }, + { + "src": "\/android-icon-48x48.png", + "sizes": "48x48", + "type": "image\/png", + "density": "1.0" + }, + { + "src": "\/android-icon-72x72.png", + "sizes": "72x72", + "type": "image\/png", + "density": "1.5" + }, + { + "src": "\/android-icon-96x96.png", + "sizes": "96x96", + "type": "image\/png", + "density": "2.0" + }, + { + "src": "\/android-icon-144x144.png", + "sizes": "144x144", + "type": "image\/png", + "density": "3.0" + }, + { + "src": "\/android-icon-192x192.png", + "sizes": "192x192", + "type": "image\/png", + "density": "4.0" + } + ] +} \ No newline at end of file diff --git a/web/public/favicon/ms-icon-144x144.png b/web/public/favicon/ms-icon-144x144.png new file mode 100644 index 0000000..4fbd2b0 Binary files /dev/null and b/web/public/favicon/ms-icon-144x144.png differ diff --git a/web/public/favicon/ms-icon-150x150.png b/web/public/favicon/ms-icon-150x150.png new file mode 100644 index 0000000..66d0e58 Binary files /dev/null and b/web/public/favicon/ms-icon-150x150.png differ diff --git a/web/public/favicon/ms-icon-310x310.png b/web/public/favicon/ms-icon-310x310.png new file mode 100644 index 0000000..803b36d Binary files /dev/null and b/web/public/favicon/ms-icon-310x310.png differ diff --git a/web/public/favicon/ms-icon-70x70.png b/web/public/favicon/ms-icon-70x70.png new file mode 100644 index 0000000..7580fd5 Binary files /dev/null and b/web/public/favicon/ms-icon-70x70.png differ diff --git a/web/public/img/arrow-left.svg b/web/public/img/arrow-left.svg deleted file mode 100644 index 2b5dfd9..0000000 --- a/web/public/img/arrow-left.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/web/public/img/arrow-right.svg b/web/public/img/arrow-right.svg deleted file mode 100644 index be5b6e0..0000000 --- a/web/public/img/arrow-right.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/web/public/img/check.svg b/web/public/img/check.svg deleted file mode 100644 index fd364dd..0000000 --- a/web/public/img/check.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/public/img/marker.png b/web/public/img/marker.png deleted file mode 100644 index 8f33f12..0000000 Binary files a/web/public/img/marker.png and /dev/null differ diff --git a/web/public/img/start-marker.png b/web/public/img/start-marker.png deleted file mode 100644 index 08607ca..0000000 Binary files a/web/public/img/start-marker.png and /dev/null differ diff --git a/web/public/img/strava_login.svg b/web/public/img/strava-login.svg similarity index 100% rename from web/public/img/strava_login.svg rename to web/public/img/strava-login.svg diff --git a/web/public/img/surface-quality-vert.png b/web/public/img/surface-quality-vert.png new file mode 100644 index 0000000..724ae5c Binary files /dev/null and b/web/public/img/surface-quality-vert.png differ diff --git a/web/public/img/traffic-safety-vert.png b/web/public/img/traffic-safety-vert.png new file mode 100644 index 0000000..8bc8bc7 Binary files /dev/null and b/web/public/img/traffic-safety-vert.png differ diff --git a/web/public/img/trifecta_mountains.png b/web/public/img/trifecta-mountains.png similarity index 100% rename from web/public/img/trifecta_mountains.png rename to web/public/img/trifecta-mountains.png diff --git a/web/public/img/user.png b/web/public/img/user.png new file mode 100644 index 0000000..0ed734a Binary files /dev/null and b/web/public/img/user.png differ diff --git a/web/public/img/x.svg b/web/public/img/x.svg deleted file mode 100644 index 34942ee..0000000 --- a/web/public/img/x.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/web/public/javascripts/init.js b/web/public/javascripts/init.js index 067c4f3..e502f1e 100644 --- a/web/public/javascripts/init.js +++ b/web/public/javascripts/init.js @@ -12,6 +12,7 @@ let cursorOverPoint = null; let isDragging = false; let viewOnly = true; let popup; +let showingLayer; // STORE SESSION app.ports.storeSession.subscribe(function(session) { @@ -39,7 +40,7 @@ app.ports.up.subscribe(function(authed) { container: "MainView", style: "mapbox://styles/mapbox/light-v9", center: [-79.412190, 43.667632], - zoom: 10 + zoom: 12 }); canvas = map.getCanvasContainer(); @@ -50,27 +51,56 @@ app.ports.up.subscribe(function(authed) { map.on("mousedown", onMapMouseDown); map.on("mouseup", onMapMouseUp); - map.on('load', function () { + showingLayer = "SurfaceQuality"; + map.on("load", function () { map.addLayer({ - "id": "mini_segments", + "id": "SurfaceQuality", "type": "line", "source": { - type: 'vector', - tiles: ['https://tiles.roadquality.org/surface_quality/{z}/{x}/{y}.pbf'] + type: "vector", + tiles: ["https://tiles.roadquality.org/surface_quality/{z}/{x}/{y}.pbf"] }, "source-layer": "surface_mini_segments", "paint": { "line-color": { - "type": "identity", - "property": "colour" + "type": "identity", + "property": "colour" }, - "line-width": 1.5 + "line-width": 2 } }); }); }, 100); }); +app.ports.setLayer.subscribe(function(layer) { + if (showingLayer === layer) { + return; + } else if (map.getLayer(layer)) { + map.setLayoutProperty(showingLayer, "visibility", "none"); + map.setLayoutProperty(layer, "visibility", "visible"); + } else if (layer === "TrafficSafety") { + map.setLayoutProperty(showingLayer, "visibility", "none"); + map.addLayer({ + "id": "TrafficSafety", + "type": "line", + "source": { + type: "vector", + tiles: ["https://tiles.roadquality.org/traffic/{z}/{x}/{y}.pbf"] + }, + "source-layer": "traffic_mini_segments", + "paint": { + "line-color": { + "type": "identity", + "property": "colour" + }, + "line-width": 2 + } + }); + } + showingLayer = layer; +}); + app.ports.routeCreate.subscribe(function() { viewOnly = false; map.on("click", onMapClick); diff --git a/web/src/Data/Map.elm b/web/src/Data/Map.elm index e2f1604..d88ea07 100644 --- a/web/src/Data/Map.elm +++ b/web/src/Data/Map.elm @@ -1,4 +1,4 @@ -module Data.Map exposing (CycleRoute, decodeCycleRoute, Point, decodePoint, encodePoint, SurfaceType(..), PathType(..), Segment, decodeSegment, CreateSegmentForm, encodeCreateSegmentForm) +module Data.Map exposing (MapLayer(..), CycleRoute, decodeCycleRoute, Point, decodePoint, encodePoint, SurfaceType(..), PathType(..), Segment, decodeSegment, CreateSegmentForm, encodeCreateSegmentForm) import Json.Decode as Decode exposing (Decoder) import Json.Decode.Pipeline as Pipeline exposing (decode, required) @@ -6,6 +6,13 @@ import Json.Encode as Encode exposing (Value) import Util exposing ((=>)) +type MapLayer + = PlainMap + | SurfaceQuality + | TrafficSafety + | SegmentsView + + type alias CycleRoute = { distance : Float , polyline : String diff --git a/web/src/Data/UserPhoto.elm b/web/src/Data/UserPhoto.elm index c559124..2ee0416 100644 --- a/web/src/Data/UserPhoto.elm +++ b/web/src/Data/UserPhoto.elm @@ -44,7 +44,7 @@ photoToUrl : UserPhoto -> String photoToUrl (UserPhoto maybeUrl) = case maybeUrl of Nothing -> - "https://static.productionready.io/images/smiley-cyrus.jpg" + "/assets/img/user.png" Just url -> url diff --git a/web/src/Main.elm b/web/src/Main.elm index e61c511..4bc90aa 100644 --- a/web/src/Main.elm +++ b/web/src/Main.elm @@ -355,7 +355,7 @@ updatePage page msg model = } => Cmd.batch [ Ports.storeSession Nothing - , Route.modifyUrl Route.Home + , Route.modifyUrl Route.Login ] cmd = diff --git a/web/src/Page/Home.elm b/web/src/Page/Home.elm index b383049..faa5c38 100644 --- a/web/src/Page/Home.elm +++ b/web/src/Page/Home.elm @@ -3,7 +3,7 @@ module Page.Home exposing (view, subscriptions, update, Model, Msg, ExternalMsg( import Dict exposing (Dict) import OrderedDict as OrdDict exposing (OrderedDict) import List.Extra exposing (elemIndex) -import Data.Map exposing (CycleRoute, Point, Segment, SurfaceType(..), PathType(..), encodePoint, decodeCycleRoute, decodeSegment, encodeCreateSegmentForm) +import Data.Map exposing (MapLayer(..), CycleRoute, Point, Segment, SurfaceType(..), PathType(..), encodePoint, decodeCycleRoute, decodeSegment, encodeCreateSegmentForm) import Data.AuthToken exposing (AuthToken) import Data.Session as Session exposing (Session) import Data.UserPhoto as UserPhoto @@ -20,7 +20,9 @@ import Stylesheets exposing (globalNamespace, mapNamespace, CssIds(..), CssClass import Html.CssHelpers exposing (Namespace) import Util exposing ((=>), pair) import Route +import Views.Assets as Assets import Page.Home.RatingsMenu as Menu +import Animation exposing (px) -- MODEL -- @@ -29,12 +31,20 @@ import Page.Home.RatingsMenu as Menu type alias Model = { errors : List String , menu : Menu.Model + , mapLayer : MapLayer + , style : Animation.State , anchors : OrderedDict String Point , cycleRoutes : OrderedDict String CycleRoute , segments : List Segment } +type alias Styles = + { open : List Animation.Property + , closed : List Animation.Property + } + + cycleRouteKey : String -> String -> String cycleRouteKey first second = first ++ "_" ++ second @@ -62,12 +72,23 @@ initModel : List Segment -> Model initModel segments = { errors = [] , menu = Menu.initModel + , mapLayer = SurfaceQuality + , style = Animation.style styles.closed , anchors = OrdDict.empty , cycleRoutes = OrdDict.empty , segments = segments } +styles : Styles +styles = + { open = + [ Animation.paddingLeft (px 400.0) ] + , closed = + [ Animation.paddingLeft (px 0.0) ] + } + + -- VIEW -- @@ -83,17 +104,59 @@ g = view : Session -> Model -> Html Msg view session model = - div [] - [ div [ id MainView ] [] - , div - [ id AddRatingButton - , g.class [ PrimaryButton ] - , onClick <| MenuMsg Menu.ShowMenu + let + addRatingCmd = + case session.user of + Nothing -> + ShowLogin + + Just _ -> + MenuMsg Menu.ShowMenu + + legend = + case model.mapLayer of + SurfaceQuality -> + img [ id MapLegend, Assets.src Assets.surfaceQuality ] [] + + TrafficSafety -> + img [ id MapLegend, Assets.src Assets.trafficSafety ] [] + + _ -> + img [] [] + in + div [] + [ div [ id MainView ] [] + , div + [ g.class [ PrimaryButton ] + , id AddRatingButton + , onClick addRatingCmd + ] + [ text "Add Rating" ] + , legend + , div + (Animation.render model.style ++ [ id MapSwitcher ]) + [ div [] + [ div + [ g.classList + [ ( PrimaryButton, model.mapLayer == SurfaceQuality ) + , ( SecondaryButton, model.mapLayer /= SurfaceQuality ) + ] + , onClick <| SetLayer SurfaceQuality + ] + [ text "Surface Quality" ] + , div + [ g.classList + [ ( PrimaryButton, model.mapLayer == TrafficSafety ) + , ( SecondaryButton, model.mapLayer /= TrafficSafety ) + ] + , onClick <| SetLayer TrafficSafety + ] + [ text "Traffic Safety" ] + ] + ] + , Menu.view model.menu |> Html.map MenuMsg + , accountView session ] - [ text "Add Rating" ] - , Menu.view model.menu |> Html.map MenuMsg - , accountView session - ] accountView : Session -> Html Msg @@ -102,7 +165,12 @@ accountView session = Nothing -> a [ Route.href Route.Login ] - [ div [ class [ GoToAccount ] ] [ text "Sign In" ] ] + [ div + [ class [ GoToAccount ] + , g.class [ SecondaryButton ] + ] + [ text "Sign In" ] + ] Just user -> a @@ -117,6 +185,7 @@ subscriptions model = , Ports.setAnchor (DropAnchorPoint True) , Ports.moveAnchor (DropAnchorPoint False) , Menu.subscriptions model.menu |> Sub.map MenuMsg + , Animation.subscription AnimateSwitcher [ model.style ] ] @@ -125,7 +194,10 @@ subscriptions model = type Msg - = DropAnchorPoint Bool ( String, Float, Float ) + = SetLayer MapLayer + | ShowLogin + | AnimateSwitcher Animation.Msg + | DropAnchorPoint Bool ( String, Float, Float ) | NewAnchorPoint String (Result Http.Error Point) | ChangeAnchorPoint String (Result Http.Error Point) | RemoveAnchorPoint String @@ -162,6 +234,34 @@ update session msg model = addRoute apiUrl maybeAuthToken cycleRoutes in case msg of + SetLayer layer -> + let + stringLayer = + case layer of + PlainMap -> + "PlainMap" + + SurfaceQuality -> + "SurfaceQuality" + + TrafficSafety -> + "TrafficSafety" + + SegmentsView -> + "SegmentsView" + in + { model | mapLayer = layer } + => Ports.setLayer stringLayer + => NoOp + + ShowLogin -> + model => Cmd.none => Unauthorized + + AnimateSwitcher animMsg -> + { model | style = Animation.update animMsg model.style } + => Cmd.none + => NoOp + DropAnchorPoint new ( pointId, lat, lng ) -> let ( anchorCount, handler ) = @@ -521,14 +621,27 @@ update session msg model = |> Util.appendErrors model => Cmd.none - Menu.Closed -> + Menu.OpenMenu -> + { model + | style = + Animation.interrupt + [ Animation.to styles.open ] + model.style + } + => Cmd.none + + Menu.CloseMenu -> { model | anchors = OrdDict.empty , cycleRoutes = OrdDict.empty + , style = + Animation.interrupt + [ Animation.to styles.closed ] + model.style } => Cmd.none - Menu.Completed sRating tRating sType pType -> + Menu.Completed sRating tRating name desc -> let polylines = model.cycleRoutes @@ -536,13 +649,13 @@ update session msg model = |> List.map .polyline createSegmentForm = - { name = menu.name - , description = menu.description + { name = name + , description = desc , polylines = polylines , surfaceRating = sRating , trafficRating = tRating - , surface = sType - , pathType = pType + , surface = UnknownSurface + , pathType = UnknownPath } req = diff --git a/web/src/Page/Home/RatingsMenu.elm b/web/src/Page/Home/RatingsMenu.elm index 43a06b2..9bb05bd 100644 --- a/web/src/Page/Home/RatingsMenu.elm +++ b/web/src/Page/Home/RatingsMenu.elm @@ -1,15 +1,15 @@ module Page.Home.RatingsMenu exposing (view, subscriptions, update, anchorCountUpdate, Model, Msg(..), ExternalMsg(..), initModel) -import Data.Map exposing (SurfaceType(..), PathType(..)) import Html exposing (..) -import Html.Attributes as Attr exposing (type_, value) -import Html.Events exposing (onClick, onInput) +import Html.Attributes as Attr exposing (type_, value, for, title, name, checked, placeholder) +import Html.Events exposing (onClick, onInput, onMouseEnter, onMouseLeave) +import Svg exposing (svg, polygon, line, polyline) +import Svg.Attributes exposing (xmlSpace, width, height, viewBox, fill, stroke, strokeWidth, strokeLinecap, strokeLinejoin, points, x1, x2, y1, y2) import Stylesheets exposing (globalNamespace, mapNamespace, CssIds(..), CssClasses(..)) import Html.CssHelpers exposing (Namespace) import Animation exposing (px, percent) import Util exposing ((=>)) import Ports -import Views.Assets as Assets -- MODEL -- @@ -17,30 +17,25 @@ import Views.Assets as Assets type MenuStep = NeedAnchorsPlaced - | AddRatings - -- | AddTags + | AddSurfaceRating + | AddTrafficRating | AddName type alias Model = { step : MenuStep , style : Animation.State - , progress : Animation.State - , autoAdvance : Bool - , name : String - , description : String + , ratingHover : Maybe Int , surfaceRating : Maybe Int , trafficRating : Maybe Int - - -- , surfaceType : Maybe SurfaceType - -- , pathType : Maybe PathType + , name : String + , description : String } type alias Styles = { open : List Animation.Property , closed : List Animation.Property - , progressWidth : Float -> List Animation.Property } @@ -48,15 +43,11 @@ initModel : Model initModel = { step = NeedAnchorsPlaced , style = Animation.style styles.closed - , progress = Animation.style <| styles.progressWidth 33.3 - , autoAdvance = True - , name = "" - , description = "" + , ratingHover = Nothing , surfaceRating = Nothing , trafficRating = Nothing - - -- , surfaceType = Nothing - -- , pathType = Nothing + , name = "" + , description = "" } @@ -65,9 +56,7 @@ styles = { open = [ Animation.left (px 0.0) ] , closed = - [ Animation.left (px -400.0) ] - , progressWidth = - (\p -> [ Animation.width (percent p) ]) + [ Animation.left (px -405.0) ] } @@ -86,46 +75,93 @@ g = view : Model -> Html Msg view model = - -- TODO: Add info about ratings div (Animation.render model.style ++ [ id SaveRatingControl ]) - (toolBar model ++ [ ratingsControl model, ratingsInfo model.step ]) + [ menuClose model.step + , ratingsControl model + , menuProgress model + ] -toolBar : Model -> List (Html Msg) -toolBar model = +menuClose : MenuStep -> Html Msg +menuClose step = let - close = - img - [ class [ CloseMenu ] - , Assets.src Assets.close - , onClick ClearAnchors + strokeColor = + case step of + AddName -> + whiteString + + _ -> + blackString + in + span + [ class [ CloseMenu ] + , g.class [ SymbolButton ] + , onClick ClearAnchors + ] + [ svg + [ xmlSpace "http://www.w3.org/2000/svg" + , width "24" + , height "24" + , viewBox "0 0 24 24" + , fill "none" + , stroke strokeColor + , strokeWidth "2" + , strokeLinecap "round" + , strokeLinejoin "round" ] - [] + [ line [ x1 "18", y1 "6", x2 "6", y2 "18" ] [] + , line [ x1 "6", y1 "6", x2 "18", y2 "18" ] [] + ] + ] + +menuProgress : Model -> Html Msg +menuProgress model = + let back step = - img + span [ class [ BackMenu ] - , Assets.src Assets.backArrow - , onClick <| SetMenuStep True step + , g.class [ SecondaryButton, SymbolButton ] + , onClick <| SetMenuStep step + ] + [ svg + [ xmlSpace "http://www.w3.org/2000/svg" + , width "24" + , height "24" + , viewBox "0 0 24 24" + , fill "none" + , stroke greyString + , strokeWidth "2" + , strokeLinecap "round" + , strokeLinejoin "round" + ] + [ line [ x1 "20", y1 "12", x2 "4", y2 "12" ] [] + , polyline [ points "10 18 4 12 10 6" ] [] + ] ] - [] next click = - img + span [ class [ NextMenu ] - , Assets.src Assets.nextArrow + , g.class [ PrimaryButton, SymbolButton ] , click ] - [] - - done = - img - [ class [ DoneMenu ] - , Assets.src Assets.done - , onClick SaveSegment + [ svg + [ xmlSpace "http://www.w3.org/2000/svg" + , width "24" + , height "24" + , viewBox "0 0 24 24" + , fill "none" + , stroke whiteString + , strokeWidth "2" + , strokeLinecap "round" + , strokeLinejoin "round" + ] + [ line [ x1 "4", y1 "12", x2 "20", y2 "12" ] [] + , polyline [ points "14 6 20 12 14 18" ] [] + ] ] - [] nothing = span [] [] @@ -133,29 +169,53 @@ toolBar model = ( leftAction, rightAction ) = case model.step of NeedAnchorsPlaced -> - ( close, nothing ) - - AddRatings -> - if - model.surfaceRating - /= Nothing - && model.trafficRating - /= Nothing - then - ( close, next <| onClick <| SetMenuStep False AddName ) - else - ( close, next <| class [ Disabled ] ) + ( nothing, nothing ) + + AddSurfaceRating -> + case model.surfaceRating of + Nothing -> + ( nothing, next <| class [ Disabled ] ) + + Just _ -> + ( nothing + , next <| onClick <| SetMenuStep AddTrafficRating + ) + + AddTrafficRating -> + case model.trafficRating of + Nothing -> + ( back AddSurfaceRating + , next <| class [ Disabled ] + ) + + Just _ -> + ( back AddSurfaceRating + , next <| onClick <| SetMenuStep AddName + ) - -- AddTags -> - -- ( back AddRatings, next AddName ) AddName -> - ( back AddRatings, done ) + ( back AddTrafficRating, nothing ) in - [ leftAction - , div - [ class [ ProgressBar ] ] - [ div (Animation.render model.progress) [] ] - , rightAction + div [ class [ ProgressBar ] ] + [ leftAction + , progressDots model.step + , rightAction + ] + + +progressDots : MenuStep -> Html Msg +progressDots step = + div [ class [ ProgressDots ] ] + [ span + [ classList [ ( Active, step == NeedAnchorsPlaced ) ] ] + [ text "⬤" ] + , span + [ classList [ ( Active, step == AddSurfaceRating ) ] ] + [ text "⬤" ] + , span + [ classList [ ( Active, step == AddTrafficRating ) ] ] + [ text "⬤" ] + , span [ classList [ ( Active, step == AddName ) ] ] [ text "⬤" ] ] @@ -165,281 +225,397 @@ ratingsControl model = NeedAnchorsPlaced -> needAnchorsPlaced - AddRatings -> - addRatings model + AddSurfaceRating -> + addSurfaceRating model + + AddTrafficRating -> + addTrafficRating model - -- AddTags -> - -- addTags model AddName -> addName model +star : String -> String -> Html msg +star fillColor strokeColor = + svg + [ xmlSpace "http://www.w3.org/2000/svg" + , width "32" + , height "32" + , viewBox "0 0 32 32" + , fill fillColor + , stroke strokeColor + , strokeWidth "1" + , strokeLinecap "round" + , strokeLinejoin "round" + ] + [ polygon [ points "16,2 20.326,11.216 30,12.703 23.001,19.872 24.651,30 16,25.215 7.348,30 9,19.872 2,12.703 11.675,11.216" ] [] ] + + +surfaceRatingOneString : String +surfaceRatingOneString = + "rgb(166, 3, 15)" + + +surfaceRatingTwoString : String +surfaceRatingTwoString = + "rgb(198, 97, 22)" + + +surfaceRatingThreeString : String +surfaceRatingThreeString = + "rgb(230, 191, 28)" + + +surfaceRatingFourString : String +surfaceRatingFourString = + "rgb(143, 191, 28)" + + +surfaceRatingFiveString : String +surfaceRatingFiveString = + "rgb(56, 191, 28)" + + +trafficRatingOneString : String +trafficRatingOneString = + "rgb(200, 3, 15)" + + +trafficRatingTwoString : String +trafficRatingTwoString = + "rgb(150, 23, 88)" + + +trafficRatingThreeString : String +trafficRatingThreeString = + "rgb(100, 42, 160)" + + +trafficRatingFourString : String +trafficRatingFourString = + "rgb(64, 54, 198)" + + +trafficRatingFiveString : String +trafficRatingFiveString = + "rgb(27, 65, 236)" + + +whiteString : String +whiteString = + "rgb(255, 255, 255)" + + +greyString : String +greyString = + "rgb(170, 170, 170)" + + +blackString : String +blackString = + "rgb(44, 44, 44)" + + needAnchorsPlaced : Html Msg needAnchorsPlaced = - div [ class [ NeedAnchorsControl ] ] - [ -- span [ Attr.class "fa fa-times", onClick ClearAnchors ] [] - h3 [] [ text "Start by placing points on the map to select a road" ] + div [ class [ RatingsMenu ] ] + [ div [] [] + , h2 [] + [ text "Start by selecting your route on the " + , span [] [ text "map" ] + , text "." + ] ] -addRatings : Model -> Html Msg -addRatings model = - div [ class [ AddRatingsControl ] ] - [ -- span [ Attr.class "fa fa-times", onClick ClearAnchors ] [] - -- , div - -- [ class [ ProgressBar ] ] - -- [ div (Animation.render model.progress) [] ] - -- , span - -- [ g.class [ PrimaryButton ] - -- , Attr.class "fa fa-arrow-right" - -- , case ( model.surfaceRating, model.trafficRating ) of - -- ( Just _, Just _ ) -> - -- onClick <| SetMenuStep AddTags - -- _ -> - -- class [ Disabled ] - -- ] - -- [] - div - [ class [ SurfaceRatingMenu ] ] - [ h2 [] [ text "Surface Rating" ] - , div - [ onClick <| ChangeSurfaceRating <| Just 1 - , classList - [ ( SurfaceRatingOne, True ) - , ( Active, model.surfaceRating == Just 1 ) - ] +addSurfaceRating : Model -> Html Msg +addSurfaceRating model = + let + selectedRating = + case ( model.surfaceRating, model.ratingHover ) of + ( _, Just ratingHover ) -> + Just ratingHover + + ( Just surfaceRating, Nothing ) -> + Just surfaceRating + + ( Nothing, Nothing ) -> + Nothing + + ratingInfo = + case selectedRating of + Just 1 -> + "For all intents and purposes this road doesn't exist" + + Just 2 -> + "This road is in desperate need of some repairs" + + Just 3 -> + "This road can be a bit bumpy but its certainly rideable" + + Just 4 -> + "Its not perfect but this is a good road for riding" + + Just 5 -> + "If all roads were like this road you'd never leave the saddle" + + _ -> + "" + + starActive rating = + case ( model.surfaceRating, model.ratingHover ) of + ( _, Just ratingHover ) -> + if ratingHover >= 5 && rating <= 5 then + star surfaceRatingFiveString surfaceRatingFiveString + else if ratingHover >= 4 && rating <= 4 then + star surfaceRatingFourString surfaceRatingFourString + else if ratingHover >= 3 && rating <= 3 then + star surfaceRatingThreeString surfaceRatingThreeString + else if ratingHover >= 2 && rating <= 2 then + star surfaceRatingTwoString surfaceRatingTwoString + else if ratingHover >= 1 && rating <= 1 then + star surfaceRatingOneString surfaceRatingOneString + else + star whiteString greyString + + ( Just surfaceRating, Nothing ) -> + if surfaceRating >= 5 && rating <= 5 then + star surfaceRatingFiveString surfaceRatingFiveString + else if surfaceRating >= 4 && rating <= 4 then + star surfaceRatingFourString surfaceRatingFourString + else if surfaceRating >= 3 && rating <= 3 then + star surfaceRatingThreeString surfaceRatingThreeString + else if surfaceRating >= 2 && rating <= 2 then + star surfaceRatingTwoString surfaceRatingTwoString + else if surfaceRating >= 1 && rating <= 1 then + star surfaceRatingOneString surfaceRatingOneString + else + star whiteString greyString + + ( Nothing, Nothing ) -> + star whiteString greyString + in + div [ class [ RatingsMenu ] ] + [ div [] [] + , h2 [] + [ text "How would rate the " + , span [] [ text "surface quality" ] + , text "?" ] - [] , div - [ onClick <| ChangeSurfaceRating <| Just 2 - , classList - [ ( SurfaceRatingTwo, True ) - , ( Active, model.surfaceRating == Just 2 ) + [ class [ RatingsControl ] ] + [ span + [ onClick <| ChangeSurfaceRating <| Just 1 + , onMouseEnter <| ChangeRatingHover <| Just 1 + , onMouseLeave <| ChangeRatingHover Nothing ] - ] - [] - , div - [ onClick <| ChangeSurfaceRating <| Just 3 - , classList - [ ( SurfaceRatingThree, True ) - , ( Active, model.surfaceRating == Just 3 ) + [ starActive 1 ] + , span + [ onClick <| ChangeSurfaceRating <| Just 2 + , onMouseEnter <| ChangeRatingHover <| Just 2 + , onMouseLeave <| ChangeRatingHover Nothing ] - ] - [] - , div - [ onClick <| ChangeSurfaceRating <| Just 4 - , classList - [ ( SurfaceRatingFour, True ) - , ( Active, model.surfaceRating == Just 4 ) + [ starActive 2 ] + , span + [ onClick <| ChangeSurfaceRating <| Just 3 + , onMouseEnter <| ChangeRatingHover <| Just 3 + , onMouseLeave <| ChangeRatingHover Nothing ] - ] - [] - , div - [ onClick <| ChangeSurfaceRating <| Just 5 - , classList - [ ( SurfaceRatingFive, True ) - , ( Active, model.surfaceRating == Just 5 ) + [ starActive 3 ] + , span + [ onClick <| ChangeSurfaceRating <| Just 4 + , onMouseEnter <| ChangeRatingHover <| Just 4 + , onMouseLeave <| ChangeRatingHover Nothing ] + [ starActive 4 ] + , span + [ onClick <| ChangeSurfaceRating <| Just 5 + , onMouseEnter <| ChangeRatingHover <| Just 5 + , onMouseLeave <| ChangeRatingHover Nothing + ] + [ starActive 5 ] ] - [] + , div [ class [ RatingInfo ] ] [ text ratingInfo ] ] - , div - [ class [ TrafficRatingMenu ] ] - [ h2 [] [ text "Traffic Rating" ] - , div - [ onClick <| ChangeTrafficRating <| Just 1 - , classList - [ ( TrafficRatingOne, True ) - , ( Active, model.trafficRating == Just 1 ) - ] + + +addTrafficRating : Model -> Html Msg +addTrafficRating model = + let + selectedRating = + case ( model.trafficRating, model.ratingHover ) of + ( _, Just ratingHover ) -> + Just ratingHover + + ( Just trafficRating, Nothing ) -> + Just trafficRating + + ( Nothing, Nothing ) -> + Nothing + + ratingInfo = + case selectedRating of + Just 1 -> + "Heavy motor traffic, avoid riding this road at all costs" + + Just 2 -> + "Lots of car traffic, you would only ride as a last resort" + + Just 3 -> + "Some car traffic but this road is definitely rideable" + + Just 4 -> + "Fairly light car traffic, this is a good road for riding" + + Just 5 -> + "Virtually no car traffic, you could ride here for days" + + _ -> + "" + + starActive rating = + case ( model.trafficRating, model.ratingHover ) of + ( _, Just ratingHover ) -> + if ratingHover >= 5 && rating <= 5 then + star trafficRatingFiveString trafficRatingFiveString + else if ratingHover >= 4 && rating <= 4 then + star trafficRatingFourString trafficRatingFourString + else if ratingHover >= 3 && rating <= 3 then + star trafficRatingThreeString trafficRatingThreeString + else if ratingHover >= 2 && rating <= 2 then + star trafficRatingTwoString trafficRatingTwoString + else if ratingHover >= 1 && rating <= 1 then + star trafficRatingOneString trafficRatingOneString + else + star whiteString greyString + + ( Just trafficRating, Nothing ) -> + if trafficRating >= 5 && rating <= 5 then + star trafficRatingFiveString trafficRatingFiveString + else if trafficRating >= 4 && rating <= 4 then + star trafficRatingFourString trafficRatingFourString + else if trafficRating >= 3 && rating <= 3 then + star trafficRatingThreeString trafficRatingThreeString + else if trafficRating >= 2 && rating <= 2 then + star trafficRatingTwoString trafficRatingTwoString + else if trafficRating >= 1 && rating <= 1 then + star trafficRatingOneString trafficRatingOneString + else + star whiteString greyString + + ( Nothing, Nothing ) -> + star whiteString greyString + in + div [ class [ RatingsMenu ] ] + [ div [] [] + , h2 [] + [ text "How would rate the " + , span [] [ text "traffic safety" ] + , text "?" ] - [] , div - [ onClick <| ChangeTrafficRating <| Just 2 - , classList - [ ( TrafficRatingTwo, True ) - , ( Active, model.trafficRating == Just 2 ) + [ class [ RatingsControl ] ] + [ span + [ onClick <| ChangeTrafficRating <| Just 1 + , onMouseEnter <| ChangeRatingHover <| Just 1 + , onMouseLeave <| ChangeRatingHover Nothing ] - ] - [] - , div - [ onClick <| ChangeTrafficRating <| Just 3 - , classList - [ ( TrafficRatingThree, True ) - , ( Active, model.trafficRating == Just 3 ) + [ starActive 1 ] + , span + [ onClick <| ChangeTrafficRating <| Just 2 + , onMouseEnter <| ChangeRatingHover <| Just 2 + , onMouseLeave <| ChangeRatingHover Nothing ] - ] - [] - , div - [ onClick <| ChangeTrafficRating <| Just 4 - , classList - [ ( TrafficRatingFour, True ) - , ( Active, model.trafficRating == Just 4 ) + [ starActive 2 ] + , span + [ onClick <| ChangeTrafficRating <| Just 3 + , onMouseEnter <| ChangeRatingHover <| Just 3 + , onMouseLeave <| ChangeRatingHover Nothing ] - ] - [] - , div - [ onClick <| ChangeTrafficRating <| Just 5 - , classList - [ ( TrafficRatingFive, True ) - , ( Active, model.trafficRating == Just 5 ) + [ starActive 3 ] + , span + [ onClick <| ChangeTrafficRating <| Just 4 + , onMouseEnter <| ChangeRatingHover <| Just 4 + , onMouseLeave <| ChangeRatingHover Nothing + ] + [ starActive 4 ] + , span + [ onClick <| ChangeTrafficRating <| Just 5 + , onMouseEnter <| ChangeRatingHover <| Just 5 + , onMouseLeave <| ChangeRatingHover Nothing ] + [ starActive 5 ] ] - [] + , div [ class [ RatingInfo ] ] [ text ratingInfo ] ] - ] - - - --- addTags : Model -> Html Msg --- addTags model = --- div [ class [ AddTagsControl ] ] --- [ div --- [ class [ SurfaceTypeMenu ] ] --- [ h2 [] [ text "Surface Type" ] --- , div --- [ onClick <| ChangeSurfaceType <| Just Asphalt --- , classList [ ( Active, model.surface == Just Asphalt ) ] --- ] --- [ text "Asphalt" ] --- , div --- [ onClick <| ChangeSurfaceType <| Just Gravel --- , classList [ ( Active, model.surface == Just Gravel ) ] --- ] --- [ text "Gravel" ] --- , div --- [ onClick <| ChangeSurfaceType <| Just Dirt --- , classList [ ( Active, model.surface == Just Dirt ) ] --- ] --- [ text "Dirt" ] --- ] --- , div --- [ class [ PathTypeMenu ] ] --- [ h2 [] [ text "Path Type" ] --- , div --- [ onClick <| ChangePathType <| Just Shared --- , classList [ ( Active, model.pathType == Just Shared ) ] --- ] --- [ text "Shared Road" ] --- , div --- [ onClick <| ChangePathType <| Just DedicatedLane --- , classList [ ( Active, model.pathType == Just DedicatedLane ) ] --- ] --- [ text "Bike Lane" ] --- , div --- [ onClick <| ChangePathType <| Just BikePath --- , classList [ ( Active, model.pathType == Just BikePath ) ] --- ] --- [ text "Bike Path" ] --- ] --- ] addName : Model -> Html Msg addName model = - div [ class [ AddNameControl ] ] - [ -- span [ Attr.class "fa fa-times", onClick ClearAnchors ] [] - -- , div - -- [ class [ ProgressBar ] ] - -- [ div (Animation.render model.progress) [] ] - -- , div - -- [ Attr.class "fa fa-arrow-left" - -- , onClick <| SetMenuStep AddTags - -- ] - -- [] - -- , span - -- [ g.class [ PrimaryButton ] - -- , Attr.class "fa fa-check" - -- , onClick SaveSegment - -- ] - -- [] - div [] [ h2 [] [ text "Make Segment (Optional)" ] ] - , div - [ class [ SegmentNameInput ] ] - [ span [] [ text "Name" ] + let + activeStar modelRating rating = + case modelRating of + Nothing -> + star "transparent" whiteString + + Just number -> + if number >= rating then + star whiteString whiteString + else + star "transparent" whiteString + in + div [] + [ div [ class [ RatingsSummary ] ] + [ div [] [ text "Surface Quality" ] + , div [] + [ span [] [ activeStar model.surfaceRating 1 ] + , span [] [ activeStar model.surfaceRating 2 ] + , span [] [ activeStar model.surfaceRating 3 ] + , span [] [ activeStar model.surfaceRating 4 ] + , span [] [ activeStar model.surfaceRating 5 ] + ] + , div [] [ text "Traffic Safety" ] + , div [] + [ span [] [ activeStar model.trafficRating 1 ] + , span [] [ activeStar model.trafficRating 2 ] + , span [] [ activeStar model.trafficRating 3 ] + , span [] [ activeStar model.trafficRating 4 ] + , span [] [ activeStar model.trafficRating 5 ] + ] + , span + [ g.class [ SecondaryButton ] + , class [ SaveButton ] + , onClick <| SaveSegment True + ] + [ text "Quick Save" ] + ] , input - [ type_ "text", onInput ChangeName, value model.name ] + [ class [ SegmentNameInput ] + , type_ "text" + , onInput ChangeName + , value model.name + , placeholder "Name" + ] [] - ] - , div - [ class [ SegmentDescriptionInput ] ] - [ span [] [ text "Description" ] , textarea - [ onInput ChangeDescription + [ class [ SegmentDescriptionInput ] + , onInput ChangeDescription , value model.description + , placeholder "Description" ] [] - ] - ] - - -ratingsInfo : MenuStep -> Html Msg -ratingsInfo step = - case step of - NeedAnchorsPlaced -> - span [] [] - - AddRatings -> - div [ class [ AddRatingsInfo ] ] - [ h2 [] [ text "Surface Rating Details" ] - , div - [] - [ div [ class [ SurfaceRatingOne ] ] [] - , span [] [ text "For all intents and purposes this road doesn't exist" ] - ] - , div - [] - [ div [ class [ SurfaceRatingTwo ] ] [] - , span [] [ text "This road is in desperate need of some repairs" ] - ] - , div - [] - [ div [ class [ SurfaceRatingThree ] ] [] - , span [] [ text "This road can be a bit bumpy but its certainly rideable" ] - ] - , div - [] - [ div [ class [ SurfaceRatingFour ] ] [] - , span [] [ text "Its not perfect but this is a good road for riding" ] - ] - , div - [] - [ div [ class [ SurfaceRatingFive ] ] [] - , span [] [ text "If all roads were like this road you'd never leave the saddle" ] - ] - , h2 [] [ text "Traffic Rating Details" ] - , div - [] - [ div [ class [ TrafficRatingOne ] ] [] - , span [] [ text "Heavy motor traffic, avoid riding this road at all costs" ] - ] - , div - [] - [ div [ class [ TrafficRatingTwo ] ] [] - , span [] [ text "Lots of car traffic, you would only ride as a last resort" ] - ] - , div - [] - [ div [ class [ TrafficRatingThree ] ] [] - , span [] [ text "Some car traffic but this road is definitely rideable" ] - ] - , div - [] - [ div [ class [ TrafficRatingFour ] ] [] - , span [] [ text "Fairly light car traffic, this is a good road for riding" ] - ] - , div - [] - [ div [ class [ TrafficRatingFive ] ] [] - , span [] [ text "Virtually no car traffic, you could ride here for days" ] - ] + , div + [ g.class [ PrimaryButton ] + , class [ SaveButton ] + , onClick <| SaveSegment False ] - - AddName -> - div [ class [ AddNameInfo ] ] - [ h2 [] [ text "Why make a segment?" ] - , h3 [] [ text "If you add a name and/or description this section of road will be saved to your segments for you to easily access again later for rating." ] + [ text "Save as Segment" ] + , div + [ class [ SegmentInfo ] ] + [ h3 [] [ text "Why save as a segment?" ] + , h4 [] [ text "If you save a rating as a segment it allows you to easily access it later to make another rating." ] ] + ] @@ -448,10 +624,7 @@ ratingsInfo step = subscriptions : Model -> Sub Msg subscriptions model = - Sub.batch - [ Animation.subscription AnimateMenu [ model.style ] - , Animation.subscription AnimateProgress [ model.progress ] - ] + Animation.subscription AnimateMenu [ model.style ] @@ -459,23 +632,22 @@ subscriptions model = type Msg - = SetMenuStep Bool MenuStep + = SetMenuStep MenuStep | ShowMenu | AnimateMenu Animation.Msg - | AnimateProgress Animation.Msg - | ChangeName String - | ChangeDescription String + | ChangeRatingHover (Maybe Int) | ChangeSurfaceRating (Maybe Int) | ChangeTrafficRating (Maybe Int) - -- | ChangePathType (Maybe PathType) - -- | ChangeSurfaceType (Maybe SurfaceType) + | ChangeName String + | ChangeDescription String | ClearAnchors - | SaveSegment + | SaveSegment Bool type ExternalMsg - = Closed - | Completed Int Int SurfaceType PathType + = OpenMenu + | CloseMenu + | Completed Int Int String String | Error String | NoOp @@ -483,25 +655,9 @@ type ExternalMsg anchorCountUpdate : Int -> Model -> Model anchorCountUpdate anchorCount model = if anchorCount < 2 then - { model - | step = NeedAnchorsPlaced - , progress = - Animation.interrupt - [ Animation.to <| - styles.progressWidth 33.3 - ] - model.progress - } + { model | step = NeedAnchorsPlaced } else if anchorCount == 2 && model.step == NeedAnchorsPlaced then - { model - | step = AddRatings - , progress = - Animation.interrupt - [ Animation.to <| - styles.progressWidth 66.6 - ] - model.progress - } + { model | step = AddSurfaceRating } else model @@ -509,44 +665,8 @@ anchorCountUpdate anchorCount model = update : Msg -> Model -> ( ( Model, Cmd Msg ), ExternalMsg ) update msg model = case msg of - SetMenuStep disableAutoAdvance step -> - let - progress = - case step of - NeedAnchorsPlaced -> - Animation.interrupt - [ Animation.to <| - styles.progressWidth 33.3 - ] - model.progress - - AddRatings -> - Animation.interrupt - [ Animation.to <| - styles.progressWidth 66.6 - ] - model.progress - - -- AddTags -> - -- Animation.interrupt - -- [ Animation.to <| - -- styles.progressWidth 75.0 - -- ] - -- model.progress - AddName -> - Animation.interrupt - [ Animation.to <| - styles.progressWidth 100.0 - ] - model.progress - in - { model - | step = step - , progress = progress - , autoAdvance = not disableAutoAdvance - } - => Cmd.none - => NoOp + SetMenuStep step -> + { model | step = step } => Cmd.none => NoOp ShowMenu -> { initModel @@ -556,17 +676,21 @@ update msg model = model.style } => Ports.routeCreate () - => NoOp + => OpenMenu AnimateMenu animMsg -> { model | style = Animation.update animMsg model.style } => Cmd.none => NoOp - AnimateProgress animMsg -> - { model | progress = Animation.update animMsg model.progress } - => Cmd.none - => NoOp + ChangeRatingHover rating -> + { model | ratingHover = rating } => Cmd.none => NoOp + + ChangeSurfaceRating rating -> + { model | surfaceRating = rating } => Cmd.none => NoOp + + ChangeTrafficRating rating -> + { model | trafficRating = rating } => Cmd.none => NoOp ChangeName name -> { model | name = name } => Cmd.none => NoOp @@ -574,92 +698,6 @@ update msg model = ChangeDescription description -> { model | description = description } => Cmd.none => NoOp - ChangeSurfaceRating rating -> - let - ( progress, step ) = - case ( model.autoAdvance, rating, model.trafficRating ) of - ( True, Just _, Just _ ) -> - ( Animation.interrupt - [ Animation.to <| - styles.progressWidth 100.0 - ] - model.progress - , AddName - ) - - _ -> - ( model.progress, model.step ) - in - { model - | surfaceRating = rating - , progress = progress - , step = step - } - => Cmd.none - => NoOp - - ChangeTrafficRating rating -> - let - ( progress, step ) = - case ( model.autoAdvance, rating, model.surfaceRating ) of - ( True, Just _, Just _ ) -> - ( Animation.interrupt - [ Animation.to <| - styles.progressWidth 100.0 - ] - model.progress - , AddName - ) - - _ -> - ( model.progress, model.step ) - in - { model - | trafficRating = rating - , progress = progress - , step = step - } - => Cmd.none - => NoOp - - -- ChangePathType pathType -> - -- let - -- progress = - -- case ( pathType, model.surface ) of - -- ( Just _, Just _ ) -> - -- Animation.interrupt - -- [ Animation.to <| - -- styles.progressWidth 100.0 - -- ] - -- model.progress - -- _ -> - -- model.progress - -- in - -- { model - -- | pathType = pathType - -- , progress = progress - -- } - -- => Cmd.none - -- => NoOp - -- ChangeSurfaceType surfaceType -> - -- let - -- progress = - -- case ( surfaceType, model.pathType ) of - -- ( Just _, Just _ ) -> - -- Animation.interrupt - -- [ Animation.to <| - -- styles.progressWidth 100.0 - -- ] - -- model.progress - -- _ -> - -- model.progress - -- in - -- { model - -- | surface = surfaceType - -- , progress = progress - -- } - -- => Cmd.none - -- => NoOp ClearAnchors -> { model | style = @@ -668,22 +706,25 @@ update msg model = model.style } => Ports.clearRoute () - => Closed - - SaveSegment -> - case - ( model.surfaceRating - , model.trafficRating - -- , model.surfaceType - -- , model.pathType - ) - of - ( Just sRating, Just tRating ) -> - model - => Ports.clearRoute () - => Completed sRating tRating UnknownSurface UnknownPath + => CloseMenu - _ -> - model - => Cmd.none - => Error "There was a client error saving your segment. Sorry!" + SaveSegment quickSave -> + let + ( name, description ) = + if quickSave == True then + ( "", "" ) + else + ( model.name, model.description ) + in + case + ( model.surfaceRating, model.trafficRating ) + of + ( Just sRating, Just tRating ) -> + model + => Ports.clearRoute () + => Completed sRating tRating name description + + _ -> + model + => Cmd.none + => Error "There was a client error saving your segment. Sorry!" diff --git a/web/src/Ports.elm b/web/src/Ports.elm index 85a46bb..cd19357 100644 --- a/web/src/Ports.elm +++ b/web/src/Ports.elm @@ -1,4 +1,4 @@ -port module Ports exposing (storeSession, onSessionChange, up, down, routeCreate, setAnchor, moveAnchor, removeAnchor, snapAnchor, displayRoute, removeRoute, clearRoute) +port module Ports exposing (storeSession, onSessionChange, up, down, setLayer, routeCreate, setAnchor, moveAnchor, removeAnchor, snapAnchor, displayRoute, removeRoute, clearRoute) import Data.Map exposing (Point) import Json.Encode exposing (Value) @@ -16,6 +16,9 @@ port up : () -> Cmd msg port down : () -> Cmd msg +port setLayer : String -> Cmd msg + + port routeCreate : () -> Cmd msg diff --git a/web/src/Stylesheets.elm b/web/src/Stylesheets.elm index 2e04979..9cd6fce 100644 --- a/web/src/Stylesheets.elm +++ b/web/src/Stylesheets.elm @@ -64,6 +64,8 @@ accountNamespace = type CssIds = MainView + | MapLegend + | MapSwitcher | AddRatingButton | SaveRatingControl | NameInput @@ -78,36 +80,23 @@ type CssIds type CssClasses = PrimaryButton | SecondaryButton + | SymbolButton | Active | Disabled -- Map Menu Classes | CloseMenu | BackMenu | NextMenu - | DoneMenu + | ProgressDots | ProgressBar - | NeedAnchorsControl - | AddRatingsControl - | AddRatingsInfo - | AddTagsControl - | AddNameControl - | AddNameInfo - | SurfaceRatingMenu - | TrafficRatingMenu - | SurfaceTypeMenu - | PathTypeMenu + | RatingsMenu + | RatingsControl + | RatingInfo + | RatingsSummary | SegmentNameInput | SegmentDescriptionInput - | SurfaceRatingOne - | SurfaceRatingTwo - | SurfaceRatingThree - | SurfaceRatingFour - | SurfaceRatingFive - | TrafficRatingOne - | TrafficRatingTwo - | TrafficRatingThree - | TrafficRatingFour - | TrafficRatingFive + | SaveButton + | SegmentInfo -- Page Frame Classes | PageFrame | NavBar @@ -256,27 +245,50 @@ globalCss = (stylesheet << namespace globalNamespace.name) [ class PrimaryButton [ padding2 (px 10) (px 20) + , display inlineBlock , border zero , borderRadius (px 3) - , backgroundColor rgbBlack + , backgroundColor rgbTrifectaGreen , color rgbWhite , boxShadow4 zero (px 1) (px 2) rgbDarkGray , cursor pointer , hover - [ backgroundColor <| lighter rgbBlack ] + [ backgroundColor <| darker rgbTrifectaGreen ] + , active + [ position relative + , top (px 2) + , left (px 2) + , boxShadow3 zero zero zero + , backgroundColor <| darker rgbTrifectaGreen + ] ] , class SecondaryButton [ padding2 (px 10) (px 20) - , border3 (px 1) solid rgbGray + , display inlineBlock , borderRadius (px 3) , backgroundColor rgbWhite - , color rgbGray + , color rgbTrifectaGreen + , boxShadow4 zero (px 1) (px 2) rgbDarkGray , cursor pointer , hover - [ borderColor <| darker rgbGray - , color <| darker rgbGray + [ backgroundColor <| darker rgbWhite ] + , active + [ position relative + , top (px 2) + , left (px 2) + , boxShadow3 zero zero zero + , backgroundColor <| darker rgbWhite ] ] + , class SymbolButton + [ width (px 30) + , height (px 30) + , padding zero + , borderRadius (pct 50) + , property "display" "flex" + , justifyContent center + , alignItems center + ] ] @@ -442,17 +454,49 @@ mapCss = [ position absolute , top (px 10) , left (px 10) + , zIndex (int 2) + , active + [ position absolute + , top (px 12) + , left (px 12) + ] + ] + , id MapSwitcher + [ position absolute + , top zero + , left zero + , right zero + , zIndex (int 1) + , children + [ div + [ margin3 (px 10) auto zero + , width (px 300) + , children + [ div + [ position relative + , width (px 150) + , boxSizing borderBox + , textAlign center + , firstChild + [ borderTopRightRadius zero + , borderBottomRightRadius zero + ] + , lastChild + [ borderTopLeftRadius zero + , borderBottomLeftRadius zero + ] + ] + ] + ] + ] + ] + , id MapLegend + [ position absolute + , top (px 75) + , left (px 10) + , width (px 36) + , borderRadius (px 18) ] - , class SurfaceRatingOne [ backgroundColor rgbSurfaceOne ] - , class SurfaceRatingTwo [ backgroundColor rgbSurfaceTwo ] - , class SurfaceRatingThree [ backgroundColor rgbSurfaceThree ] - , class SurfaceRatingFour [ backgroundColor rgbSurfaceFour ] - , class SurfaceRatingFive [ backgroundColor rgbSurfaceFive ] - , class TrafficRatingOne [ backgroundColor rgbTrafficOne ] - , class TrafficRatingTwo [ backgroundColor rgbTrafficTwo ] - , class TrafficRatingThree [ backgroundColor rgbTrafficThree ] - , class TrafficRatingFour [ backgroundColor rgbTrafficFour ] - , class TrafficRatingFive [ backgroundColor rgbTrafficFive ] , id SaveRatingControl [ position absolute , top zero @@ -461,295 +505,171 @@ mapCss = , backgroundColor (rgb 255 255 255) , boxShadow4 (px 1) zero (px 5) rgbDarkGray , overflow hidden + , zIndex (int 3) , descendants [ h2 - [ width (pct 100) - , textAlign center - , marginBottom zero - , fontSize (px 18) + [ width (px 250) + , fontSize (px 24) , fontWeight (int 400) + , margin4 (px 10) zero (px 25) zero + , children + [ span [ fontWeight (int 700) ] ] ] , class CloseMenu [ position absolute , top (px 15) - , left (px 15) - , width (px 23) - , lineHeight (px 21) - , padding (px 4) - , textAlign center + , right (px 15) , cursor pointer + , zIndex (int 2) , hover - [ borderRadius (pct 50) - , backgroundColor <| addAlpha 0.5 rgbWhite - , color rgbDarkGray - ] + [ backgroundColor <| addAlpha 0.5 rgbLightGray ] ] , class BackMenu [ position absolute - , top (px 15) , left (px 15) - , width (px 23) - , lineHeight (px 21) - , padding (px 4) - , textAlign center - , cursor pointer - , hover - [ borderRadius (pct 50) - , backgroundColor <| addAlpha 0.5 rgbWhite - , color rgbDarkGray + , bottom (px -9) + , active + [ position absolute + , top initial + , left (px 17) + , bottom (px -11) ] ] , class NextMenu [ position absolute - , top (px 15) , right (px 15) - , width (px 23) - , lineHeight (px 21) - , padding (px 4) - , textAlign center - , cursor pointer - , borderRadius (pct 50) - , backgroundColor rgbGray - , hover - [ backgroundColor <| darker rgbGray ] + , bottom (px -9) + , active + [ position absolute + , top initial + , left initial + , right (px 13) + , bottom (px -11) + ] ] - , class DoneMenu + , class ProgressBar [ position absolute - , top (px 15) - , right (px 15) - , width (px 23) - , lineHeight (px 21) - , padding4 (px 5) (px 4) (px 3) (px 4) - , textAlign center - , cursor pointer - , borderRadius (pct 50) - , backgroundColor rgbGray - , hover - [ backgroundColor <| darker rgbGray ] + , bottom (px 30) + , width (pct 100) ] - , class ProgressBar - [ border3 (px 1) solid rgbWhite - , height (px 15) - , width (px 200) - , position absolute - , top (px 22) - , property "left" "calc(50% - 100px)" + , class ProgressDots + [ display block + , margin2 zero auto + , width (px 100) , children - [ div - [ height (pct 100) - , width (px 33.3) - , backgroundColor rgbTrifectaBrightGreen + [ span + [ fontSize (px 8) + , color rgbLightGray + , display inlineBlock + , margin2 zero (px 5) + , withClass Active + [ color rgbTrifectaGreen ] ] ] ] , class Disabled [ display none ] - , class NeedAnchorsControl - [ padding3 (px 45) (px 25) (px 15) - , boxSizing borderBox - , backgroundColor rgbBlack - , color rgbWhite + , class RatingsMenu + [ marginTop (vh 30) + , marginLeft (px 50) , children - [ h3 - [ width (pct 100) - , textAlign center - , fontWeight (int 400) - ] - ] - ] - , class AddRatingsControl - [ padding3 (px 45) (px 15) (px 15) - , boxSizing borderBox - , backgroundColor rgbBlack - , color rgbWhite - ] - , class AddRatingsInfo - [ padding2 (px 30) (px 30) - , children - [ h2 - [ marginBottom (px 5) ] - , div - [ height (px 40) - , children - [ div - [ width (px 46) - , height (px 23) - , borderRadius (px 3) - , display inlineBlock - , verticalAlign top - , marginTop (px 7) - ] - , span - [ display inlineBlock - , marginLeft (px 10) - , width (px 260) - , fontSize (px 14) - ] + [ div + [ firstChild + [ width (px 125) + , height (px 8) + , backgroundColor rgbTrifectaGreen ] ] ] ] - - -- , class AddTagsControl - -- [ height (px 375) ] - , class AddNameControl - [ padding3 (px 45) (px 25) (px 25) - , backgroundColor rgbBlack - , color rgbWhite - ] - , class AddNameInfo - [ padding2 (px 30) (px 30) + , class RatingsControl + [ display block + , width (px 160) + , height (px 40) , children - [ h3 - [ fontSize (px 16) - , fontWeight (int 400) - , textAlign center + [ span + [ cursor pointer + , fontSize (px 32) + , color rgbLightGray + , active + [ position relative + , top (px 2) + , left (px 2) + ] ] ] ] - , class SurfaceRatingMenu - [ width (px 300) - , margin4 (px 30) auto (px 20) auto - , children - [ div - [ property "display" "inline-flex" - , width (px 46) - , height (px 23) - , borderRadius (px 3) - , alignItems center - , justifyContent center - , margin2 (px 10) (px 5) - , cursor pointer - , border3 (px 2) solid transparent - - -- , boxShadow5 (px 2) (px 2) (px 3) (px -1) <| lighter rgbLightGray - , withClass Active [ border3 (px 2) solid rgbWhite ] - , withClass SurfaceRatingOne - [ hover [ backgroundColor <| darker rgbSurfaceOne ] ] - , withClass SurfaceRatingTwo - [ hover [ backgroundColor <| darker rgbSurfaceTwo ] ] - , withClass SurfaceRatingThree - [ hover [ backgroundColor <| darker rgbSurfaceThree ] ] - , withClass SurfaceRatingFour - [ hover [ backgroundColor <| darker rgbSurfaceFour ] ] - , withClass SurfaceRatingFive - [ hover [ backgroundColor <| darker rgbSurfaceFive ] ] - ] - ] + , class RatingInfo + [ marginTop (px 5) + , width (px 300) + , fontSize (px 16) + , fontWeight (int 300) ] - , class TrafficRatingMenu - [ width (px 300) - , margin2 zero auto + , class RatingsSummary + [ backgroundColor rgbTrifectaGreen + , color rgbWhite + , padding2 (px 50) (px 15) + , position relative , children [ div - [ property "display" "inline-flex" - , width (px 46) - , height (px 23) - , borderRadius (px 3) - , alignItems center - , justifyContent center - , margin2 (px 10) (px 5) - , cursor pointer - , border3 (px 2) solid transparent - - -- , boxShadow5 (px 2) (px 2) (px 3) (px -1) <| lighter rgbLightGray - , withClass Active [ border3 (px 2) solid rgbWhite ] - , withClass TrafficRatingOne - [ hover [ backgroundColor <| darker rgbTrafficOne ] ] - , withClass TrafficRatingTwo - [ hover [ backgroundColor <| darker rgbTrafficTwo ] ] - , withClass TrafficRatingThree - [ hover [ backgroundColor <| darker rgbTrafficThree ] ] - , withClass TrafficRatingFour - [ hover [ backgroundColor <| darker rgbTrafficFour ] ] - , withClass TrafficRatingFive - [ hover [ backgroundColor <| darker rgbTrafficFive ] ] - ] - ] - ] - - -- , class SurfaceTypeMenu - -- [ width (px 300) - -- , margin3 (px 50) auto zero - -- , children - -- [ div - -- [ property "display" "inline-flex" - -- , width (px 126) - -- , height (px 35) - -- , borderRadius (px 3) - -- , alignItems center - -- , justifyContent center - -- , margin (px 10) - -- , cursor pointer - -- , border3 (px 2) solid transparent - -- , backgroundColor rgbElectricBlue - -- , withClass Active [ border3 (px 2) solid rgbWhite ] - -- , hover - -- [ backgroundColor <| lighter rgbElectricBlue ] - -- ] - -- ] - -- ] - -- , class PathTypeMenu - -- [ width (px 300) - -- , margin2 zero auto - -- , children - -- [ h4 - -- [ textAlign center - -- , fontSize (px 16) - -- , fontWeight (int 400) - -- , margin4 (px 10) zero zero zero - -- ] - -- , div - -- [ property "display" "inline-flex" - -- , width (px 126) - -- , height (px 40) - -- , borderRadius (px 3) - -- , alignItems center - -- , justifyContent center - -- , margin (px 10) - -- , cursor pointer - -- , border3 (px 2) solid transparent - -- , backgroundColor rgbElectricBlue - -- , withClass Active [ border3 (px 2) solid rgbWhite ] - -- , hover - -- [ backgroundColor <| lighter rgbElectricBlue ] - -- ] - -- ] - -- ] - , class SegmentNameInput - [ margin3 (px 25) zero (px 10) - , children - [ span [ display inlineBlock - , marginRight (px 10) + , width (px 185) + , fontSize (px 22) + , fontWeight (int 300) , verticalAlign middle - , fontSize (px 14) ] - , input - [ padding (px 5) - , borderRadius (px 3) - , border3 (px 1) solid rgbLightGray - , focus [ borderColor rgbGray ] - , width (px 291) + , class SaveButton + [ position absolute + , bottom (px -20) + , right (px 25) + , active + [ position absolute + , bottom (px -22) + , right (px 23) + , top initial + , left initial + ] ] ] ] + , class SegmentNameInput + [ margin3 (px 80) (px 25) (px 15) + , padding (px 8) + , width (px 350) + , boxSizing borderBox + , border zero + , borderBottom3 (px 3) solid rgbTrifectaGreen + , fontSize (px 18) + , backgroundColor <| darker rgbWhite + ] , class SegmentDescriptionInput - [ children - [ span - [ display inlineBlock - , marginBottom (px 5) - , fontSize (px 14) + [ margin3 zero (px 25) (px 15) + , padding (px 8) + , width (px 350) + , height (px 100) + , boxSizing borderBox + , resize none + , border zero + , borderBottom3 (px 3) solid rgbTrifectaGreen + , fontSize (px 18) + , backgroundColor <| darker rgbWhite + , fontFamilies [ "Lato", "Arial", "Sans-serif" ] + ] + , class SaveButton + [ marginLeft (px 215) ] + , class SegmentInfo + [ marginTop (px 50) + , children + [ h3 + [ textAlign center + , fontSize (px 20) + , fontWeight (int 700) ] - , textarea - [ width (pct 100) - , height (px 100) - , boxSizing borderBox - , resize none - , padding (px 5) - , borderRadius (px 3) - , border3 (px 1) solid rgbLightGray - , focus [ borderColor rgbGray ] + , h4 + [ textAlign center + , margin2 (px 10) (px 25) + , fontSize (px 16) + , fontWeight (int 400) ] ] ] @@ -757,19 +677,17 @@ mapCss = ] , class GoToAccount [ position absolute - , top (px 15) - , right (px 15) + , top (px 10) + , right (px 10) + , zIndex (int 2) ] , div [ withClass GoToAccount - [ padding2 (px 5) (px 10) - , top (px 20) - , border3 (px 1) solid (rgb 80 80 80) - , borderRadius (px 2) - , color (rgb 80 80 80) - , hover - [ color (rgb 22 146 72) - , borderColor (rgb 22 146 72) + [ active + [ position absolute + , top (px 12) + , right (px 8) + , left initial ] ] ] diff --git a/web/src/Views/Assets.elm b/web/src/Views/Assets.elm index 0402ee3..1b9f107 100644 --- a/web/src/Views/Assets.elm +++ b/web/src/Views/Assets.elm @@ -1,4 +1,4 @@ -module Views.Assets exposing (error, stravaLogin, src, backArrow, nextArrow, close, done) +module Views.Assets exposing (error, stravaLogin, surfaceQuality, trafficSafety, src) {-| Assets, such as images, videos, and audio. (We only have images for now.) We should never expose asset URLs directly; this module should be in charge of @@ -24,27 +24,17 @@ error = stravaLogin : Image stravaLogin = - Image "/assets/img/strava_login.svg" + Image "/assets/img/strava-login.svg" -backArrow : Image -backArrow = - Image "/assets/img/arrow-left.svg" +surfaceQuality : Image +surfaceQuality = + Image "/assets/img/surface-quality-vert.png" -nextArrow : Image -nextArrow = - Image "/assets/img/arrow-right.svg" - - -close : Image -close = - Image "/assets/img/x.svg" - - -done : Image -done = - Image "/assets/img/check.svg" +trafficSafety : Image +trafficSafety = + Image "/assets/img/traffic-safety-vert.png" diff --git a/web/src/Views/Page.elm b/web/src/Views/Page.elm index 36c54f6..7073982 100644 --- a/web/src/Views/Page.elm +++ b/web/src/Views/Page.elm @@ -57,7 +57,7 @@ viewHeader page user isLoading = , ul [ class [ Nav ] ] <| -- TODO: add loading spinner to main map ui lazy2 Util.viewIf isLoading spinner - :: (navbarLink (page == Home) Route.Home [ text "Home" ]) + :: (navbarLink (page == Home) Route.Home [ text "Map" ]) :: viewSignIn page user ] ] @@ -68,7 +68,8 @@ viewSignIn page user = case user of Nothing -> [ navbarLink (page == Login) Route.Login [ text "Sign in" ] - -- , navbarLink (page == Register) Route.Register [ text "Sign up" ] + + -- , navbarLink (page == Register) Route.Register [ text "Sign up" ] ] Just user ->