Prepare JS AJAX interactions. Show phone numbers into the appropriate div. Import some CSS things. Cleanup JS code

controller/smscontroller.php

@@ -38,6 +38,7 @@ class SmsController extends Controller {
 		$mboxes = array(
 			'PNLConversations' => array(
 				'label' => 'Conversations',
+				'phoneNumbers' => $this->smsMapper->getAllPeersPhoneNumbers($this->userId),
 				'url' => \OCP\Util::linkToAbsolute('index.php', 'apps/ocsms/', array('feed' => 'conversations'))
 			),
 			'PNLDrafts' => array(

css/style.css

@@ -13,3 +13,33 @@
 	-ms-user-select: none;
 	user-select: none;
 }
+
+#app-mailbox-peers > ul {
+	position: relative;
+	height: 100%;
+	overflow: auto;
+	-moz-box-sizing: border-box; box-sizing: border-box;
+}
+#app-mailbox-peers li {
+	position: relative;
+	width: 100%;
+	-moz-box-sizing: border-box; box-sizing: border-box;
+}
+
+#app-mailbox-peers li:hover > a,
+#app-mailbox-peers .selected,
+#app-mailbox-peers .selected a {
+	background-color: #ccc;
+}
+
+#app-mailbox-peers li > a {
+	display: block;
+	width: 100%;
+	line-height: 44px;
+	padding: 0 12px;
+	overflow: hidden;
+	-moz-box-sizing: border-box; box-sizing: border-box;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	color: #333;
+}

js/script.js

@@ -9,23 +9,27 @@
  */
 
 (function ($, OC) {
-
 	$(document).ready(function () {
-		$('#push').click(function () {
+		// Now bind the events when we click on the phone number
-			var url = OC.generateUrl('/apps/ocsms/push');
+		$('#app-navigation').find('a').on('click', function (event) {
-			var data = {
+			OC.Util.History.pushState('feed=' + $(this).attr('nav-feed'));
-				smsCount: 2,
+                	event.preventDefault();
-				smsDatas: [
+        	});
-					{"read": true, "date": 1410524385, "seen": false, "draft": false, "address": "+33612121212", "body": "testSMS", "id": 10},
-					{"read": false, "date": 1400524385, "seen": true, "draft": true, "address": "+33614121212", "body": "test SMS 2", "id": 14},
-				]
-			};
 
-			$.post(url, data).success(function (response) {
+		$.getJSON(OC.generateUrl('/apps/ocsms/get/peerlist'), function(jsondata, status) {
-				$('#push-result').text(response);
+			var peerListBuf = "";
+			$.each(jsondata['phonelist'], function(id, val) {
+				peerListBuf += '<li><a href="#" mailbox-navigation="' + val + '">' + val + '</a></li>';
 			});
+			$('#app-mailbox-peers ul').html(peerListBuf);
 			
-		});
+			// Now bind the events when we click on the phone number
+			$('#app-mailbox-peers').find('a[mailbox-navigation]').on('click', function (event) {
+				OC.Util.History.pushState('phonenumber=' + $(this).attr('mailbox-navigation'));
+                		event.preventDefault();
+        		});
+
+	        });
 	});
 
 })(jQuery, OC);

templates/main.php

@@ -9,6 +9,8 @@
 	</div>
 
 	<div id="app-mailbox-peers">
+		<ul>
+		</ul>
 	</div>
 
 	<div id="app-content">

templates/part.navigation.php

@@ -1,7 +1,7 @@
 <ul>
 	<?php foreach ($_['mailboxes'] as $mboxName => $mailbox) { ?>
 		<?php if (count($mailbox['phoneNumbers']) > 0) { ?>
-		<li><a href="<?php p($mailbox['url']); ?>"><?php p($mailbox['label']); ?></a></li>
+		<li><a href="<?php p($mailbox['url']); ?>" nav-feed="<?php p($mailbox['label']); ?>"><?php p($mailbox['label']); ?></a></li>
 	<?php }
 	} ?>
 </ul>