Add meetup-ko.js, Knockout implementation of meetup.js

css/main.css

@@ -56,6 +56,9 @@ p.lead {
     font-family: 'Open Sans';
 }
 
+.ug-badge { 
+    width: 50px;
+}
 /* Links */
 a {
     color: #682079;

dotnet-user-groups.html

@@ -42,27 +42,44 @@
 
                 <p class="lead">We also maintain a much larger list of <a href="https://twitter.com/DotNet/dotnet-user-groups">.NET meetup groups on twitter</a>. If you would like your group's events listed on either list, please contact us, on <a href="http://twitter.com/dotnet">twitter</a>.</p>
 
-                <div id="meetup-table"></div>
+                <div id="ugResults">
+                    <!-- ko if: !loaded -->
+                        <div id="ugLoader">Loading...</div>
+                    <!-- /ko -->
+                    <div id="meetup-table" data-bind="if: loaded">
+                        <table class="table table-hover">
+                            <tbody data-bind="foreach: events">
+                                <tr>
+                                    <td data-bind="text: dateTime"></td>
+                                    <td><img data-bind="attr: { src: source().image }" class="ug-badge" /></td>
+                                    <td><a data-bind="attr: { href: url }, text: name"></a></td>
+                                    <td><a data-bind="attr: { href: orgGroup().url }, text: orgGroup().name"></a></td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
     </div>
 
-    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
+    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
+    <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
-    <script src="js/meetup.js"></script>
+    <!--<script src="js/meetup.js"></script>-->
+    <script src="js/meetup-ko.js"></script>
     <script src="js/main.js"></script>
-    <!--<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>-->
+    <script>
-<script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    
-
+      ga('create', 'UA-65565245-1', 'auto');
-  ga('create', 'UA-65565245-1', 'auto');
+      ga('send', 'pageview');
-  ga('send', 'pageview');
+    
-
+    </script>
-</script>
 </body>
 </html>
 <!-- nice example

js/meetup-ko.js

@@ -0,0 +1,78 @@
+(function (ko, $, moment){
+	
+	var EventGroup = function (sourceObj) {
+		//TODO add the checking logic here or something
+		this.name = ko.observable(sourceObj.group_name);
+		this.url = ko.observable(sourceObj.group_url);
+	};
+	
+	var EventSource = function(sourceObj) {
+		this.name = ko.observable();
+		this.image = ko.observable();
+		var cmLogo = "http://dotnetsocialweb.azurewebsites.net/assets/cm_logo.png";
+	    var mLogo =  "http://dotnetsocialweb.azurewebsites.net/assets/meetup_logo.png";
+	    var dLogo =  "http://dotnetsocialweb.azurewebsites.net/assets/net_logo.png";
+		
+		switch (sourceObj.source) {
+			case "meetup.com":
+				this.name("meetup");
+				this.image(mLogo); 
+				break;
+			case "communitymegaphone.com":
+				this.name("communitymegaphone");
+				this.image(cmLogo);
+				break;
+			default: 
+				this.name("none");
+				this.image(dLogo);
+				break;
+		}
+	};
+	
+	var Event = function(sourceObj) {
+		this.name = ko.observable(sourceObj.name);
+		this.url = ko.observable(sourceObj.event_url === "" ? "https://twitter.com/DotNet/dotnet-user-groups" : sourceObj.event_url);
+		this.description = ko.observable(sourceObj.description);
+		this.source = ko.observable(new EventSource(sourceObj));
+		this.dateTime = ko.observable(moment(sourceObj.time).format('dddd, MMMM Do YYYY'));
+		this.orgGroup = ko.observable(new EventGroup(sourceObj));
+		
+	};
+	
+	var ugAggregatorViewModel = {
+	    // defaultUrl :"https://twitter.com/DotNet/dotnet-user-groups",
+	    cmBaseUrl : "http://www.communitymegaphone.com",
+	    meetupBaseUrl: "http://www.meetup.com/",
+		loaded: ko.observable(false),
+		events: ko.observableArray(),
+		meetupCount: ko.observable(10),
+		loadEvents: function () {
+			 var self = this;
+			 $.ajax({
+				 url: "http://dotnetsocial.cloudapp.net/api/meetup",
+				 method: "GET",
+				 data: { count: self.meetupCount(), expiry: 60 }
+			 })
+			 .done(function (data) {
+				 console.log(data);
+				 if (data.length > 0){
+					 var tempResult = [];
+					 $.each(data, function (key, value) {
+						 console.log(value);
+						 tempResult.push(new Event(value));
+					 });
+					 self.events(tempResult);
+					 console.log(self.events());
+					 self.loaded(true);
+				 }
+			 })
+			 .fail(function (data) {
+				console.log(data); 
+			 });
+			 
+		 }
+	};
+	ugAggregatorViewModel.loadEvents();
+	ko.applyBindings(ugAggregatorViewModel);
+	
+})(ko, $, moment);

js/meetup.js

@@ -4,6 +4,8 @@
 
 $(document).ready(function () {
 
+    var meetupCount = 10;
+    var showMeetupSource = false;
     var cmLogo =  "http://dotnetsocialweb.azurewebsites.net/assets/cm_logo.png";
     var mLogo = "http://dotnetsocialweb.azurewebsites.net/assets/meetup_logo.png";
     var dLogo = "http://dotnetsocialweb.azurewebsites.net/assets/net_logo.png"