Untitled

<!DOCTYPE html>
<html>

<head>
  <link href="//cdn.jsdelivr.net/picnicss/4.1.1/picnic.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <meta charset="utf-8">
  <title>Mag.JS</title>
</head>

<body>
  <h1>Hello Mag.JS!</h1>
  <a target="_top" href="https://github.com/magnumjs/mag.js">GitHub</a>
  <hr/>
  <div class="hide">
    <div id="contacts">
      <a class="addLink" href="#">Add another attendee</a>
      <fieldset>
        <legend>Attendee #</legend>
        <label>Name:</label>
        <input name="name">
        <br>
        <label>Email:</label>
        <input name="email">
        <a href="#">remove</a>
      </fieldset>
    </div>
  </div>
  <div id="app">
    <div class="volunteer-form">
      <h3>Please enter your contact information:</h3>
      <listcontacts></listcontacts>
      <div id="total">
        <label>Total:<span/></label><b>$10</b>
      </div>
      <div id="coupon">
        <form>
          <div class="errorcode"></div>
          <label>Enter coupon (if you have one):</label>
          <input name="coupon">
          <button>Validate coupon</button>
        </form>
      </div>
    </div>
    <p><em>Hint: The correct coupon code is <b>happy</b></em>
    </p>
  </div>

 <script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.0.22.min.js"></script>
  <script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.addons.0.21.min.js"></script>  <script src="contacts.js"></script>
  <script src="coupon.js"></script>
  <script src="total.js"></script>
  <script src="volunteer-form.js"></script>
  <script>
    mag.module('app', VolunteerForm)
  </script>
</body>

</html>

.hide {
  display: none;
}
a { display: block;}
a:after {content:" \bb";}

#Mag.JS

## plunker demo of mithril 2 mag volunteer form

This is from the [Mithril tutorial-part 2](from http://gilbert.ghost.io/mithril-js-tutorial-2/)

var Contacts = {}

Contacts.model = function() {
  this.name = mag.prop('[Your name]')
  this.email = mag.prop('[Your email]')
};

Contacts.controller = function(props) {

  mag.show(this)

  var ctrl = this
  ctrl.contacts = props.contacts

  ctrl.add = function() {
    var newModel = new Contacts.model()
    ctrl.contacts().push(newModel)
  }

  ctrl.remove = function(idx) {
    ctrl.contacts().splice(idx, 1)
  }

}

Contacts.view = function(ctrl) {

  ctrl.fieldset = ctrl.contacts().map(function(contact, idx) {

    return {
      'legend': "Attendee #" + (idx + 1),

      name: {
        _value: contact.name(),
        _onchange: mag.withProp('value', contact.name)
      },
      email: {
        _value: contact.email(),
        _onchange: mag.withProp('value', contact.email)
      },
      a: removeAnchor(ctrl, idx)
    }
  })

  ctrl.addLink = {
    _onclick: ctrl.add,
    _href: '#',
    _text: 'Add another attendee'
  }

}

function removeAnchor(ctrl, idx) {
  if (ctrl.contacts().length >= 2) {
    return {
      _text: 'remove',
      _onclick: ctrl.remove.bind({}, idx),
      _href: '#'
    }

  }
}

var VolunteerForm = {}

VolunteerForm.controller = function() {
  var ctrl = this
  ctrl.contacts = mag.prop([new Contacts.model()])
  ctrl.discount = mag.prop(0)
}

VolunteerForm.view = function(ctrl) {
  ctrl['volunteer-form'] = {
    'h3': 'Please enter your contact information:'
  }
  ctrl.listcontacts = mag.module('contacts', Contacts, {
    contacts: ctrl.contacts
  })

  mag.module('total', Total, {
    count: ctrl.contacts().length,
    discount: ctrl.discount()
  })

  mag.module('coupon', Coupon, {
    onSuccess: ctrl.discount
  })

}

var Total = {}

Total.pricePerCount = 10

Total.calcPrice = function(discount, count) {
  var total = count * Total.pricePerCount
  return roundCents(total - total * discount)
}

Total.calcDiscount = function(discount, count) {
  var total = count * Total.pricePerCount
  return roundCents(total * discount)
}

Total.view = function(ctrl, props) {
  var total = Total.calcPrice(props.discount, props.count)
  var discountedAmount = Total.calcDiscount(props.discount, props.count)

  ctrl.span = props.discount > 0 ? "(Coupon discount: -$" + discountedAmount + ")" : ''
    ctrl.b = "$" + total

}

function roundCents(num) {
  return Math.round(num * 100) / 100
}

var Coupon = {}

Coupon.controller = function(props) {
  var ctrl = this
  ctrl.code = mag.prop('')
  ctrl.error = mag.prop(null)

  ctrl.onSubmit = function(e) {
    e.preventDefault()
    ctrl.error('') // Clear error
    validateCoupon(ctrl.code())
      .then(props.onSuccess, ctrl.error)
  }
}

Coupon.view = function(ctrl) {
  ctrl.form = {
    _onsubmit: ctrl.onSubmit
  }

  ctrl.errorcode = ctrl.error() ? "Invalid coupon." : ''

  ctrl.coupon = {
    _value: ctrl.code(),
    _onchange: mag.withProp('value', ctrl.code)
  }


}

function validateCoupon(code) {
  var isValid = (code === 'happy')
  var discount = 0.20
  // Stub AJAX promise:
  // We would expect the server to return the percent discount
  var deferred = mag.deferred()
  if (isValid) deferred.resolve(discount)
  else deferred.reject('invalid_code')
  return deferred.promise
}