saintc0d3r/post_and_display.html

## post_and_display.html
<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
        <style>
            table, th, td {
                border: 1px solid grey;
                border-collapse: collapse;
            }
            th, td{
                padding: 7px;
            }
            table tr:nth-child(odd) {
                background-color: #f1f1f1;
            }
            table tr:nth-child(even) {
                background-color: #ffffff;
            }
            body section {
                padding-top: 5px;
                padding-bottom: 5px;
            }

            /* Post item form's style */
            ul {
                list-style: none;
                padding:0;
                margin:2px;
            }
            ul li{
                padding: 0;
                clear: both;
                margin: 0 0 10px 0;
            }
            ul li label {
                width: 120px;
                float: left;
            }
            input.title{
                width: 250px;
            }
            input.price {
                width: 120px;
            }
            input.quantity{
                width: 50px;
            }
        </style>
    </head>
    <body ng-app="" ng-controller="items_controller" ng-init="button_post_label='Post New Item'; post_item={}">
        <header><h2>Items Shop List</h2><hr/></header>
        <section>
            <section ng-show="post_panel_visible">
                <form>
                    <ul>
                        <li><label>Title</label><input class="title" type="text" name="" placeholder="e.g. Pedang Naga Puspa" ng-model="post_item.title"></li>
                        <li><label>Description</label><textarea name="" cols="60" rows="6" ng-model="post_item.description"></textarea></li>
                        <li><label>Price</label><input class="price" type="number" name="" value="0.00" min="0" step="0.01" ng-model="post_item.price"></li>
                        <li><label>Quantity</label><input class="quantity" type="number" name="" value="0" min="0" ng-model="post_item.quantity"></li>
                        <li><button ng-click="on_post_button_clicked()" type="button">Post</button></li>
                    </ul>
                </form>
            </section>
            <section ng-show="post_progress_panel_visible">
                <img src="assets/images/spinner.gif" alt=""><h4>Post item is still in progress ...</h4>
            </section>
            <section ng-show="post_result_panel_visible">
                <p><h3>{{last_post_result}}</h3></p>
                <button type="button" ng-click="on_result_panel_button_clicked()">Done</button>
            </section>
            <button ng-click="on_show_post_panel_button_clicked()" ng-model="button_post_label" ng-show="button_post_visible" type="button">{{button_post_label}}</button>
        </section>
        <section >
            <table>
                <tr>
                    <th>Title</th>
                    <th>Description</th>
                    <th>Price</th>
                    <th>Quantity</th>
                </tr>
                <tr ng-repeat="item in items | orderBy : id">
                    <td>{{item.title}}</td>
                    <td>{{item.description}}</td>
                    <td>{{(item.price|currency)}}</td>
                    <td>{{item.quantity}}</td>
                </tr>
            </table>
        </section>
        <script>
            function items_controller($scope, $http){
                // Your own REST service endpoint that return a list of items, where an item has these properties: title, description, price, quantity
                var rest_host = 'http://localhost/items';
                $scope.post_panel_visible = false;
                $scope.post_result_panel_visible = false;
                $scope.post_progress_panel_visible = false;
                $scope.button_post_visible = true;

                /**
                 * A helper method for initialising item object
                 */
                var initialise_post_item = function(item){
                    item.title = "";
                    item.description = "";
                    item.price = 0.00;
                    item.quantity = 0;
                };

                /**
                 * A helper to pull all items from server
                 */
                var get_items = function() {
                    $http.get(rest_host + '/items')
                         .success(function(response){
                                    $scope.items = response;
                          });

                }

                get_items();

                /**
                 * Show/Hide post item panel when the Post item show button is clicked
                 */
                $scope.on_show_post_panel_button_clicked = function(){
                    $scope.post_panel_visible = !$scope.post_panel_visible;
                    initialise_post_item($scope.post_item);

                    if ($scope.post_panel_visible) {
                        $scope.button_post_label = 'Cancel';
                    }
                    else{
                        $scope.button_post_label = 'Post New Item';
                    }
                }

                /**
                 * Post the entered item to server.
                 */
                $scope.on_post_button_clicked = function(){
                    $scope.post_panel_visible = false;
                    $scope.button_post_visible = false;
                    $scope.post_progress_panel_visible = true;

                    var post_item = angular.copy($scope.post_item);
                    $http.post(rest_host + '/items', post_item)
                        .success(function(response){
                            //$scope.items.push(response);
                            get_items();
                            $scope.post_progress_panel_visible = false;
                            $scope.last_post_result = "Item is posted successfully";
                            $scope.post_result_panel_visible = true;
                        })
                        .error(function(response){
                            $scope.post_progress_panel_visible = false;
                            $scope.last_post_result = 'failed to post the item into server.';
                            $scope.post_result_panel_visible = true;
                        })
                }

                /**
                 * Hide Post Item's Result panel & restore the Post Item Panel Show Button
                 */
                $scope.on_result_panel_button_clicked = function(){
                    $scope.last_post_result = "";
                    $scope.post_result_panel_visible = false;
                    $scope.button_post_label = 'Post New Item';
                    $scope.button_post_visible = true;
                }
            }
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
	<style>
	table, th, td {
	border: 1px solid grey;
	border-collapse: collapse;
	}
	th, td{
	padding: 7px;
	}
	table tr:nth-child(odd) {
	background-color: #f1f1f1;
	}
	table tr:nth-child(even) {
	background-color: #ffffff;
	}
	body section {
	padding-top: 5px;
	padding-bottom: 5px;
	}

	/* Post item form's style */
	ul {
	list-style: none;
	padding:0;
	margin:2px;
	}
	ul li{
	padding: 0;
	clear: both;
	margin: 0 0 10px 0;
	}
	ul li label {
	width: 120px;
	float: left;
	}
	input.title{
	width: 250px;
	}
	input.price {
	width: 120px;
	}
	input.quantity{
	width: 50px;
	}
	</style>
	</head>
	<body ng-app="" ng-controller="items_controller" ng-init="button_post_label='Post New Item'; post_item={}">
	<header><h2>Items Shop List</h2><hr/></header>
	<section>
	<section ng-show="post_panel_visible">
	<form>
	<ul>
	<li><label>Title</label><input class="title" type="text" name="" placeholder="e.g. Pedang Naga Puspa" ng-model="post_item.title"></li>
	<li><label>Description</label><textarea name="" cols="60" rows="6" ng-model="post_item.description"></textarea></li>
	<li><label>Price</label><input class="price" type="number" name="" value="0.00" min="0" step="0.01" ng-model="post_item.price"></li>
	<li><label>Quantity</label><input class="quantity" type="number" name="" value="0" min="0" ng-model="post_item.quantity"></li>
	<li><button ng-click="on_post_button_clicked()" type="button">Post</button></li>
	</ul>
	</form>
	</section>
	<section ng-show="post_progress_panel_visible">
	<img src="assets/images/spinner.gif" alt=""><h4>Post item is still in progress ...</h4>
	</section>
	<section ng-show="post_result_panel_visible">
	<p><h3>{{last_post_result}}</h3></p>
	<button type="button" ng-click="on_result_panel_button_clicked()">Done</button>
	</section>
	<button ng-click="on_show_post_panel_button_clicked()" ng-model="button_post_label" ng-show="button_post_visible" type="button">{{button_post_label}}</button>
	</section>
	<section >
	<table>
	<tr>
	<th>Title</th>
	<th>Description</th>
	<th>Price</th>
	<th>Quantity</th>
	</tr>
	<tr ng-repeat="item in items \| orderBy : id">
	<td>{{item.title}}</td>
	<td>{{item.description}}</td>
	<td>{{(item.price\|currency)}}</td>
	<td>{{item.quantity}}</td>
	</tr>
	</table>
	</section>
	<script>
	function items_controller($scope, $http){
	// Your own REST service endpoint that return a list of items, where an item has these properties: title, description, price, quantity
	var rest_host = 'http://localhost/items';
	$scope.post_panel_visible = false;
	$scope.post_result_panel_visible = false;
	$scope.post_progress_panel_visible = false;
	$scope.button_post_visible = true;

	/**
	* A helper method for initialising item object
	*/
	var initialise_post_item = function(item){
	item.title = "";
	item.description = "";
	item.price = 0.00;
	item.quantity = 0;
	};

	/**
	* A helper to pull all items from server
	*/
	var get_items = function() {
	$http.get(rest_host + '/items')
	.success(function(response){
	$scope.items = response;
	});

	}

	get_items();

	/**
	* Show/Hide post item panel when the Post item show button is clicked
	*/
	$scope.on_show_post_panel_button_clicked = function(){
	$scope.post_panel_visible = !$scope.post_panel_visible;
	initialise_post_item($scope.post_item);

	if ($scope.post_panel_visible) {
	$scope.button_post_label = 'Cancel';
	}
	else{
	$scope.button_post_label = 'Post New Item';
	}
	}

	/**
	* Post the entered item to server.
	*/
	$scope.on_post_button_clicked = function(){
	$scope.post_panel_visible = false;
	$scope.button_post_visible = false;
	$scope.post_progress_panel_visible = true;

	var post_item = angular.copy($scope.post_item);
	$http.post(rest_host + '/items', post_item)
	.success(function(response){
	//$scope.items.push(response);
	get_items();
	$scope.post_progress_panel_visible = false;
	$scope.last_post_result = "Item is posted successfully";
	$scope.post_result_panel_visible = true;
	})
	.error(function(response){
	$scope.post_progress_panel_visible = false;
	$scope.last_post_result = 'failed to post the item into server.';
	$scope.post_result_panel_visible = true;
	})
	}

	/**
	* Hide Post Item's Result panel & restore the Post Item Panel Show Button
	*/
	$scope.on_result_panel_button_clicked = function(){
	$scope.last_post_result = "";
	$scope.post_result_panel_visible = false;
	$scope.button_post_label = 'Post New Item';
	$scope.button_post_visible = true;
	}
	}
	</script>
	</body>
	</html>