Skip to content

Instantly share code, notes, and snippets.

@nqthqn

nqthqn/Login.elm

Created September 14, 2017 04:22
Show Gist options
  • Save nqthqn/730b29558d46b5a436dd395de802f616 to your computer and use it in GitHub Desktop.
Save nqthqn/730b29558d46b5a436dd395de802f616 to your computer and use it in GitHub Desktop.
Download ZIP
routing issue
Raw
Login.elm
module Page.Login exposing (..)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Route
import Time exposing (Time)
-- Model
type alias Model =
{ currTab : Tab
, currSlide : Slide
, loginState : LoginState
, loading : Bool
}
initModel : Model
initModel =
{ currTab = WhoWeAre
, currSlide = First
, loginState = Initial
, loading = False
}
type Tab
= WhoWeAre
| OurResearch
| OurPublications
| RecentNews
type Slide
= First
| Second
| Third
| Fourth
type LoginState
= Initial
| ResetPassword
| WrongCreds
-- Update
type Msg
= SwitchTab Tab
| SwitchSlide Slide
| NextSlide Time
| Login
| ShowLogin
| ForgotPassword
| RequestPasswordReset
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
SwitchTab tab ->
( { model | currTab = tab }, Cmd.none )
SwitchSlide slide ->
( { model | currSlide = slide }, Cmd.none )
NextSlide _ ->
( { model | currSlide = next model.currSlide }, Cmd.none )
ShowLogin ->
( { model | loginState = Initial, loading = False }, Cmd.none )
Login ->
( { model | loading = True }, Route.newUrl Route.Home )
ForgotPassword ->
( { model | loginState = ResetPassword, loading = False }, Cmd.none )
RequestPasswordReset ->
( { model | loading = True }, Cmd.none )
-- View
view : Model -> Html Msg
view model =
section [ class "section transparent" ]
[ div [ class "container" ]
[ div [ class "columns" ]
[ div [ class "column is-4" ]
[ loginBox model.loginState model.loading
]
, slider model.currSlide
]
, overview
, div [ class "columns" ]
[ div [ class "column is-8" ] [ aboutUs model.currTab ]
, div [ class "column is-4" ] [ contactUs ]
]
, footer [] [ text "Copyright 2017 ExCELL-e" ]
]
]
slider : Slide -> Html Msg
slider currSlide =
div [ class "column is-8" ]
[ div [ class "slider is-hidden-mobile" ]
[ div [ isActiveSlide (currSlide == First) ]
[ img [ src "img/1.png" ] []
, p [ class "caption" ] [ text "Engaging children in conversations." ]
]
, div [ isActiveSlide (currSlide == Second) ]
[ img [ src "img/2.png" ] []
, p [ class "caption" ] [ text "Helping teachers build children's language." ]
]
, div [ isActiveSlide (currSlide == Third) ]
[ img [ src "img/3.png" ] []
, p [ class "caption" ] [ text "Monitoring children's progress." ]
]
, div [ isActiveSlide (currSlide == Fourth) ]
[ img [ src "img/4.png" ] []
, p [ class "caption" ] [ text "Bringing words to life throughout the classroom." ]
]
, ol [ class "slideDots" ]
[ li [ isActiveDot (currSlide == First), onClick (SwitchSlide First) ] []
, li [ isActiveDot (currSlide == Second), onClick (SwitchSlide Second) ] []
, li [ isActiveDot (currSlide == Third), onClick (SwitchSlide Third) ] []
, li [ isActiveDot (currSlide == Fourth), onClick (SwitchSlide Fourth) ] []
]
]
]
isActiveSlide : Bool -> Attribute Msg
isActiveSlide yes =
if yes then
class "slide active"
else
class "slide"
isActiveDot : Bool -> Attribute Msg
isActiveDot yes =
if yes then
class "activeDot"
else
class ""
aboutUs : Tab -> Html Msg
aboutUs currTab =
let
tabLi tab text_ =
if tab == currTab then
li [ class "aboutTab aboutActiveTab", onClick (SwitchTab tab) ] [ text text_ ]
else
li [ class "aboutTab", onClick (SwitchTab tab) ] [ text text_ ]
in
div [ class "box" ]
[ h2 [ class "title is-2" ] [ text "About Us" ]
, hr [] []
, div [ class "columns" ]
[ div [ class "column is-4" ]
[ ul [ class "aboutTabs" ]
[ tabLi WhoWeAre "Who We Are"
, tabLi OurResearch "Our Research"
, tabLi OurPublications "Our Publications"
, tabLi RecentNews "Recent News"
]
]
, div [ class "column is-8" ] [ activeBlock currTab ]
]
]
activeBlock : Tab -> Html Msg
activeBlock tab =
case tab of
WhoWeAre ->
div [ class "aboutBlock" ]
[ h4 [ class "title is-4" ] [ text "Who We Are" ]
, p [ class "justify" ] [ text "The Exceptional Coaching for Early Language and Literacy – enhanced (ExCELL-e) program is a year-long online professional development program for teachers of preschool, kindergarten, and first grade. ExCELL-e provides specific strategies to help teachers build the language and vocabulary skills of the children in their classrooms. These include asking open-ended questions, waiting for children to respond, providing feedback on what children have said, and teaching children new vocabulary words throughout the classroom. With support from an expert coach, teachers learn new and refine techniques that help who are native speakers of English, as well as those who are dual language learners." ]
]
OurResearch ->
div [ class "aboutBlock" ]
[ h4 [ class "title is-4" ] [ text "Our Research" ]
, p [ class "justify" ] [ text "Over the last 10 years, our research team has conducted several randomized controlled studies of the ExCELL program, the precursor to ExCELL-e. " ]
, p [ class "justify" ] [ text "We have found that teachers who participate in the ExCELL program have higher quality language and literacy instruction than similar peers who did not receive this training. In particular, teachers have higher-quality language and literacy environments, including more books and writing materials. They also use these materials more often than peers who did not experience the training. Further, ExCELL teachers had higher quality instruction, with stronger explanation of new words and ideas, richer and more descriptive language, and more in-depth feedback to children. These differences were statistically significant and of a large magnitude." ]
, p [ class "justify" ] [ text "In addition, children whose teachers received ExCELL training learned more vocabulary than peers whose teachers did not participate in ExCELL. ExCELL students learned more of the words that teachers specifically targeted in their classrooms; however, they also learned more words that were not a part of the curriculum, suggesting that ExCELL may help children pay closer attention to the words around them. In addition, ExCELL students developed stronger phonological sensitivity skills including rhyming and attention to beginning sounds in words. These differences were statistically significant and of a large magnitude." ]
, p [ class "justify" ] [ text "If you would like more information, please see Our Publications to download copies of these studies (Wasik, 2012; Wasik & Bond, 2001; Wasik, Bond & Hindman, 2006, Wasik & Hindman, 2011). " ]
]
OurPublications ->
div [ class "aboutBlock" ]
[ h4 [ class "title is-4" ] [ text "Our Publications" ]
, p [ class "justify" ] [ text "Please click on the link to download the abstract of the paper." ]
, p [ class "justify" ] [ text "Wasik, 2010" ]
, p [ class "justify" ] [ text "Language and, specifically, vocabulary development plays a critical role in early literacy development. This article describes Exceptional Coaching for Early Language and Literacy (ExCELL), which is a research-based, effective preschool program that focuses on developing Head Start enrollees' language and preliteracy skills. The ExCELL program employs an intensive coaching model to train teachers in implementing effective strategies that support the development of language and preliteracy skills. The teacher professional development is described, including the specific routines and strategies that coaches can scaffold teachers to use. A brief summary of the findings are presented, indicating the positive teacher and student outcomes as a result of the professional development intervention. If implemented with fidelity, the strategies described can provide opportunities for Head Start preschool attendees to learn vocabulary words that will eventually impact their ability to learn to read." ]
, p [ class "justify" ] [ text "Wasik & Bond, 2001" ]
, p [ class "justify" ] [ text "The effects of a book reading technique called interactive book reading on the language and literacy development of 4-year-olds from low-income families were evaluated. Teachers read books to children and reinforced vocabulary in the books by presenting objects that represented the words and providing opportunities to use the words." ]
, p [ class "justify" ] [ text "Wasik, Bond & Hindman, 2006" ]
, p [ class "justify" ] [ text "A language and literacy intervention was implemented in 10 Head Start classrooms. Teachers were trained in specific book reading and conversation strategies. The focus of the intervention was to train teachers how to increase opportunities for language and vocabulary development in young children. At the end of the year, children in the intervention classrooms performed significantly better than children in the control classrooms on the Peabody Picture Vocabulary Test-III and the Expressive One-Word Vocabulary Test (3rd ed.). In addition, teachers in the intervention classrooms used strategies that promoted language development during book reading and other classroom activities. Head Start teachers can be trained to implement strategies that have positive effects on children's language and literacy development." ]
, p [ class "justify" ] [ text "Wasik & Hindman, 2011" ]
, p [ class "justify" ] [ text "In a randomized control study, Head Start teachers were assigned to either an intervention group that received intensive, ongoing professional development (PD) or to a comparison group that received the \"business as usual\" PD provided by Head Start. The PD intervention provided teachers with conceptual knowledge and instructional strategies that support young children's development of vocabulary, alphabet knowledge, and phonological sensitivity. Results indicated that, after 1 academic year, teachers in the intervention group created higher quality classroom environments, as measured by the Early Language and Literacy Classroom Observation (M. W. Smith, D. K. Dickinson, A. Sangeorge, & L. Anastasopoulos, 2002) and Classroom Assessment Scoring System (R. C. Pianta, K. M. La Paro, & B. K. Hamre, 2007), and by videotapes of their classroom book readings. Further, children in the intervention group performed significantly better than comparison-group peers on measures of receptive vocabulary and phonological sensitivity but showed equivalent alphabet learning. Moreover, variation in classroom quality and fidelity to the intervention were linked to child outcomes, illuminating which particular aspects of teachers' improved practices were linked to children's gains. Findings provide new details about the mechanisms through which intensive and intentional PD can enhance Head Start teachers' classroom practices and, by extension, improve Head Start children's language and preliteracy outcomes." ]
]
RecentNews ->
div [ class "aboutBlock" ]
[ h4 [ class "title is-4" ] [ text "Recent News" ]
, p [ class "justify" ] [ text "This recent news section includes new developments of interest to teachers, administrators, and parents of children in preschool, kindergarten, and first grade. " ]
, p [ class "justify" ] [ text "New Study Discovers Vocabulary Gap for Low-income Children" ]
, p [ class "justify" ] [ text "As reported by the New York Times, a new study found that, by 18 months of age, more affluent children could identify simple pictures more rapidly than children from low-income households. This finding suggests that children with more resources have a stronger command of basic vocabulary far earlier in life than previous research has found. In fact, researchers estimated that, by just two years of age, children from wealthier families had learned 30 percent more words than less affluent peers. " ]
, p [ class "justify" ] [ a [ href "http://www.nytimes.com/2013/10/22/us/language-gap-study-bolsters-a-push-for-pre-k.html" ] [ text "See the full story here" ], text "." ]
]
contactUs : Html Msg
contactUs =
div [ class " box" ]
[ h2 [ class "title is-2" ] [ text "Contact Us" ]
, hr [] []
, p []
[ text "For more information, please contact Annemarie Hindman."
, br [] []
, br [] []
, ul []
[ li []
[ i [ class "fa fa-fw fa-phone" ] []
, text " "
, a [ href "tel:215-204-5589" ]
[ text "(215) 204-5589" ]
]
, li []
[ i [ class "fa fa-fw fa-envelope-o" ] []
, text " "
, a [ href "mailto:ahindman@temple.edu " ] [ text "ahindman@temple.edu " ]
]
]
, br [] []
, em [] [ text "1301 Cecil B. Moore Ave, Ritter 435, Philadephia PA 19122." ]
]
]
overview : Html Msg
overview =
div [ class "container box" ]
[ h2 [ class "title is-2 is-hidden-mobile" ] [ text "ExCELL-e for..." ]
, h2 [ class "title is-2 is-hidden-desktop is-hidden-tablet" ] [ text "Who is it for?" ]
, hr [ class "is-hidden-mobile" ] []
, div [ class "columns" ]
[ div [ class "column" ]
[ h4 [ class "title is-4" ] [ text "Teachers" ]
, img [ class "rbimg", src "img/teachers.png" ] []
, p [ class "justify" ] [ text """Over one academic year, ExCELL-e will
provide you with evidence-based techniques for
building the language and vocabulary competence of
the children in your classroom, whether they are
native speakers of English or Dual Language Learners
(DLLs). Through viewing online professional
development modules and working with an expert
coach, you will learn new ways to highlight
vocabulary words throughout your classroom and
curriculum and to engage children in
rich conversations.""" ]
]
, div [ class "column" ]
[ h4 [ class "title is-4" ] [ text "Principals & Administrators" ]
, img [ class "rbimg", src "img/principals.png" ] []
, p [ class "justify" ] [ text """ExCELL-e equips teachers to support the
language and vocabulary learning of every child,
including those who are Dual Language Learners.
Through a full academic year of online
professional development and individualized guidance
from an expert coach, teachers build conceptual and
procedural knowledge about classroom practices that
foster early language and vocabulary skills.
ExCELL-e strategies are aligned with the Common Core
and can be easily mapped on to any evidence-based
curriculum. """ ]
]
, div [ class "column" ]
[ h4 [ class "title is-4" ] [ text "Parents" ]
, img [ class "rbimg", src "img/parents.png" ] []
, p [ class "justify" ] [ text """ExCELL-e classrooms are rich in
conversations that build children’s language and
vocabulary skills. Children whose teachers
participate in ExCELL-e have many opportunities to
share their ideas in class with their teachers and
with their peers. Teachers choose high-quality
literature and read books frequently, often multiple
times. Teachers also plan follow-up activities to
the books that allow children even more chances to
use the words and ideas they are studying.""" ]
]
]
]
loginBox : LoginState -> Bool -> Html Msg
loginBox loginState loading =
let
forgotPasswordBtn =
em [] [ a [ href "#", class "is-pulled-right", onClick ForgotPassword, class "forgot" ] [ text "forgot password?" ] ]
signInBtn =
button [ class <| "button is-primary " ++ isLoading, onClick Login ] [ text "sign in" ]
isLoading =
if loading then
"is-loading"
else
""
in
div [ class "box" ]
(case loginState of
Initial ->
[ logo
, usernameInput
, passwordInput
, signInBtn
, forgotPasswordBtn
]
ResetPassword ->
[ logo
, text "We will send you a password reset link."
, emailInput
, button [ class <| "button is-primary " ++ isLoading, onClick RequestPasswordReset ] [ text "send it" ]
, em [] [ a [ href "#", class "is-pulled-right", onClick ShowLogin, class "forgot" ] [ text "go back" ] ]
]
WrongCreds ->
[ logo
, p [ class "wiggle" ] [ text "Oops! Those credentials are incorrect." ]
, usernameInput
, passwordInput
, signInBtn
, forgotPasswordBtn
]
)
logo : Html Msg
logo =
img [ class "logo", src "img/logo.svg" ] []
emailInput : Html Msg
emailInput =
div
[ class "field" ]
[ div
[ class "control" ]
[ input
[ class "input", type_ "email", placeholder "E-Mail" ]
[]
]
]
usernameInput : Html Msg
usernameInput =
div
[ class "field" ]
[ div
[ class "control" ]
[ input
[ class "input", type_ "text", placeholder "Username" ]
[]
]
]
passwordInput : Html Msg
passwordInput =
div
[ class "field" ]
[ p
[ class "control" ]
[ input
[ class "input", type_ "password", placeholder "Password" ]
[]
]
]
-- Helpers
next : Slide -> Slide
next slide =
case slide of
First ->
Second
Second ->
Third
Third ->
Fourth
Fourth ->
First
Raw
Main.elm
module Main exposing (main)
import Navigation exposing (Location)
import Ports
import Time exposing (every, second)
import Route exposing (Route)
import Html exposing (Html)
import Page.Login as Login
import Page.Home as Home
import Page.Modules as Modules
import Page.Page as Page
-- Model
type alias Model =
{ page : Page
, token : String
}
type Page
= Login Login.Model
| Home Home.Model
| Modules Modules.Model
type alias Flags =
{ token : String }
initModel : Flags -> Model
initModel flags =
{ page = Login Login.initModel
, token = flags.token
}
-- Update
type Msg
= SetRoute (Maybe Route)
-- Pages
| LoginMsg Login.Msg
| HomeMsg Home.Msg
| ModulesMsg Modules.Msg
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case ( msg, model.page ) of
( LoginMsg subMsg, Login subModel ) ->
let
( model_, cmd_ ) =
Login.update subMsg subModel
in
( { model | page = Login model_ }
, Cmd.map LoginMsg cmd_
)
( HomeMsg subMsg, Home subModel ) ->
let
( model_, cmd_ ) =
Home.update subMsg subModel
in
( { model | page = Home model_ }
, Cmd.map HomeMsg cmd_
)
( ModulesMsg subMsg, Modules subModel ) ->
let
( model_, cmd_ ) =
Modules.update subMsg subModel
in
( { model | page = Modules model_ }
, Cmd.map ModulesMsg cmd_
)
( SetRoute route, _ ) ->
case route of
Just (Route.Login) ->
( { model | page = Login Login.initModel }
, Cmd.none
)
Just (Route.Home) ->
( { model | page = Home Home.initModel }
, Cmd.none
)
Just (Route.Modules) ->
( { model | page = Modules Modules.initModel }
, Cmd.none
)
Nothing ->
( model, Cmd.none )
( _, _ ) ->
( model, Cmd.none )
-- View
view : Model -> Html Msg
view model =
case model.page of
Login model ->
Login.view model
|> Html.map LoginMsg
Home model ->
Home.view model
|> Page.wrapper Page.Home
|> Html.map HomeMsg
Modules model ->
Modules.view model
|> Page.wrapper Page.Modules
|> Html.map ModulesMsg
-- Main
init : Flags -> Location -> ( Model, Cmd Msg )
init flags location =
( initModel flags
, Cmd.batch
[ Navigation.newUrl location.pathname
]
)
subscriptions : Model -> Sub Msg
subscriptions model =
case model.page of
Login _ ->
Sub.batch
[ every (10 * second) (Login.NextSlide >> LoginMsg)
]
_ ->
Sub.batch []
main : Program Flags Model Msg
main =
Navigation.programWithFlags (Route.fromLocation >> SetRoute)
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
Raw
Route.elm
module Route exposing (Route(..), fromLocation, href, modifyUrl, newUrl)
import Html exposing (Attribute)
import Html.Attributes as Attr
import Navigation exposing (Location)
import UrlParser as Url exposing ((</>), Parser, oneOf, parsePath, s, string, top)
type Route
= Home
| Login
| Modules
-- PUBLIC HELPERS --
href : Route -> Attribute msg
href route =
Attr.href (routeToString route)
modifyUrl : Route -> Cmd msg
modifyUrl =
routeToString >> Navigation.modifyUrl
newUrl : Route -> Cmd msg
newUrl =
routeToString >> Navigation.newUrl
fromLocation : Location -> Maybe Route
fromLocation location =
if String.isEmpty location.pathname then
Just Home
else
parsePath route location
-- INTERNAL --
routeToString : Route -> String
routeToString route =
let
pieces =
case route of
Home ->
[]
Login ->
[ "login" ]
Modules ->
[ "modules" ]
in
String.join "/" pieces |> Debug.log "WAT?!"
route : Parser (Route -> a) a
route =
oneOf
[ Url.map Home top
, Url.map Login (s "login")
, Url.map Modules (s "modules")
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment