AngularJS and MomentJS – Formatting UTC to local time using a custom filter

Frequently in our app, we need to show date/time’s which are stored in our database as UTC time.  From a users perspective however, it is best to view datetime’s in their local timezones.

MomentJS is a great library that is used pretty heavily to display date/time’s in JavaScript in a friendly manner.  Combining MomentJS with AngularJS (and with a small custom filter).

We use “angular-moment” which provides Moment.JS directives for Angular.JS (timeago and more).

https://github.com/urish/angular-moment

We also like to have some conformity for formatting date/times throughout our app. Centralizing the formatting allows use to easily change the style/layout/format of our date/time’s and have that change occur throughout our entire app!

Once you have “angular-moment” running in your AngularJS app, add the custom filter to your AngularJS app.

Our custom filter: (where “angularJSApp” is the name of your AngularJS app)

var angularJSApp = angular.module('angularJSApp', ['angularMoment']);

angularJSApp.filter('UTCToNow', ['moment', function (moment) {
     return function (input, format) {
            if(format)
            {
                return moment.utc(input).local().format('dddd, MMMM Do YYYY, h:mm:ss a');
            }
            else
            {
                return moment.utc(input).local();
            }
        };
    }]
);

How to use the custom filter in our HTML:

{{dateCreated | UTCToNow: true }}
<br />
<span am-time-ago="dateCreated | UTCToNow"></span>

You should now see your date/time in your local timezone

Advertisements

AngularJS UI Bootstrap – Typeahead – Filtering by multiple properties with custom template

I’ve been working on an AngularJS v1.4.7 application that uses “angular-ui-bootstrap” v 1.1 to incorporate Bootstrap components in our AngularJS app.

UI Bootstrap Bootstrap components written in pure AngularJS by the AngularUI Team
https://angular-ui.github.io/bootstrap/

We have been using the “Typeahead” component pretty heavily and I just wanted to make a quick post about how we are using the component, specifically with regards to the custom template, and the ability to filter by multiple items.

https://angular-ui.github.io/bootstrap/#/typeahead

We use the Typeahead component to list objects and allow user selection. Below is a code snippet which shows an AngularJS Bootstrap UI Typeahead component which is filtering on a persons first name, or last name and is using a custom HTML template to display results.

<input type="text" ng-model="cctrl.Person" typeahead-template-url="personTemplate" typeahead-min-length="0" uib-typeahead="person as (person.first_name + ' ' +person.last_name) for person in cctrl.data | filter:{name:$viewValue}" class="form-control" placeholder="Select person" />
<script type="text/ng-template" id="personTemplate">
<a>
     {{match.model.first_name}}&nbsp;{{match.model.first_name}}
     <div class="row small-text">
          <div class="col-sm-4">
               <strong>Address</strong>
               {{match.model.address1}}&nbsp;{{match.model.address2}}
               <br/>
               {{match.model.city}},{{match.model.state}} {{match.model.zipCode}}
          </div>
          <div class="col-sm-4">
               <strong>Phone</strong>
               <br/>
               {{match.model.phone}}
          </div>
          <div class="col-sm-4">
               <strong>Email</strong>
               <br/>
               {{match.model.email}}
          </div>
     </div>
     <hr />
</a>
</script>

The “uib-typeahead” attribute is where you put what fields you would like to filter by.

uib-typeahead="person as (person.first_name + ' ' +person.last_name) for person in cctrl.data | filter:{name:$viewValue}" class="form-control"

If you want to add email and phone filtering to the Typeahead you would just add a space behind your last filter, and then add the new filter you want.

uib-typeahead="person as (person.first_name + ' ' +person.last_name + ' ' + person.email + ' ' + person.phone) for person in cctrl.data | filter:{name:$viewValue}" class="form-control"

The template is just controlled by the “typeahead-template-url” attribute on the Typeahead element and the HTML contained within the “” element. Whatever ID you give your script element will be the value for your “typeahead-template-url” attribute.

typeahead-template-url="personTemplate"
<script type="text/ng-template" id="personTemplate">
</script>

Azure Releases ExpressRoute

Microsoft has recently announced “ExpressRoute” for their Azure stack!  This is great news for security centric partners needed to ensure private access to the service hosted on Azure.

http://azure.microsoft.com/en-us/documentation/services/expressroute

If you utilize a network service provider that supports ExpressRoute connections, your connection can even bypass the public internet entirely!

I am personally excited to see where this technology goes, and how many providers start to pick it up.

Please note, even if your carrier does not support ExpressRoute directly, you can still utilize the ExpressRoute service!

How To: Server 2012 R2 Change Default RemoteApp Port for Web Deployments

Working on a RemoteApp configuration and I needed to change the default port (3389) that the RDWeb deployment file uses.  In Server 2008 there was an easy to use GUI that let you configure the name, port, and icon of RemoteApps.  That GUI is no longer available in Server 2012!  Not to fear, I found this nifty little PowerShell that allows you to set the port used on files that are downloaded by users at the “/RDWeb” RemoteApp web portal.

You will need to know the Collection Name for the RemoteApp session collection you are trying to edit.  Use the PowerShell command below and just replace “[[Your Collection Name]]” with your collection name, (QuickSessionCollection is the default name created by the “Quick” option during RemoteApp configuration).  Replace the “[[Your Port Here]]” with the port number you would like the RDWeb to use when giving users the .RDP file for their RemoteApp connection.

Set-RDSessionCollectionConfiguration –CollectionName [[Your Collection Name Here]] –CustomRdpProperty “server port:i:[[Your Port Here]]”

 

Server 2012 R2 : Change Remote Desktop SSL Certificate in 3 Easy Steps

Working on a Server 2012 Standard R2 today that had an initial SSL self signed certificate.  I needed to replace that certificate, so IIS and Remote Desktop would stop warning users about the security issue.  In Server 2008, you could select which certificate you wanted Remote Desktop connections to use.  In Server 2012 that GUI has been removed.  It took me a little while to get everything down for Server 2012, but these are the steps I took.  Hope this helps out someone else later on!

  1. Get the Thumbprint of the SSL certificate you want Remote Desktop to use
    1. Windows + R
    2. Type in mmc and hit enter
    3. Control + M (or File -> Add/Remove Snap In)
    4. Click on “Certificates” in the “Available snap-ins:” section
    5. Click the “Add >” button
    6. Select “Computer account”
    7. Click Next
    8. Select “Local Computer:”
    9. Click the “Finish” button
    10. Click “OK” button
    11. Open the “Certificates (Local Computer)” then, “Personal” and then “Certificates” sub folder.
    12. Double click the certificate you want Remote Desktop to use
    13. Click the “Details” tab
    14. Select “All” under “Show:” and scroll down to the “Thumbprint” field and select the “Thumprint” field.
    15. Copy the text of the hash.
    16. Remove all spaces from your copied hash
  2. Open “Power Shell” as an Administrator
  3. Run these power-shell commands (replace YOUR HASH HERE with your thumbprint you copied from step 1 above).  You can run each line one after the other.
    1. $TSGeneralSetting = Get-WmiObject -class “Win32_TSGeneralSetting” -Namespace root\cimv2\terminalservices -Filter “TerminalName=’RDP-tcp'”)
    2. $Hash = “YOUR HASH HERE”
    3. $TSGeneralSetting.SSLCertificateSHA1Hash = $Hash
    4. $TSGeneralSetting.put()

PowerShell should prompt you that everything went over successfully.  Connect to the server again with Remote Desktop or RemoteApp, and it should be using the new SSL configuration!

 

“Just Let Me Code!”

http://beta.slashdot.org/story/204979

LOL!  I have certainly felt like this before.  Knowing what I “love” to do and what I “have” to do.  We always talk about avoiding the “M & M’s”.  Managers and meetings.  Time sinks that can easily corrupt a development plan.  Getting into coding was so easy.  You pick things up, learn, and just hammer away at the keyboard.  Once it becomes a profession, it changes.  Schedules, deadlines, technology you didn’t get to choose.  It becomes more of a dodge and weave scenario vs a creative process.

Why I am in Washington, and programming with SAP!

So now that I am finally settled in to my new location, and Comcast has finally connected me online, I can post an update.

Long story short, my business partner and I developed some software over the last few months over long nights and weekends.  Very quickly we drew the attention of several investment interests.  Over several weeks, meetings, and countless demos we were dazed and confused.  We couldn’t decide if we wanted to continue running the company and keep in our direction, to bend to investment teams whims and wishes, etc.  Like a shining light, we happen to discover a company based in Vancouver, Washington who was looking for additions to their team, specifically developers in the industry we JUST BUILT SOFTWARE FOR!  It was like the ying to our yang.  Several meetings later, and we were sold.  We needed to move ASAP in order to begin integrating our technology stack, ideas, and begin solidifying a framework to revolutionize our industry.  We fell in love with the team, the direction they were on, and were in company of some seriously talented people.  We knew this was it, exactly what we had envisioned one day.

The background of our team members is as diverse as it is talented.  Most of the development team, support, and infrastructure is done within SAP’s platform of services and tools.  We are diving head first and using our intense .NET knowledge to leverage SAP’s enterprise level data and SDK.  It is a little different, leaving the web (temporarily), but all in all I believe our talents will do nothing but benefit the team and we will be able to bring strong development background to a team and industry that need solid development.

Why am I in Washington writing SAP?  For an industry.  For my team and family.  For my future, and the push for premium enterprise grade programs.