Skip to content

Instantly share code, notes, and snippets.

View AdrianRibao's full-sized avatar

Adrián Ribao AdrianRibao

View GitHub Profile
renderHeaders : Tabs -> Html Msg
renderHeaders currentTab =
ul [ class "nav nav-tabs" ]
[ li [ class "nav-item" ]
[ a
[ class "nav-link"
, onClick (ChangeTab Step1)
, classList [ ( "active", currentTab == Step1 ) ]
]
[ text "Step 1" ]
enderHeaders : Tabs -> Html Msg
renderHeaders currentTab =
ul [ class "nav nav-tabs" ]
[ li [ class "nav-item" ]
[ a
[ class "nav-link"
, onClick (ChangeTab Step1)
]
[ text "Step 1" ]
]
update : Msg -> Model -> Model
update msg model =
case msg of
ChangeTab tab ->
{ model | currentTab = tab }
type Msg
= ChangeTab Tabs
renderTabContent : Tabs -> Html Msg
renderTabContent currentTab =
case currentTab of
Step1 ->
div [] [ text "Content for tab1" ]
Step2 ->
div [] [ text "Content for tab2" ]
Step3 ->
renderHeaders : Tabs -> Html Msg
renderHeaders currentTab =
ul [ class "nav nav-tabs" ]
[ li [ class "nav-item" ]
[ a
[ class "nav-link"
]
[ text "Step 1" ]
]
, li [ class "nav-item" ]
view : Model -> Html Msg
view model =
div []
[ renderHeaders model.currentTab
, renderTabContent model.currentTab
]
type alias Model =
{ currentTab : Tabs }
-- Don't forget to setup the initial values for the model. In our case we wan't the app load the first step.
initialModel : Model
initialModel =
{ currentTab = Step1 }
type Tabs
= Step1
| Step2
| Step3
@AdrianRibao
AdrianRibao / elm_javascript.js
Last active January 23, 2016 09:05
Sending url from javascript and perform an http request
let Elm = require('../../elm/cvs/cvs.elm');
$(document).ready(function(){
$("#cvs-search-form").submit(function(event){
let params = $(this).serializeArray();
let querystring = $.param(params);
let composed_url = `${this.baseURI}?${querystring}`;
cvs.ports.getURL.send(composed_url);
event.preventDefault();