kfish/TodoFay.hs

## index.html
<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script src="TodoFay.js"></script>
    <script src="todo.js"></script>
    <link rel="stylesheet" href="todo.css">
  </head>
  <body>
    <h2>Todo</h2>
    <div ng-controller="TodoCtrl">
      <span>{{remaining()}} of {{state().todos.length}} remaining</span>
      [ <a href="" ng-click="archive()">archive</a> ]
      <ul class="unstyled">
        <li ng-repeat="todo in state().todos">
          <input type="checkbox" ng-model="todo.done">
          <span class="done-{{todo.done}}">{{todo.text}}</span>
        </li>
      </ul>
      <form ng-submit="addTodo()">
        <input type="text" ng-model="state().todoText"  size="30"
               placeholder="add new todo here">
        <input class="btn-primary" type="submit" value="add">
      </form>
    </div>
  </body>
</html>

## todo.js
function TodoCtrl($scope) {
  var state = new Strict.TodoFay.initialState(7);
  var sc = Strict.TodoFay.todoSC;

  $scope.state = function () {
    return state;
  }

  var mutate = function (f) {
    return (function () {
      console.log("mutate " + f)
      state = Strict.TodoFay[f](state);
    })
  }

  var fayget = function (f) {
    return (function () {
      return Strict.TodoFay[f](state);
    })
  }

  console.log(state.todos);
  console.log(sc.muts);
  for (var m in sc.muts) {
    console.log("Setting up mutator for " + sc.muts[m]);
    $scope[sc.muts[m]] = mutate(sc.muts[m]);
  }

  for (var g in sc.gets) {
    $scope[sc.gets[g]] = fayget(sc.gets[g]);
  }
}

## TodoFay.hs
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE RebindableSyntax  #-}

module TodoFay (
    Todo(..)
  , TodoState(..)
  , initialState
  , remaining
  , addTodo
  , archive
  , StateController(..)
  , todoSC
) where

import Fay.Text
import FFI
import Prelude

data Todo = Todo
  { text :: Text
  , done :: Bool
  }

data TodoState = TS
  { todos    :: [Todo]
  , todoText :: Text
  }

initialTodos :: [Todo]
initialTodos =
    [ Todo "Learn Fay" False
    , Todo "Write a fay-angular app" False
    ]

initialState :: Int -> TodoState
initialState _ = TS initialTodos ""

addTodo :: TodoState -> TodoState
addTodo (TS ts0 txt) = TS (ts0 ++ [Todo txt False]) ""

remaining :: TodoState -> Int
remaining = Prelude.length . filter (not . done) . todos

archive :: TodoState -> TodoState
archive (TS ts txt) = TS (filter (not . done) ts) txt

data StateController = SC
  { muts :: [Text]
  , gets :: [Text]
  }

todoSC = SC ["addTodo", "archive"] ["remaining"]
	<!doctype html>
	<html ng-app>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
	<script src="TodoFay.js"></script>
	<script src="todo.js"></script>
	<link rel="stylesheet" href="todo.css">
	</head>
	<body>
	<h2>Todo</h2>
	<div ng-controller="TodoCtrl">
	<span>{{remaining()}} of {{state().todos.length}} remaining</span>
	[ <a href="" ng-click="archive()">archive</a> ]
	<ul class="unstyled">
	<li ng-repeat="todo in state().todos">
	<input type="checkbox" ng-model="todo.done">
	<span class="done-{{todo.done}}">{{todo.text}}</span>
	</li>
	</ul>
	<form ng-submit="addTodo()">
	<input type="text" ng-model="state().todoText" size="30"
	placeholder="add new todo here">
	<input class="btn-primary" type="submit" value="add">
	</form>
	</div>
	</body>
	</html>
	function TodoCtrl($scope) {
	var state = new Strict.TodoFay.initialState(7);
	var sc = Strict.TodoFay.todoSC;

	$scope.state = function () {
	return state;
	}

	var mutate = function (f) {
	return (function () {
	console.log("mutate " + f)
	state = Strict.TodoFay[f](state);
	})
	}

	var fayget = function (f) {
	return (function () {
	return Strict.TodoFay[f](state);
	})
	}

	console.log(state.todos);
	console.log(sc.muts);
	for (var m in sc.muts) {
	console.log("Setting up mutator for " + sc.muts[m]);
	$scope[sc.muts[m]] = mutate(sc.muts[m]);
	}

	for (var g in sc.gets) {
	$scope[sc.gets[g]] = fayget(sc.gets[g]);
	}
	}
	{-# LANGUAGE OverloadedStrings #-}
	{-# LANGUAGE RebindableSyntax #-}

	module TodoFay (
	Todo(..)
	, TodoState(..)
	, initialState
	, remaining
	, addTodo
	, archive
	, StateController(..)
	, todoSC
	) where

	import Fay.Text
	import FFI
	import Prelude

	data Todo = Todo
	{ text :: Text
	, done :: Bool
	}

	data TodoState = TS
	{ todos :: [Todo]
	, todoText :: Text
	}

	initialTodos :: [Todo]
	initialTodos =
	[ Todo "Learn Fay" False
	, Todo "Write a fay-angular app" False
	]

	initialState :: Int -> TodoState
	initialState _ = TS initialTodos ""

	addTodo :: TodoState -> TodoState
	addTodo (TS ts0 txt) = TS (ts0 ++ [Todo txt False]) ""

	remaining :: TodoState -> Int
	remaining = Prelude.length . filter (not . done) . todos

	archive :: TodoState -> TodoState
	archive (TS ts txt) = TS (filter (not . done) ts) txt

	data StateController = SC
	{ muts :: [Text]
	, gets :: [Text]
	}

	todoSC = SC ["addTodo", "archive"] ["remaining"]