Created
December 2, 2019 14:59
-
-
Save toburger/b0fc1cba68e9103c164c540908a56f37 to your computer and use it in GitHub Desktop.
Created with Fable REPL
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module private BusinessLogic = | |
let switchAt pos (str: string) = | |
let str = Seq.toArray str | |
let oldpos = (pos + str.Length - 1) % str.Length | |
let newpos = pos % str.Length | |
let tmp = str.[newpos] | |
str.[newpos] <- str.[oldpos] | |
str.[oldpos] <- tmp | |
System.String str | |
let nospaces str = | |
str | |
|> String.filter ((<>)' ') | |
let spacePositions str = | |
str | |
|> Seq.indexed | |
|> Seq.fold (fun xs (i, x) -> | |
if x = ' ' then i::xs | |
else xs) [] | |
let insertSpaces positions (str: string) = | |
let positionsr = List.rev positions | |
let mutable str = str | |
for pos in positionsr do | |
str <- str.Insert(pos, " ") | |
str | |
let switchIgnoringSpacesAt pos str = | |
let nospaces = nospaces str | |
let spacepos = spacePositions str | |
let switched = switchAt pos nospaces | |
insertSpaces spacepos switched | |
// REACT & ELMISH => MVU!! | |
open Fable.Core.JsInterop | |
open Fable.React | |
open Elmish | |
open Elmish.React | |
open Fulma | |
module P = Fable.React.Props | |
type Model = { | |
text: string | |
repeat: int | |
} | |
type Msg = | |
| SetRepeatCount of int | |
| UpdateText of string | |
let init _: Model = { | |
text = "open data hub" | |
repeat = 40 | |
} | |
let update (msg: Msg) (model: Model): Model = | |
match msg with | |
| UpdateText inputStr -> | |
{ model with text = inputStr } | |
| SetRepeatCount count -> | |
if count > 500 then | |
model | |
else | |
{ model with repeat = count } | |
let viewForm model dispatch = | |
form [] [ | |
Input.text [ | |
Input.Value (string model.text) | |
Input.OnChange (fun e -> | |
dispatch (UpdateText e.target?value)) | |
] | |
Input.text [ | |
Input.Value (string model.repeat) | |
Input.OnChange (fun e -> | |
dispatch (SetRepeatCount (int e.target?value))) | |
Input.Type Input.IInputType.Number | |
] | |
] | |
let viewSwitchedList model dispatch = | |
ol [] [ | |
for x in 1..model.repeat -> | |
fragment [ | |
P.Key (string x) | |
] [ | |
li [] [ | |
str (BusinessLogic.switchIgnoringSpacesAt x model.text) | |
] | |
] | |
] | |
let view (model: Model) (dispatch: Dispatch<Msg>) = | |
div [] [ | |
Card.card [] [ | |
Card.content [] [ | |
Content.content [] [ | |
viewForm model dispatch | |
] | |
] | |
] | |
Card.card [] [ | |
Card.content [] [ | |
Content.content [] [ | |
viewSwitchedList model dispatch | |
] | |
] | |
] | |
] | |
Program.mkSimple init update view | |
|> Program.withConsoleTrace | |
|> Program.withReactSynchronous "main" | |
|> Program.run | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'> | |
<script src="__HOST__/libs/react.production.min.js"></script> | |
<script src="__HOST__/libs/react-dom.production.min.js"></script> | |
<link rel="stylesheet" href="__HOST__/libs/css/bulma.min.css" /> | |
<link rel="stylesheet" href="__HOST__/libs/css/all.min.css" /> | |
<style> | |
/* Only needed for icon sample */ | |
.container-sizes .block { | |
display: flex; | |
} | |
.container-sizes .icon { | |
background-color: yellow; | |
margin: 0 5px; | |
} | |
</style> | |
</head> | |
<body class="app-container"> | |
<div id="main" class="elmish-app"></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment