| <html ng-app="app"> |
| <head><title></title> |
| <style> |
| |
| input[type=text], textarea, select { |
| -webkit-transition: all 0.30s ease-in-out; |
| -moz-transition: all 0.30s ease-in-out; |
| -ms-transition: all 0.30s ease-in-out; |
| -o-transition: all 0.30s ease-in-out; |
| outline: none; |
| padding: 3px 0px 3px 3px; |
| margin: 5px 1px 3px 0px; |
| border: 1px solid #DDDDDD; |
| } |
| |
| input[type=text]:focus, textarea:focus, select:focus { |
| box-shadow: 0 0 5px rgba(81, 203, 238, 1); |
| padding: 3px 0px 3px 3px; |
| margin: 5px 1px 3px 0px; |
| border: 1px solid rgba(81, 203, 238, 1); |
| } |
| |
| body { |
| font-family: Helvetica, Arial, sans-serif; |
| font-size: 16px; |
| background: #e3edf2; |
| } |
| |
| td { |
| font-family: Helvetica, Arial, sans-serif; |
| font-size: 12px; |
| } |
| |
| input { |
| font-family: Helvetica, Arial, sans-serif; |
| font-size: 14px; |
| width: 200px; |
| height: 25px; |
| } |
| |
| textarea { |
| font-family: Helvetica, Arial, sans-serif; |
| font-size: 14px; |
| width: 200px; |
| } |
| |
| select { |
| font-family: Helvetica, Arial, sans-serif; |
| font-size: 14px; |
| width: 200px; |
| height: 25px; |
| } |
| |
| button { |
| font-family: Helvetica, Arial, sans-serif; |
| font-size: 14px; |
| } |
| |
| </style> |
| |
| <script type="text/javascript"> |
| var parseQueryString = function() { |
| |
| var str = window.location.search; |
| var objURL = {}; |
| |
| str.replace( |
| new RegExp( "([^?=&]+)(=([^&]*))?", "g" ), |
| function( $0, $1, $2, $3 ){ |
| objURL[ $1 ] = $3; |
| } |
| ); |
| return objURL; |
| }; |
| </script> |
| |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> |
| |
| <script type="text/javascript"> |
| var app = angular.module('app', []); |
| |
| app.controller('detailController', function($scope,$http,$location) { |
| |
| $scope.save = function(s) { |
| //alert(s.id); |
| var url="JsonSaveServlet?s="+$scope.sName; |
| $http.put(url, s).success( |
| function(response) { |
| $scope.sDetail = response; |
| window.location = 'table.html?s='+$scope.sName; |
| }); |
| }; |
| |
| $scope.keys = function(obj){ |
| return obj? Object.keys(obj) : []; |
| }; |
| |
| var params = parseQueryString(); |
| $scope.sName = params["s"]; |
| $scope.sId = params["id"]; |
| var url="JsonDetailsServlet?s="+$scope.sName+"&id="+$scope.sId; |
| $http.get(url).success( |
| function(response) { |
| $scope.sDetail = response; |
| }); |
| }); |
| |
| </script> |
| |
| </head> |
| |
| <body > |
| <div ng-controller="detailController"> |
| <P> |
| <P> |
| <B>{{sDetail.label}}</B> |
| <!-- |
| <P>{{sDetail.id}} |
| <P>************ {{sDetail}} *********************** |
| --> |
| <p> |
| <table> |
| <tr ng-repeat="(index,key) in keys(sDetail) | filter: '!icon' | filter: '!label' | filter: '!id'"> |
| <td>{{sDetail[key].caption}}</td> |
| <td align="left"> |
| <div ng-switch on="sDetail[key].type"> |
| <!-- |
| <div ng-repeat="proposal in sDetail[key].proposals"> |
| {{proposal}} |
| </div> |
| <b>{{sDetail[key].value}}</b> |
| --> |
| <div ng-switch-when="combo"> |
| <select ng-model="sDetail[key].value" |
| ng-options="proposal for proposal in sDetail[key].proposals" value="proposal"> |
| </select> |
| </div> |
| <div ng-switch-when="button"> |
| <input type="checkbox" data-ng-model="sDetail[key].value" ng-true-value="true" ng-false-value="false"/> |
| </div> |
| <div ng-switch-when="textarea"> |
| <textarea data-ng-model="sDetail[key].value"></textarea> |
| </div> |
| <div ng-switch-when="datetime"> |
| <input type="date" data-ng-model="sDetail[key].value"/> |
| </div> |
| <div ng-switch-default> |
| <input type="text" data-ng-model="sDetail[key].value" > |
| </div> |
| </div> |
| </td> |
| </tr> |
| </table> |
| <p> |
| <button ng-click="save(sDetail)">Save</button> |
| </div> |
| |
| |
| </body> |
| |
| </html> |
