Category Archives: Phil

Phil 2.5.15

8:00 – 6:00 SR

  • Lenny’s using the FR app. So far the only change is that the scheme for saving the project needs to change. Portfolio managers will probably be the last people to touch the submission, so save needs to be supported earlier.
  • Updated my resume to reflect my shiny new MS. I guess it’s a sign of the times, but I have a lot of resumes to update…
  • Test TypeScript server access code. If that works, then change the login directive.
  • And it works! I had to change the calling function from this:
(function(angular, queryServicePtr, queryPtr, passwordDialogPtr, undefined) {
   "use strict";
   angular.module('phpConnection', [])
      .factory('QueryService', ['$http', queryServicePtr]);
   angular.module('queryApp', ['phpConnection'])
      .controller('MainCtrl', ['$http', 'QueryService', queryPtr])
      .directive('passwordDialog', ['$http', 'QueryService', passwordDialogPtr]);
})(
   angular,
   globalUtils.appMap.phpFactories.queryServicePtr,
   globalUtils.appMap.queryControllers.queryPtr,
   globalUtils.appMap.passwordDirectives.passwordDialogPtr
);
  • To this JavaScript version…
(function(angular, queryServicePtr, queryPtr, passwordDialogPtr, undefined) {
   "use strict";
   angular.module('phpConnection', [])
      .service('QueryService', ['$http', queryServicePtr]);
   angular.module('queryApp', ['phpConnection'])
      .controller('MainCtrl', ['$http', 'QueryService', queryPtr])
      .directive('passwordDialog', ['$http', 'QueryService', passwordDialogPtr]);
})(
   angular,
   PhpConnectionService.UrlAccess,
   globalUtils.appMap.queryControllers.queryPtr,
   globalUtils.appMap.passwordDirectives.passwordDialogPtr
);
  • And lastly, to TypeScript:
/// <reference path="../../definitelytyped/angularjs/angular.d.ts" />
/// <reference path="../../libs/novetta/services/phpConnectionService.d.ts" />
/// <reference path="../../libs/novetta/directives/PasswordDirectivesTS.d.ts" />

// we do this to accommodate the globalUtils JavaScript object from libs/novetta/globals/globalUtils.js
interface IGlobalUtils{
   appMap:any;
}
declare var globalUtils:IGlobalUtils;

module QueryApp {
   class AngularMain {
      serviceModule:ng.IModule;
      appModule:ng.IModule;

      public doCreate(angular:ng.IAngularStatic,
                  queryServicePtr:Function,
                  queryControllerPtr:Function,
                  passwordDialogPtr:Function){

         this.serviceModule = angular.module('phpConnection', []);
         this.serviceModule.service('QueryService', ['$http', queryServicePtr]);

         this.appModule = angular.module('queryApp', ['phpConnection']);
         this.appModule.controller('MainCtrl', ['$http', 'QueryService', queryControllerPtr]);
         this.appModule.directive('passwordDialog', ['QueryService', passwordDialogPtr]);
      }
   }

   new AngularMain().doCreate(angular,
      PhpConnectionService.UrlAccess,
      globalUtils.appMap.queryControllers.queryPtr,
      PasswordDirectives.BaseLoginDirective.ctor
   );
}
  • That’s it!
  • Now, for completeness, here’s the full TypeScript module with the UrlAccess service:
/// <reference path="../../../definitelytyped/angularjs/angular.d.ts" />

module PhpConnectionService{

   export interface IUrlAccess{
      setPasswordUrl(newUrl:string):void;
      setQueryUrl(newUrl:string):void;
      getPasswordUrl():string;
      getQueryUrl():string;
      submit(query:string, goodResponse:any, errorResponse:any):ng.IPromise<any>;
   }

   export class UrlAccess implements IUrlAccess{
      private passwordUrl:string = 'iopass.php';
      private queryUrl:string = 'io2.php';
      private httpService:ng.IHttpService;

      constructor($http:ng.IHttpService){
         this.httpService = $http;
      }

      static buildParams(obj:any):string {
         var query:string = '';
         var name:string;
         var value: any;
         var fullSubName:string;
         var subName:string;
         var subValue:any;
         var innerObj:any;
         var i:number;

         for(name in obj) {
            if(obj.hasOwnProperty(name)) {
               value = obj[name];

               if(value instanceof Array) {
                  for(i = 0; i < value.length; ++i) {
                     subValue = value[i];
                     fullSubName = name + '[' + i + ']';
                     innerObj = {};
                     innerObj[fullSubName] = subValue;
                     query += UrlAccess.buildParams(innerObj) + '&';
                  }
               }
               else if(value instanceof Object) {
                  for(subName in value) {
                     if(value.hasOwnProperty(subName)) {
                        subValue = value[subName];
                        fullSubName = name + '[' + subName + ']';
                        innerObj = {};
                        innerObj[fullSubName] = subValue;
                        query += UrlAccess.buildParams(innerObj) + '&';
                     }
                  }
               }
               else if(value !== undefined && value !== null) {
                  query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
               }
            }
         }

         return query.length ? query.substr(0, query.length - 1) : query;
      }

      public setPasswordUrl(newUrl:string):void{
         this.passwordUrl = newUrl;
      }

      public setQueryUrl(newUrl:string):void{
         this.queryUrl = newUrl;
      }

      public getPasswordUrl():string{
         return this.passwordUrl;
      }

      public getQueryUrl():string{
         return this.queryUrl;
      }

      public submit(query:string, goodResponse:any, errorResponse:any):ng.IPromise<any> {
         var upstring:string = encodeURI("query=" + query);
         var upObj:ng.IRequestConfig = {
            url: this.getQueryUrl(),
            method: "POST",
            data: upstring,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
         };
         return this.httpService(upObj).then(goodResponse, errorResponse);
      }

      public setPassword(userName:string, userPassword:string, goodResponse:any, errorResponse:any):ng.IPromise<any> {
         var postObj = {query: 'set_password', name: userName, password: userPassword};
         var upObj = {
            url: this.getPasswordUrl(),
            method: "POST",
            data: postObj,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            transformRequest: UrlAccess.buildParams
         };

         return this.httpService(upObj).then(goodResponse, errorResponse);
      }

      public checkPassword(userName:string, userPassword:string, goodResponse:any, errorResponse:any):ng.IPromise<any> {
         var postObj = {query: 'check_password', name: userName, password: userPassword};
         var upObj = {
            url: this.getPasswordUrl(),
            method: "POST",
            data: postObj,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            transformRequest: UrlAccess.buildParams
         };

         return this.httpService(upObj).then(goodResponse, errorResponse);
      }
   }
}
// we do this to accommodate the globalUtils JavaScript object from libs/novetta/globals/globalUtils.js
interface IGlobalUtils{
   appMap:any;
}
declare var globalUtils:IGlobalUtils;
  • So now we have the main calling app done in TS.

Phil 2.3.15

8:00 – 5:00 SR

  • Deploying new FR, with debugging. Everything but the login works. Dong is perplexed.
  • More Angular. Working on figuring out how to do complex directives. Huh. The secret is to understand that directives are static. And it turns out that factories are static too.
  • I’ve got my test app now working with
    • a controller
    • a service
    • a directive (with link function)
    • a factory.
  • Next, inheritance on all of the above.
    • Back to TypeScriptEssentials….
    • Modified the command line for the tsc compiler (under ‘watch’). It’s now tsc.cmd –declaration –noImplicitAny –target ES5 –sourcemap <filename>
    • Inheritance works like a charm. Classes with static functions (Factories and Directives) are a bit problematic, since there’s no ‘this’ to refer to. This means that functions are referred to by their fully qualified name (i.e. TestDirective.foo(), rather than this.foo()). Overloading can’t quite work the way that I’d like to. That being said, the static functions do come along for the ride, so as long as all the references are updated, everything works the way it should.

Phil 2.2.15

8:00 – 10:00, 12:00 – 5:30 SR

  • DB backups
  • Worked with Dong to install FR on the test server. The services still aren’t working. Maybe missing jar files?
  • Status report
  • More Angular
    • Tried making factories work but I got stuck trying to access the object’s this. Since they are structured differently but generally have the same functionality(ish), I tried configuring the TypeScript class as a service. That worked just fine – I was able to access public variables and functions through dependency injection.
    • Discovered that the ‘static’ keyword allows for directives to work with classes. THis might also be true for factories. The issue to work through is how the link function connects to the directive. Components like the scatterplot are big directives, and can’t be crammed into a single method in a class.
  • Timesheet!

Phil 1.30.15

8:00 – 5:00 SR

  • Had a scary email from Ronda about the center where our servers live getting shut down sometime in June. I thought we had started this process, but maybe not?
  • Meeting with Ronda at 4:00 on Monday.
  • More Typescript/Angular integration. Today’s results!
  • First, plain old angular HTML:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app="simpleApp">
<div ng-controller="MainCtrl as mc">
    <p>String = {{mc.myString}}</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="simple.js"></script>

</body>
</html>
  • Next, the TypeScript (simple.ts):
/// <reference path="../definitelytyped/angularjs/angular.d.ts" />

class TestClass{
   myString:string;

   constructor(){
      this.myString = "Hello, TypeScript4";
   }
}

class AngularMain{
   myModule:ng.IModule;
   myController:ng.IModule;
   public doCreate(angular:ng.IAngularStatic, sfn:Function){
      this.myModule = angular.module('simpleApp', []);
      this.myController = this.myModule.controller('MainCtrl', [sfn]);
   }
}

new AngularMain().doCreate(angular, TestClass);
  • Last, the generated JavaScript code (simple.js):
/// <reference path="../definitelytyped/angularjs/angular.d.ts" />
var TestClass = (function () {
    function TestClass() {
        this.myString = "Hello, TypeScript4";
    }
    return TestClass;
})();
var AngularMain = (function () {
    function AngularMain() {
    }
    AngularMain.prototype.doCreate = function (angular, sfn) {
        this.myModule = angular.module('simpleApp', []);
        this.myController = this.myModule.controller('MainCtrl', [sfn]);
    };
    return AngularMain;
})();
new AngularMain().doCreate(angular, TestClass);
//# sourceMappingURL=simple.js.map

Phil 1.29.15

8:00 – 5:00 SR

  • Deployed swf fix
  • Tried FR webapp again, but login still won’t work. The service can’t be found.
  • Working on using Typescript for our modules, now that we’ve settled on a variant of the Angular Prototype pattern.
  • Had to get the definitely typed angular and jquery ‘libraries’ and put them in their own folder for the 
    /// <reference path="../definitelytyped/angularjs/angular.d.ts" />
  • declarations(?) to work.
  • Went back to the angular with typescript video. The key points are really around 15:00 in, where the controllers and factories are built. Sean Hess’s github repository for the demo code is here.

Phil 1.28.15

8:00 – 3:30 SR

Phil 1.27.15

8:00 – 4:00 SR

  • Working on promoting the dialog and server components to the Novetta libs folder(s)
  • Aaaaaand while working on that I figured I’d make sure that inheritance works with my example server factory class. Turns out the Revealing Module Pattern breaks inheritance because the private functions don’t come along with closure, which surprised me. A google search brings up this post by MetaDuck, which I’m looking at….
  • No luck with that. It’s wierd, I’m just not getting the pointer from angular when I inherit. Giving up for a little while.
  • Moved password dialog to the novetta libs
  • Moved phpConnection to novetta libs
  • Ok, after a long walk to clear my head, I realized that my problems are because factories require a return object. This means that you have to change the first line of the inheritance code to store that return object so that it in turn can be returned to angular:
function QueryServiceFn2($http){
   var retObj = QueryServiceFn.call(this, $http);
   globalU.inheritPrototype(this, QueryServiceFn);
   return retObj;
}
  • And that works just fine. Going to check that closure works the way that I think it should now. And lo, it does. So here’s a full example of inheriting a factory object:
globalUtils.appMap.phpFactories2 = (function(globalU, base){
   "use strict";
   function QueryServiceFn($http){
      var retObj = base.call(this, $http);
      globalU.inheritPrototype(this, base);
      return retObj;
   }

   return{
      queryServicePtr: QueryServiceFn
   };
})(globalUtils, globalUtils.appMap.phpFactories.queryServicePtr);
  • To override a function, simply declare it normally and then set the pointer in retObj to point at the new version. The only thing to watch out for is that closure won’t hold. If you need access to an item in the base class that’s accessed through closure, you’ll probably have to copy it.

Phil 1.26.14

8:00 – 3:00 SR

  • Looks like the presentation went well. Chris wants a single presentation as well, which should be easy – just add the FY to the title and then make one large slideshow.
  • Hopefully finishing login directive.
    • Added in the factory calls to the http calls. Needed to add an additional then to process the reselts of the password query.
    • Working on a reset password capability – done.
    • Cleaning up CSS.

Phil 1.23.15

9:00 – 5:00 SR

  • Validating that my new, improved inheritance pattern works. Yep!
  • Building a login directive using OO. If that all behaves, then I can get back to scatterplot.
  • Broke apart the set login/password and the check password functions. For the test app, I’m communicating with PHP, since it comes with apache and I don’t have to spend a lot of time switching between Eclipse/Tomcat and Webstorm.
  • Good lord, I’ve completely forgotten how to build a simple directive. Ok, maybe not. What I’m trying to do is make a self-contained directive that will reach out through a couple of objects to a server to set and check a password. The calling page really just needs to know it the directive succeeds. As such, I need to have self contained information in the scope of the directives. After poking around for a while, I discovered that I could declare the variables in the link function, and then refer to them by name using ng-model
  • HTML
<div class="passwordDialog" ng-hide="isValid">
    <form>
        Name: <input type="text" ng-model="name" /><br />
        Password: <input type="text" ng-model="password" /><br />
        <input type="submit" ng-click="checkValues()" value="Check" />
    </form>
    <div>
        <input type="button" value="Click Me" ng-click="isValid = true">
    </div>
</div>
  • Directive JavaScript
function passwordFn(){
   return {
      restrict: 'AE',
      scope: {isValid: '@'}, // all we need to return - passed in from calling page.
      templateUrl: 'directives/passwordDialog.html',
      link: function(scope, element, attr) {
         scope.name = 'unset Name';
         scope.password = 'unset Password';
         scope.checkValues = function(nm,pw){
            console.log('scope.name = '+scope.name);
            //call the server and do tests here. Scope values are visible
         };
      }
   };
}

Phil 1.22.15

8:00 – 5:00 SR

  • Add a script that checks to see if a user has logged in within the last n months. If they have not, delete them
  • In future, add a ‘last used’ timestamp to user-generated content so that it can be culled
  • Look into why the FinancialAssistantServices logs file is being placed at the root.
  • Inheritance. So it turned out that what I thought was parasitic combination inheritance was just parasitic. The globalUtils.inheritPrototype() function was being called before the function/objects were being called. I think that this is because Angular is calling the functions after the other JavaScript is called. Since (I think!) the code has to be structured in this decoupled way to allow flexible use of OO, I had to look again at how all the pieces fit together. It turns out that a properly configured function object that inherits from a base class looks like this:
function ChildFn3(globalService) {
    console.log("Start ChildFn3");
    ChildFn2.call(this, globalService);
    globalU.inheritPrototype(this, ChildFn2);
    console.log("Finish ChildFn3");
}
  • we can adjust inherited values such as arrays without ‘static’ behaviors as well:
function ChildFn4(globalService) {
    console.log("Start ChildFn4");
    ChildFn2.call(this, globalService);
    globalU.inheritPrototype(this, ChildFn2);
    this.colors.push('black');
    console.log("Finish ChildFn4");
}

Phil 1.21.15

8:00 – 5:00 SR

  • Deploying new dynamic chart script
  • Fixed a few things, but a Month4 Obligated is not working. Manually updating tables for briefing.
  • Got promises to work. This is a very nice thing.
  • Working on Object/Function construction and it is way strange. Masking depends on the order of declarations in a very counter intuitive way. More here.

Phil 1.20.15

8:00 – 4:30 SR

  • Fixed most of the issues with the dynamic chart presentation. Committed isn’t carrying over, and the generalized solution to partial FY needs to be implemented for all months.
  • Trying to wrap all the pieces of JS inheritance into one call. Looking at this for the moment…
  • Had an idea about using Turk for generalized GUI testing using an Angular directive framework (it’ll need lots of OO!) and database io like what I did for iRevTurk.
  • Need to fix promises in my server code.
  • Timesheets…

Phil 1.14.15

10:00 – 4:30 SR

  • Morning doctor appt.
  • Mostly fixed the dynamic chart script. 2014_OM_ISRPMO isn’t getting any data though.
  • Deployed the new version of the Runding Request app but couldn’t get login to work.
  • Working on integrating ace/ui-ace into, well, everything.
  • Got the ui-ace editor roughtly integrated into scatterplot. The editor doesn’t have any programmatic configuration/data yet, but that can be added to the  mc.paneldata object.
  • And that’s it for the week. I’m off presenting at TEI 2015 for the rest of the week.

Phil 1.13.15

8:00 – 5:30 SR

  • ran the dynamic_charts script and then reset the last_run time to 1:00am. Now it should run when folks are not around.
  • Going to try changing the scatterplot test controller to run in a new module that references the scatterplot directive module. That worked just fine.
  • Added an appMap object to GlobalUtils. All objects are created as attributes of globalutils.appMap. to keep things clean in the function, it’s recommended to pass the values of appMap into the wrapping function:
(function(angular, scatterplot) {
    "use strict";
    angular.module('scatterApp', ['ngAnimate', 'ngSanitize', 'monospaced.mousewheel'])
        .directive('stagePlanes', [scatterplot.stagePlanesPtr])
        .directive('interactive3D', [scatterplot.interactive3dPtr])
        .directive('floatingPanelManager', [scatterplot.floatingPanelManagerPtr])
        .directive('floatingPanel', ['$sce', scatterplot.floatingPanelPtr]);
})(angular, globalUtils.appMap.scatterplotDirectives);
  • Something to look into: RequireJS. It’s got asynchronous loading of namespaced JavaScript files.
  • Continue working on the divs for scatterplot to create forms.
    • Before I try a form, I’m going to try to have the ace editor be the selected appearance. If I can get that to work, then integrating forms will be a piece of cake. Forms are always the fallback anyway…
    • Got the editor working, but it doesn’t play well with angular. There is a a directive though – UI-ace that looks promising. Got that to work, but it doesn’t seem to allow for data binding. Need to look into how to load the text in the editor.
  • Start on threejs charting?
  • Meeting with Agenia at 4:00 – 5:30