Category Archives: Phil

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

Phil 1.12.15

7:00 – 3:00 SR

  • Freezing rain today. The roads have the dull glaze of ice. It’s a great day for telework.
  • Spent a few hours chasing odd errors that I thought were based on JavaScript inheritance but actually turned out to be server oddness. Turns out data provided by remote servers like ‘HTTP_REFERER’ is not standardized and might not be provided. Good thing to note.
  • Working on making scatterplot OO. Then I’m going to see if I can make the panel consist of different directives. Or at least use ng-if two switch between the minimal, hovered and selected items.
  • OO for scatterplot is done. I didn’t like the way that the gl-matrix library was putting it’s elements into the global/window namespace, so I changed that so that they are now under glx. The way that they were doing it was really odd though:
(function(_global) {
  "use strict";

  var shim = {};
  if (typeof(exports) === 'undefined') {
    if(typeof define == 'function' && typeof define.amd == 'object' && define.amd) {
      shim.exports = {};
      define(function() {
        return shim.exports;
      });
    } else {
      // gl-matrix lives in a browser, define its namespaces in global
      shim.exports = typeof(window) !== 'undefined' ? window : _global;
    }
  }
  else {
    // gl-matrix lives in commonjs, define its namespaces in exports
    shim.exports = exports;
  }

  (function(exports) {
	// all the matrix code goes here

  })(shim.exports);
})(this);
  • It turns out that this is a strategy for integrating with Nodejs, which has an ‘exports’ property which is how they handle namespacing. Kind of. More learning to do here.
  • Got the switching of html working with ng-if. To keep the smooth transitions, I have an outer wrapper div that gets the overall (size, color) style. It contains three divs that are switched between using ng-if:
<div class="floatingPanelStyle" ng-class="getCssClass()"
     ng-click="selectPanel()"
     ng-mouseenter="hoverPanel(true)"
     ng-mouseleave="hoverPanel(false)"
     ng-style="{'transform':getTransformString()}">
    <!-- <div ng-bind-html="getHtml()"></div> -->
    <div ng-if="checkPanelState('default')"><em>{{panelObj.id}}</em></div>
    <div ng-if="checkPanelState('hover')"><p>Hover</p></p><p>Click <a href="http://google.com">me</a>!</p></div>
    <div ng-if="checkPanelState('selected')"><p>Selected</p></p></div>
</div>
  • Next step will be to put more sophisticated markup, like a form in there.

 

Phil 1.9.15

8:00 – 5:00 SR

  • DB backups now appear automated!
  • Failover is a problem since our servers apparently run in two different VMs
  • Discussed plans with Lenny, and the presentation with Don
  • Tried the code restructuring on my irev apps, which are a reasonably large Angular app. After a few dumb cut-and-paste errors, everything works…?
  • Next will be to inherit an app and turk controller from the postControllers.
    • Had to change any variable or function to be explicitly attached to this/self, but other than that, everything works. Broke out irevTurk to it’s own module, using an inherited postController. Deployed and running!

Phil 1.8.15

7:30 – 4:30 SR

  • DB backups
  • Some back and forth with Agenia about when to meet next. Some morning next week
  • Nearly fixed the dynamic charts.
    • ‘ISR-PMO’ chokes the query.
    • The goals seem to have problems on FY boundries.
  • Deployed Dong’s FR app on the test server and it seems to work
  • Spent some time going over the FR Angular code, and there are some very weird things. In the process of fixing(?) them, we broke the app. Dong’s looking into that now.
  • Started to pull the iRev code apart and use inheritance. The use of all the functions and pointers seems to be working fine, but there’s a lot of code to move around. I think I’ll create an iRevApps2 directory and populate with cleaned items. At this point I’m thinking that the organization should look something like this:
    • globals – contains JS objects that are used throughout the applications
    • angular – contains the actual angular code used by the application. A single file for a simple SPA should look something like this:
// The Angular code
(function(angular, ml, undefined) {
    angular.module('globalsApp', [])
            .factory('GlobalsService', [ml.factoryPtr]);

    angular.module('inheritApp', ['globalsApp'])
            .controller('MainCtrl', ['GlobalsService', ml.childPtr]);
})(angular, myLogic);
    • then I’m not sure. There needs to be a place for common/base classes. Then possibly folders for each SPA component? Here’s Google’s style guide to ponder.

Phil 1.7.15

Phil 8:00 – 5:00 SR

Phil 1.6.15

8:00 – 4:00 SR

  • Snow!
  • ITK timesheet
  • Status report
  • Made FY charts for all FY2015. It looks like the new query is using the wrong values for the Name column – e.g., it should be ‘PM Actuals’ but it’s coming back as ‘PM Actuals (Invoiced) Outlay $’
  • Angular
    • Was looking at the scatterplot app and it’s entirely broken. I’m thinking that I didn’t update all of the code to subversion when I was working on it back on the 24th. Setting that aside for the day. I think I’m going to try to understand how to do inheritance in Angular. And a darn good thing too. I found all my missing code, fixed a few things, committed it, and put it up here.
    • Rediscovered that ‘this’ is not part of a javascript function. Which makes the whole var self = this part of a controller now very confusing. Ah, in looking at the debugger, controllers get a special ‘this’ – ‘$get.Constructor’

controllerConstructor

    • There doesn’t seem to be much discussion about this – mostly this bit on stackoverflow.
    • Making slow progress. I can declare a function outside of the controller, inherit from it and use that as the controller’s function, but so far I can’t pass arguments. Since that’s only needed to inject other angular objects, I put together a tiny service that provides a string. We’ll see if I can make that pass in correctly tomorrow.

Phil 1.5.15

8:00 – 5:30 SR

  • Fix ITK timesheet for 12/21?
  • DB Backups
  • Status report
  • Angular
    • Spent most of the day trying to figure out how to get server information such as referrer. Wound up with a php hack:
<?php
// this is the only way that I know to get the referring page. We will then send this to the db.
function getReferrer(){
    $referrer = "No Referrer";
    if(isset($_SERVER['HTTP_REFERER'])) {
        $referrer = htmlentities($_SERVER['HTTP_REFERER']);
        if($referrer == ""){
            $referrer = "No Referrer";
        }
    }
    return $referrer;
}
echo '<div id="phpReferer" hidden>'.getReferrer().'</div>';
?>
    • This uses php to compile a page with a div named ‘phpReferer’. Since the page exists before Angular has a chance to process it, the hidden div is available in the document. It’s then a matter of getting the $document (passed into the controller) and looking through it. Note that the jQueryLite that angular has doesn’t allow finding divs by ID, so we have to loop over the results for <div> until we find what we’re looking for:
self.phpReferer = null;
var divArray = $document.find('div');
var i;
for(i = 0; i < divArray.length; i++){
   if(divArray[i].id === 'phpReferer'){
      self.phpReferer = divArray[i].innerText;
   }
}
    • I’m not hugely happy with this, but it does work…
    • Also looked at how to do polymorphism in Angular. I found this example, which is somewhat confusing and bares further examination. The guy who described it, Miško Hevery, is one of the authors of Angular, so I give him the benifit of the doubt. And here’s a talk by him on OO and JavaScript. Currently 46 minutes in.

Phil 1.2.14

8:00 – 5:00 SR

  • DB backups
  • Angular
    • Starting db-backed ‘wizard’ directive. We’ll probably use this mechanism for the Funding Request webapp.
CREATE TABLE IF NOT EXISTS `wizard_table` (
  `uid` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `step` int(11) NOT NULL,
  `question` varchar(255) NOT NULL,
  `info` varchar(255) NOT NULL,
  `response_type` varchar(255) NOT NULL,
  `responses` int(11) NOT NULL,
  PRIMARY KEY (`uid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
  • Populating table with famous quotes
  • Starting the main directive code. Since this isn’t an ng-repeat, I need to load the data and set the first panel with an ng-init call.
  • Got everything working. Need to clean up a bit.