iEat2/web/views/units.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>
<t:template>
  <jsp:attribute name="title">Unit Manager</jsp:attribute>
  <jsp:attribute name="head">
    <script type="text/javascript" src="static/units.js"></script>
    <script type="text/javascript" src="static/ndbDatabase.js"></script>
    <script type="text/javascript" src="static/paginatedTable.js"></script>
    <script type="text/javascript" src="static/unitEditor.js"></script>
    <script type="text/javascript">
      var app = angular.module('unitManager', [
          'Units', 'ui.bootstrap', 'ieat.ui', 'ieat.ui.editors']);
      // TODO: Disable debug info in prod version
      app.controller('UnitController', [
          '$scope', '$uibModal', 'Unit',
          function($scope, $uibModal, Unit) {
              var loadUnitList = function(type) {
                  type.list = Unit.query({"type": type.name.toLowerCase()});
              }
              
              var promptWindow = function(newUnit) {
                  $uibModal.open({
                      // TODO: Figure out what these are and how they work
                      //ariaLabelledBy: 'modal-title',
                      //ariaDescribedBy: 'modal-body',
                      templateUrl: "addModal",
                      controller: ['$scope', '$uibModalInstance',
                                   function($scope, $uibModalInstance) {
                                       $scope.addUnit = $uibModalInstance.close;
                                       $scope.dismiss = $uibModalInstance.dismiss;
                                       $scope.newUnit = newUnit;
                                   }],
                      size: "md"
                  }).result.then(function(unit) {
                      unit.$save(function(resp) {
                          loadUnitList(
                              $scope.types.find(function(x) {
                                  return x.name == resp.type
                              })
                          );
                      }, function(err) {
                          // TODO: Error handling
                          console.error(err);
                      });
                  }, function(reason) {
                      console.debug(reason);
                  });
              };
              
              $scope.table = [{
                  name: "Name",
                  col: "name"
              }, {
                  name: "Abv.",
                  col: "symbol",
                  size: 1
              }, {
                  name: "Conversion",
                  col: "conversion"
              }, {
                  defaultValue: "Edit",
                  onClick: promptWindow,
                  size: 1
              }, {
                  name: "Add",
                  onHeaderClick: function() {
                      promptWindow(new Unit({
                          type: $scope.types[$scope.activeType].name
                      }));
                  },
                  defaultValue: "Delete",
                  onClick: function(unit) {
                      unit.$remove(function(resp) {
                          loadUnitList(
                              $scope.types.find(function(x) {
                                  return x.name == resp.type
                              })
                          );
                      }, function(err) {
                          // TODO: Error handling
                          console.error(err);
                      });
                  },
                  size: 1
              }];

              $scope.types = [
                  {name: "Mass"},
                  {name: "Volume"},
                  {name: "Count"}
              ];
              angular.forEach($scope.types, function(type) {
                  loadUnitList(type);
              });
          }]);
    </script>
  </jsp:attribute>
  <jsp:body>
    <div class="section container"
         data-ng-app="unitManager"
         data-ng-controller="UnitController">
      <h2>Unit Manager</h2>
      <uib-tabset data-active="activeType">
        <uib-tab data-ng-repeat="type in types"
                 data-index="$index"
                 data-heading="{{type.name}}">
          <paginated-table data-table-data="type.list"
                           data-structure="table">
          </paginated-table>
        </uib-tab>
      </uib-tabset>

      <script type="text/ng-template" id="addModal">
        <unit-editor data-unit="newUnit">
        </unit-editor>
        <div style="width: 100%; text-align: right; padding: 0 1em 1em 0;">
          <button type="button"
                  class="btn btn-success"
                  data-ng-click="addUnit(newUnit);">Submit</button>
          <button type="button" class="btn" data-ng-click="dismiss();">
            Cancel
          </button>
        </div>
      </script>
    </div>
  </jsp:body>
</t:template>