Angular App

Catering order form

by Chris Skinner

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<body ng-app="form">
    <div class="container" style="margin-top: 40px;">
        <section ng-controller="PanelController as panel">
            <ul class="nav nav-pills">
                <li ng-class="{ active: panel.isSelected(1)}">	<a href ng-click="panel.selectTab(1)">Standard Form</a>

                </li>
                <li ng-class="{ active: panel.isSelected(2)}">	<a href ng-click="panel.selectTab(2)">Custom Form</a>

                </li>
            </ul>
            <div class="panel" ng-show="panel.isSelected(1)">
                	<h4>Standard Form</h4>

                <p>Use the standard form if the number people and meals are the same throughout your stay.
                    <br />E.G : 10 people wanting 7 dinners over a 7 day period.</p>
                <p>Use the custom form if the number of people wanting meals alters each day.</p>
                <form name="mealForm" ng-controller="FormController as form" ng-submit="mealForm.$valid" method="post" novalidate>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="firstName">First Name</label>
                                <input ng-model="booking.firstName" type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="lastName">Last Name</label>
                                <input ng-model="booking.lastName" type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required>
                            </div>
                        </div>
                    </div>
                    <div...

CSS

.radio label {
    text-transform: capitalize;
}
.preview {
    list-style-type: none;
    font-weight: 700;
    padding-left: 0;
}
.preview li {
    margin-bottom: 5px;
}
form ul {
    padding-left: 0;
    list-style-type: none;
}
form .mealType {
    padding:10px 15px;
    background-color:#ffffff;
    margin-bottom:8px;
    cursor:pointer;
    color: #337ab7;
    border-radius: 4px;
    text-transform: capitalize;
    margin-bottom: 0;
    width: 100%;
    border: none;
    text-align: left;
}
form .mealType span {
    float:right;
}
form .mealType.active {
    background-color:#337ab7;
    color: #ffffff;
}
form .mealType.active:hover {
    background-color:#337ab7;
    color: #ffffff;
}
form .mealType.active, form .mealType:hover {
    outline: none;
}
.form-control:focus {
    border-color: #ccc;
    webkit-box-shadow: none;
    box-shadow: none;
}
form .mealType:hover {
    background-color: #eee;
    color: #23527c;
}
form label em {
    display: block;
    font-size: 12px;
}
form textarea {
    width: 100%;
    min-height: 115px;
}
form .ng-invalid.ng-dirty {
    border-color:#FA787E;
}
form .ng-valid.ng-dirty {
    border-color:#78FA89;
}
form .form-valid {
    color: #FA787E;
}
form .form-valid.active {
    color: #78FA89;
}

JavaScript

(function () {

    var app = angular.module('form', []);

    app.controller('FormController', function () {
        this.meals = mealTypes;

        this.selectMeal = function (setMeal) {
            if (!setMeal.active) {
                angular.forEach(this.meals, function (s) {
                    s.active = false;
                });
                setMeal.active = true;
            }
        };

        this.total = function (days, size) {
            var total = 0;
            var percentage = 0;
            var mealType;
            var discount = false;
            total = days * size;


            angular.forEach(this.meals, function (s) {
                if (s.active) {
                    total *= s.price;
                    mealType = s.name + ' - ' + s.description;
                }

            });
            if (days >= 10) {
                percentage = (total / 100) * 10;
                total -= percentage;
                discount = true;
            }

            return [total, percentage, mealType, discount];

        };

    });

    var mealTypes = [{
        name: 'breakfast',
        price: '20',
        description: 'Three course breakfast',
        active: true
    }, {
        name: 'dinner',
        price: '20',
        description: 'Three course dinner',
        active: false
    }, {
        name: 'both',
        price: '40',
        description: 'Breakfast and Dinner',
        active: false
    }

    ];

    app.controller('PanelController', function () {
        this.tab = 1;

        this.selectTab = function (setTab) {
            this.tab = setTab;
        };

        this.isSelected = function (checkTab) {
            return this.tab == checkTab;
        };
    });
})();