About the app

This small app built in fairly new SPA language called Elm. Once the "npm" build starts, it spins up a "json-server" to server up a list of repair-orders from a static .json file and then launch the app with webapck dev server with file-watcher, then webpage displays the list of the repair-orders with a REFRESH button, which pulls the json results with the count limited to the RANDOMly generated number.

This app covers the following Elm Language features: Random generator, 2 level Jason DECODERS, Webdata/remotedata, data as effects and immutability

Demo

https://elmlangdemoapp.azurewebsites.net/

Note: Do view-source on the page and download the api.js file to look at the compiled Elm app code and the Elm runtime, you can also find the azure function (a REST service develped in node.js/linux on MS azure cloud) url if you search for the word "azure", just to see the

Using azure function url to fetch test data from a .json file

Just replace the localhost:5000 url with the below url in commands.elm file and rebuild the code, then you should get the same results! as before.

https://testfuncappsuresh.azurewebsites.net/api/loadInProcessROs?code=kCigay9kCfy2nr0ui7yzI0jDinaC0TiBmBTcBEawoPzPxyNMCbTsug==

About Elm language (http://www.elm-lang.org/)

Elm is a fairly new language to build SPA (Single page apps), and in my opinion this language beats React.js, Angualar.js or any other SPA language hands down with its unique functional programming and no-runtime exceptions approach, in Elm, every thing is a pure function, including DOM elements for ex: div is a functions which compiles down to "div" html element. Please browse src folder for all of the Elm code files, but here is a small snippet

view.elm

  module RPWeb.Views.View exposing (..)
  import Html exposing (..)
  import RPWeb.Msgs as RPWebMessages
  import RPWeb.Models as RPWebModels
  import RPWeb.Views.List as RPWebList
  import Html exposing (..)
  import Html.Attributes exposing (..)
  import Html.Events exposing (..)

  view : RPWebModels.Model -> Html RPWebMessages.Msg
  view model =
          page model

  page : RPWebModels.Model -> Html RPWebMessages.Msg
  page model =
          div [class "dashboard-legend"]
          [
                  p[][text <| " Total rows: " ++ toString model.ranNumb ]
                  ,button [onClick RPWebMessages.Roll ][text "Refresh"]
                  --,RPWebList.view model.inProcessROs
                  ,RPWebList.view  model -- passing full model instead of just inProcessROs list
          ]

update.elm

  module RPWeb.Update exposing (..)
  import RPWeb.Msgs as RPWebMessages
  import RPWeb.Models as RPWebModels
  import RPWeb.Commands as RPWebCommands
  import Random

  update : RPWebMessages.Msg -> RPWebModels.Model -> ( RPWebModels.Model, Cmd RPWebMessages.Msg  )
  update msg model =
      case msg of
          RPWebMessages.OnFetchInProcessROs response ->
              ( { model | inProcessROs = response }, Cmd.none )
          RPWebMessages.Roll ->
              (model, RPWebCommands.startRandomInProcessROsFetch)
          RPWebMessages.Refresh rn ->
              ( { model | ranNumb = rn } , RPWebCommands.fetchInProcessROs )

Elm setup

Once you get this repo downloaded, just running "npm install" should get you going in most cases, but if you are behind the firewall, run the next set of commands individually after disconnecting and connecting to a public network, to escape from the firewall situations.

• elm-package install

• npm install elm-webpack-loader --save-dev

  Note: This requires node.js pre-installed.

execute npm install -g yarn

Hooking VS Code project to an existing github repo

After opening a new folder in VS code, click on init git icon under Code-Repo icon, which creates a local git repo and then do the following to connect local workspace to github repo
    git remote add origin https://github.com/yadalis/RODashboard.git
    git pull origin master
    git branch --set-upstream-to=origin/Master Master

git remote -v - to check the git repo name