Merge pull request #1 from Aer0naut/Last-x-fetched

Last x fetched
Aer0naut · Jul 30, 2017 · e4a5931 · e4a5931
2 parents 62b5e74 + c37a0e3
commit e4a5931
Show file tree

Hide file tree

Showing 5 changed files with 164 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -4,3 +4,7 @@ A Chrome extension for Visual Studio Team Services
 This extension gives you an easy way to navigate directly to a workitem in Visual Studio Team Services, only by entering the id of the item.Start by creating an access token in VSTS, configure the extension - you are good to GO!
 
 You can install it from the [Chrome webshop](https://goo.gl/7cPqLg), for free
+
+## Release 1.4
+- You can now see the latest 5 items you navigated to, and go back.
+- Fresh UI
diff --git a/main.css b/main.css
@@ -1,8 +1,21 @@
-body {margin:0;padding:0}
-.container{width:120px;margin:2px;height:26px}
+html, body {margin:0;padding:0;}
+
+.container{
+  width:130px;
+}
+
+.inputTop{
+background-color: #0078dd;
+vertical-align: middle;
+text-align: center;
+display: table-cell;
+padding: 4px 4px 4px 4px;
+width:130px;
+border-radius: 5px;
+}
 .optionsContainer{margin:10px;}
-.column-left{ float: left; width: 84px; }
-.column-right{ float: right; width: 20px; }
+.column-left{float:left; width: 84px;}
+.column-right{float:right; width: 36px; }
 .error-Configure{min-width:150px; height: 100%;font-size: 10px;padding: 0px 5px 5px 5px}
 .error-Request{width: 200px; height: 100%;font-size: 10px;padding: 0px 5px 5px 5px}
 
@@ -17,15 +30,16 @@ font-size: 12px; font-weight: bold;
 
 input{
     width:100%; 
-    border-color: #1E6696;
-    border: 1px solid #1E6696; 
+    border-color: #0078dd;
+    border: 1px solid #0078dd; 
     border-radius: 4px; 
     padding: 5px 5px;
     box-sizing: border-box;
+    outline:none;
 }
 
 input.options:valid {
-  border: 1px solid #1E6696;
+  border: 1px solid #0078dd;
     margin: 4px 0px 10px 0px;
 }
 
@@ -37,8 +51,8 @@ input.options:invalid {
 button{
     float:right;
     padding: 3px 5px 3px 5px;
-    background-color:#1E6696;
-    border: 1px solid #1E6696;
+    background-color:#0078dd;
+    border: 1px solid #0078dd;
     border-radius: 4px; 
     color: white;
     text-decoration: none;
@@ -56,15 +70,69 @@ float:initial;
   margin-left: 10px;
 }
 
+#recentItems{
+  float: left;
+  clear: left;
+  margin: 0px 0px 0px 0px;
+  width:100%;
+  padding-top: 5px;
+  font-family: calibri, sans-serif;
+}
+
+#recentItems ul{
+padding:0px;
+margin: 0px;
+}
+
+#recentItems ul li{
+  white-space: nowrap;      /*keep the text on one line*/
+  overflow: hidden;         /*prevent the text from being shown outside the border*/
+  text-overflow: ellipsis;  /*cut off text with an elipsis*/
+  padding:0px 0px 1px 2px;
+}
+
+#recentItems ul li:hover{
+background-color: #0078dd;
+color:#ffffff;
+}
+
+#recentItems ul li a{
+text-decoration: none;
+font-size: 14px;
+color: inherit;
+}
+
+.listItem0{
+color:#4d4d4d;
+}
+
+.listItem1{
+color:
+#737373
+}
+.listItem2{
+color:#999999;
+}
+
+.listItem3{
+color:#bfbfbf;
+}
+
+.listItem4{
+color:#d9d9d9;
+}
+
 /*turn off number input spinners*/
 input[type=number]::-webkit-inner-spin-button, 
 input[type=number]::-webkit-outer-spin-button { 
   -webkit-appearance: none; 
   margin: 0; 
 }
 
-
 /*-----------------------------LOADER----------------------------*/
+#divLoader{
+width:130px;
+}
 .loader,
 .loader:before,
 .loader:after {

diff --git a/manifest.json b/manifest.json
@@ -3,7 +3,7 @@
   "name": "VSTS GO",
   "short_name": "VSTS GO",
   "description": "This extension will send you to a specific workitem in your VSTS, given the id",
-  "version": "1.3",
+  "version": "1.4",
   "icons": { 
     "128": "VSTS-GO.png" 
   },

diff --git a/popup.html b/popup.html
@@ -7,10 +7,15 @@
     <link rel="stylesheet" href="main.css">
   </head>
   <body>
-    <div class="container">
-      <div class="column-left"><input type="number" id="workItemId" size="2" min="1" max="999999999"></div>
-      <div class="column-right"><button id="goButton">GO</button></div>
-      <div class="loader" id="loader" style="display:none;">Loading...</div>
+    <div id="container" class="container" >
+      <div class="inputTop">
+        <div class="column-left"><input type="number" id="workItemId" size="2" min="1" max="999999999"></div>
+        <div class="column-right"><button id="goButton">GO</button></div>
+      </div>
+    <div id="recentItems" style="display:none;"></div>
     </div>
+  <div id="divLoader" style="display:none;">
+    <div class="loader"></div>
+  <div>
   </body>
 </html>
diff --git a/popup.js b/popup.js
@@ -4,6 +4,8 @@ var collection;
 var vstsApiVersion = "?api-version=3.0";
 var vstsApiUrl = "_apis/wit/workItems/";
 var err = new errMsg();
+var recentItems = [];
+
 
 //Analytics------------------------
 var _gaq = _gaq || [];
@@ -24,12 +26,19 @@ function loadConfig(){
     chrome.storage.sync.get([
         'userDomain',
         'userCollection',
-        'userAccessToken'
+        'userAccessToken',
+        'userRecentItems'
         ], 
         function(items) {
             domain = items.userDomain;
             collection = items.userCollection;
             accesstoken = items.userAccessToken;
+            //if items where previously saved, assign them to local array
+            if(items.userRecentItems){
+                recentItems.length=0;
+                recentItems = items.userRecentItems;
+                console.log('previously saved items found');
+            }
 
             if(configIsValid()){ 
                 //set eventlisteners by script to avoid security issues
@@ -40,6 +49,13 @@ function loadConfig(){
                         document.getElementById("goButton").click();
                     } 
                 });
+
+                if(recentItems.length>0){
+                    showRecentItems();
+                }else{console.log('no item history')};
+
+                document.getElementById("workItemId").focus();
+
             }
             else{
                 err.invalidConfiguration();
@@ -48,6 +64,30 @@ function loadConfig(){
     );
 }
 
+function showRecentItems(){
+//appends li children to the ul list of the recent items, and then shows the ul list
+
+    var divRecentItems = document.getElementById('recentItems');
+    var ulRecentItems = document.createElement('ul');
+
+    divRecentItems.appendChild(ulRecentItems);
+
+     console.log('length:'+ recentItems.length);
+
+    for(var i in recentItems){
+        var li=document.createElement('li');
+        li.className = 'listItem' + i;
+        ulRecentItems.appendChild(li);
+
+        li.innerHTML+= '<a href="'+
+            recentItems[i][1]+'" target="_blank" title="'+recentItems[i][2]+'">'+
+            recentItems[i][0]+': '+recentItems[i][2]+'</a>';
+
+            console.log(i + ': '+recentItems[i][0]);
+        }
+        divRecentItems.style.display='block';  
+}
+
 function formVstsApiUrl(wId){
    var fullVstsApiUrl = domain+"/"+collection+"/"+vstsApiUrl+wId+vstsApiVersion;
    return fullVstsApiUrl;
@@ -61,7 +101,7 @@ function formWorkItemURL(teamProject,id){
 function configIsValid(){
     if(!(accesstoken&&domain&&collection)){
         return false;
-    }
+    } 
 return true;
 }
 
@@ -109,16 +149,33 @@ function errMsg(){
 function displayLoader(display){
 
     if(display){
-        document.getElementById('workItemId').style.display='none';
-        document.getElementById('goButton').style.display='none';
-        document.getElementById('loader').style.display='block';
+        document.getElementById('container').style.display='none';
+        document.getElementById('divLoader').style.display='block';
         }
     else{
-        document.getElementById('workItemId').style.display='block';
-        document.getElementById('goButton').style.display='block';
-        document.getElementById('loader').style.display='none';
+        document.getElementById('divLoader').style.display='none';
+        document.getElementById('container').style.display='block';
+    }
+
+}
+
+function saveRecentItem(id,recentItemUrl,title){
+    //insert url,id and title in the first (0) place of the array
+    //then store the array
+
+    recentItems.unshift([id,recentItemUrl,title]);
+
+    //Make sure the number of saved items in the array is max 5
+    if(recentItems.length>5){ 
+    recentItems.length = 5;
     }
 
+    chrome.storage.sync.set({
+    'userRecentItems': recentItems
+  }, function() {
+    // Update 
+   console.log('stored recent items');
+  });
 }
 
 function GetItem() {
@@ -134,15 +191,19 @@ function GetItem() {
 
             displayLoader(true);
 
+        //make VSTS API Call to retrieve item info
             $.ajax({ 
                 url:formVstsApiUrl(id),
                 type: "GET",
                 dataType: "json",
                 headers: {
                     'Authorization': 'Basic ' + btoa("" + ":" + accesstoken)
                 },      
-                success: function(data){    
-                    window.open(formWorkItemURL(data.fields["System.TeamProject"],id) , '_newtab');
+                success: function(data){
+                    var goUrl = formWorkItemURL(data.fields["System.TeamProject"], id);  
+                    saveRecentItem(id,goUrl,data.fields["System.Title"]);
+                    console.log(data.fields["System.Title"]);
+                    window.open(goUrl , '_newtab');
                     displayLoader(false);
                 },
                 error: function (jqXHR, status, error) {
@@ -160,5 +221,6 @@ function GetItem() {
     }
 }
 
+
 //Load userconfig on pageload
 document.addEventListener('DOMContentLoaded', loadConfig());