Todo App

<!doctype html>

<html>
  <head>
    <title>Riot todo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="todo.css">

    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.0.5/es5-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script>html5.addElements('todo')</script>
    <![endif]-->

  </head>

  <body>

    <todo></todo>

    <script src="todo.tag" type="riot/tag"></script>
    <script src="https://rawgit.com/riot/riot/master/riot%2Bcompiler.min.js"></script>

    <script>
    
   
    riot.mount('todo', {
      title: 'I want to behave!',
      items: [
        { title: 'Avoid excessive caffeine', done: true },
        { title: 'Hidden item',  hidden: true },
        { title: 'Be less provocative'  },
        { title: 'Be nice to people' }
      ]
    })
    </script>

  </body>

</html>

# Todo App

This is a simple example with in-browser compilation.

## Have a play

[Open this example on Plunker](http://riotjs.com/examples/plunker/?app=todo-app)

## Run locally

Install superstatic if you don't have.

```bash
$ npm install -g superstatic
```

Download or clone this repo, then run the command.

```bash
$ cd to/this/dir
$ superstatic
```

Open the URL shown in your browser.


body {
  font-family: 'myriad pro', sans-serif;
  font-size: 20px;
  border: 0;
}

todo {
  display: block;
  max-width: 400px;
  margin: 5% auto;
}

form input {
  font-size: 85%;
  padding: .4em;
  border: 1px solid #ccc;
  border-radius: 2px;
}

button {
  background-color: #1FADC5;
  border: 1px solid rgba(0,0,0,.2);
  font-size: 75%;
  color: #fff;
  padding: .4em 1.2em;
  border-radius: 2em;
  cursor: pointer;
  margin: 0 .23em;
  outline: none;
}

button[disabled] {
  background-color: #ddd;
  color: #aaa;
}

ul {
  padding: 0;
}

li {
  list-style-type: none;
  padding: .2em 0;
}

.completed {
  text-decoration: line-through;
  color: #ccc;
}

label {
  cursor: pointer;
}


<todo>

  <h3>{ opts.title }</h3>

  <ul>
    <li each={ items.filter(whatShow) }>
      <label class={ completed: done }>
        <input type="checkbox" checked={ done } onclick={ parent.toggle }> { title }
      </label>
    </li>
  </ul>

  <form onsubmit={ add }>
    <input ref="input" onkeyup={ edit }>
    <button disabled={ !text }>Add #{ items.filter(whatShow).length + 1 }</button>

    <button type="button" disabled={ items.filter(onlyDone).length == 0 } onclick={ removeAllDone }>
    X{ items.filter(onlyDone).length } </button>
  </form>

  <!-- this script tag is optional -->
  <script>
  
          this.Item = {
            id: undefined,
            cust_id: undefined,
            created_by: undefined,
            created_date: undefined,
            created_location: undefined,
            status: undefined,
            types: undefined,
            contents: undefined,
            important_level: undefined, //this crashed the riotjs
            remarks: undefined,
            narratives: undefined,
            stakeholders: undefined,
            message_to_stakeholders: undefined,
            recommendation: undefined,
            recommendation_by: undefined,
            recommendation_date: undefined,
            followup_remarks: undefined,
            followup_date: undefined,
            action_taken_by: undefined,
            action_taken_method: undefined,
            action_taken_remarks: undefined,
            action_taken_date: undefined,
            sms_to_patron: undefined,
            email_to_patron: undefined,
            sms_content: undefined,
            email_content: undefined,
            case_close_by: undefined,
            case_close_remarks: undefined,
            case_close_cust_comments: undefined,
            case_close_cust_rated: undefined,
            case_closed_date: undefined,
            case_close_hd_rated: undefined,
            case_close_hd_comments: undefined,
            case_close_hd_comments_by: undefined
        };

    
  
    this.items = opts.items

    edit(e) {
      this.text = e.target.value
    }

    add(e) {
      if (this.text) {
        this.items.push({ title: this.text })
        this.text = this.refs.input.value = ''
      }
      e.preventDefault()
    }

    removeAllDone(e) {
      this.items = this.items.filter(function(item) {
        return !item.done
      })
    }

    // an two example how to filter items on the list
    whatShow(item) {
      return !item.hidden
    }

    onlyDone(item) {
      return item.done
    }

    toggle(e) {
      var item = e.item
      item.done = !item.done
      return true
    }
  </script>

</todo>