From 8ad1ef49b76eb6fb307e80ec7e06f857c868adb6 Mon Sep 17 00:00:00 2001
From: andyjennings314 <andyjennings314@gmail.com>
Date: Fri, 12 Jul 2019 20:46:09 +0100
Subject: [PATCH 1/5] Reconfigured data storage, introduced data export

---
 IMATTC.user.js | 246 +++++++++++++++++++++++++++----------------------
 1 file changed, 134 insertions(+), 112 deletions(-)

diff --git a/IMATTC.user.js b/IMATTC.user.js
index 16f6705..72304d6 100644
--- a/IMATTC.user.js
+++ b/IMATTC.user.js
@@ -1,6 +1,6 @@
 // ==UserScript==
 // @name         IMATTC
-// @version      1.4.2
+// @version      1.5.0
 // @description  A usability overhaul for the Ingress Mission Authoring Tool
 // @author       @Chyld314
 // @match        https://mission-author-dot-betaspike.appspot.com/
@@ -302,52 +302,63 @@ function init() {
       return dfd.promise;
     }
 
+    missionScope.categoryContent = [];
     missionScope.missions = w.$filter("orderBy")(missionScope.missions, 'definition.name');
     missionScope.loadingPreview = false;
-    //missionScope.getFullMissionData(missionScope.missions).then(function(data){
-        //for (var i=0;i<data.length;i++){
-        //  missionScope.missions[i].definition.waypoints = data[i];
-        //}
-
-        //unload category data in w.localStorage
-        var categoriesLength = parseInt(w.localStorage.getItem('categoriesLength')) || 0;
-        var categoryNames = w.localStorage.getItem('categoryNames') ? w.localStorage.getItem('categoryNames').split(',') : [];
-        var categoryGUIDs = [];
-        missionScope.categoryCollapse = [];
-        for (var i = 0; i < categoriesLength; i++) {
-          categoryGUIDs.push(w.localStorage.getItem('categoryContent' + i) ? w.localStorage.getItem('categoryContent' + i).split(',') : []);
-          missionScope.categoryCollapse.push(false)
-        }
-        //and one for unsorted missions
-        missionScope.categoryCollapse.push(true);
-        missionScope.selectedCategoryMissionId = null;
-        //now create the categorised/uncategorised missions
-        if (categoriesLength > 0) {
-          missionScope.categoryContent = [];
-          //create uncategorised mission bucket, that categories will take missions from. Add position in initial array
-          for (var i = 0; i < missionScope.missions.length; i++) {
-            missionScope.missions[i].position = i;
-          }
-          missionScope.uncategorisedMissions = angular.copy(missionScope.missions);
-
-        //loop through each category of GUIDs, and add actual missions to scope
-        categoryGUIDs.forEach(function(category) {
-          var catobj = [];
-          category.forEach(function(guid) {
-            for (var i = 0; i < missionScope.uncategorisedMissions.length ; i++) {
-              //once the right mission is found, add position, push it to the holding array and remove from uncategorised
-              if (missionScope.uncategorisedMissions[i].mission_guid == guid) {
-                catobj.push(missionScope.uncategorisedMissions[i]);
-                missionScope.uncategorisedMissions.splice(i, 1);
-                break;
-              }
-            }
-          })
-          missionScope.categoryContent.push(catobj)
-        })
+    missionScope.unsortedCollapse = w.localStorage.getItem('unsortedCollapse') || true;
+
+    //handling for legacy data format
+    if (!!w.localStorage.getItem('categoryNames')){
+      let oldegoriesLength = parseInt(w.localStorage.getItem('categoriesLength')) || 0,
+      categoryNames = w.localStorage.getItem('categoryNames') ? w.localStorage.getItem('categoryNames').split(',') : [],
+      thisCategory;
+      //create categories in new format
+      for (var i= 0; i < oldegoriesLength; i++){
+        thisCategory = {
+          id: i,
+          name: categoryNames[i],
+          missions: w.localStorage.getItem('categoryContent' + i) ? w.localStorage.getItem('categoryContent' + i).split(',') : [],
+          collapse: true
+        };
+        missionScope.categoryContent.push(thisCategory);
+        w.localStorage.removeItem('categoryContent' + i);
       }
+      w.localStorage.setItem('allCategories', JSON.stringify(missionScope.categoryContent));
 
-    //})
+      //now tidy up the legacy data
+      w.localStorage.removeItem('categoryNames');
+      w.localStorage.removeItem('categoriesLength');
+    }
+
+    //get data for all categories
+    missionScope.categoryContent = JSON.parse(w.localStorage.getItem('allCategories')) || [];
+    missionScope.selectedCategoryMissionId = null;
+
+    //now create the categorised/uncategorised missions
+    if (missionScope.categoryContent.length > 0) {
+      missionScope.categoryContent = [];
+      //create uncategorised mission bucket, that categories will take missions from. Add position in initial array
+      for (var i = 0; i < missionScope.missions.length; i++) {
+        missionScope.missions[i].position = i;
+      }
+      missionScope.uncategorisedMissions = angular.copy(missionScope.missions);
+
+    //loop through each category of GUIDs, and add actual missions to scope
+    missionScope.categoryContent.forEach(function(category) {
+      var catobj = [];
+      category.forEach(function(guid) {
+        for (var i = 0; i < missionScope.uncategorisedMissions.length ; i++) {
+          //once the right mission is found, add position, push it to the holding array and remove from uncategorised
+          if (missionScope.uncategorisedMissions[i].mission_guid == guid) {
+            catobj.push(missionScope.uncategorisedMissions[i]);
+            missionScope.uncategorisedMissions.splice(i, 1);
+            break;
+          }
+        }
+      })
+      missionScope.categoryContent.push(catobj)
+    })
+  }
 
   //function to calculate distances between two sets of coordinates taken from geodatasource.com
   missionScope.distance = function(lat1, lon1, lat2, lon2, unit) {
@@ -470,7 +481,8 @@ function init() {
     $(".modal-backdrop.fade").remove();
     $("body").removeClass("modal-open");
     var categoryID = missionScope.selectedCategoryID;
-    categoryGUIDs[categoryID].push(missionScope.selectedCategoryMissionId);
+    missionScope.categoryContent[categoryID].missions.push(missionScope.selectedCategoryMissionId);
+    missionScope.categoryContent[categoryID].collapse = false;
     //find mission in uncategorised missions
     for (var i = 0; i < missionScope.uncategorisedMissions.length; i++) {
       if (missionScope.uncategorisedMissions[i].mission_guid == missionScope.selectedCategoryMissionId) {
@@ -480,22 +492,21 @@ function init() {
       }
     }
     missionScope.selectedCategoryMissionId = null;
-    w.localStorage.setItem('categoryContent' + categoryID, categoryGUIDs[categoryID]);
-    missionScope.categoryCollapse[categoryID] = true;
     missionScope.selectedCategoryID = null;
+    w.localStorage.setItem('allCategories', JSON.stringify(missionScope.categoryContent));
     generateAllMissions();
   }
 
   missionScope.removeFromCategory = function(category, mission) {
-    for (var i = 0; i < categoryGUIDs[category].length; i++) {
-      if (categoryGUIDs[category][i] == mission.mission_guid) {
+    for (var i = 0; i < missionScope.categoryContent[category].missions.length; i++) {
+      if (missionScope.categoryContent[category].missions[i] == mission.mission_guid) {
         missionScope.uncategorisedMissions.push(mission);
         missionScope.categoryContent[category].splice(i, 1);
         categoryGUIDs[category].splice(i, 1);
       }
     }
-    w.localStorage.setItem('categoryContent' + category, categoryGUIDs[category]);
-    missionScope.categoryCollapse[category] = true;
+    missionScope.categoryContent[category].collapse = false;
+    w.localStorage.setItem('allCategories', JSON.stringify(missionScope.categoryContent));
     generateAllMissions();
   }
 
@@ -504,44 +515,32 @@ function init() {
     if (categoryName == null || categoryName == "") {
       //no result
     } else {
-      //create category elements in various places
-      categoriesLength++;
-      w.localStorage.setItem('categoriesLength', categoriesLength);
-      categoryNames.push(categoryName);
-      w.localStorage.setItem('categoryNames', categoryNames);
-      missionScope.categoryContent = missionScope.categoryContent || [];
-      categoryGUIDs.push([]);
-      missionScope.categoryContent.push([]);
-      w.localStorage.setItem('categoryContent' + (categoriesLength - 1), []);
+      //create category elements
+      var newCategory = {
+        id: missionScope.categoryContent.length,
+        name: categoryName,
+        missions: [],
+        collapse: false
+      };
+      missionScope.categoryContent.push(newCategory);
+      w.localStorage.setItem('allCategories', JSON.stringify(missionScope.categoryContent));
       generateAllMissions();
     }
   }
   missionScope.nukeCategories = function() {
-    w.localStorage.clear();
+    missionScope.categoryContent = [];
+    w.localStorage.setItem('allCategories', []);
     generateAllMissions();
   }
 
   missionScope.deleteCategory = function(category) {
-    if (confirm("Are you sure you want to delete the " + categoryNames[category] + " category? Any missions you've placed in this category will be retured to Unsorted missions.")) {
-      //remove cateory from GUID list, move scope missions out, nuke localStorage categories
-      categoryGUIDs.splice(category, 1);
+    if (confirm("Are you sure you want to delete the " + missionScope.categoryContent[category].name + " category? Any missions you've placed in this category will be retured to Unsorted missions.")) {
+      //move scope missions out, nuke localStorage categories
       missionScope.categoryContent[category].forEach(function(mission) {
         missionScope.uncategorisedMissions.push(mission);
       })
       missionScope.categoryContent.splice(category, 1);
-      for (var i = 0; i < categoriesLength; i++) {
-        w.localStorage.removeItem('categoryContent' + i);
-      }
-      //remove other mission data
-      categoriesLength--;
-      w.localStorage.setItem('categoriesLength', categoriesLength);
-      categoryNames.splice(category, 1);
-      w.localStorage.setItem('categoryNames', categoryNames);
-      missionScope.categoryCollapse.splice(category, 1);
-      //then rebuild localStorage
-      for (var i = 0; i < categoriesLength; i++) {
-        w.localStorage.setItem('categoryContent' + i, categoryGUIDs[i]);
-      }
+      w.localStorage.setItem('allCategories', JSON.stringify(missionScope.categoryContent));
       generateAllMissions();
     }
   }
@@ -550,9 +549,9 @@ function init() {
     if (category == 'all'){
       missionScope.missions = w.$filter("orderBy")(missionScope.missions, missionScope.sortCriteria[0]);
     } else if (category == 'unsorted'){
-      missionScope.uncategorisedMissions = w.$filter("orderBy")(missionScope.uncategorisedMissions, missionScope.sortCriteria[categoriesLength]);
+      missionScope.uncategorisedMissions = w.$filter("orderBy")(missionScope.uncategorisedMissions, missionScope.sortCriteria[missionScope.categoryContent.length]);
     } else {
-      missionScope.categoryContent[category] = w.$filter("orderBy")(missionScope.categoryContent[category], missionScope.sortCriteria[category]);
+      missionScope.categoryContent[category].missions = w.$filter("orderBy")(missionScope.categoryContent[category].missions, missionScope.sortCriteria[category]);
     }
     generateAllMissions();
   }
@@ -571,7 +570,7 @@ function init() {
           sortContent += "0";
           break;
         case "unsorted":
-          sortContent += categoriesLength;
+          sortContent += missionScope.categoryContent.length;
           break;
         default:
           sortContent += category;
@@ -588,13 +587,13 @@ function init() {
 
   var generateMission = function(mission, id, selectedCategory) {
     var missionState = mission.missionListState.toLowerCase();
-    var newMissionCode = "<div class='col-sm-6 col-md-3'><div class='mission mission-list-item-" + missionState + "'>";
-    newMissionCode += "<div class='mission-header-container'><div>";
-    newMissionCode += "<img class='mission-image' src='" + (mission.definition.logo_url ? mission.definition.logo_url + "=s60-c" : "/images/button_logo.png") + "'>";
-    newMissionCode += "</div><div>";
-    newMissionCode += "<span class='name mission-title-" + missionState + "'>" + mission.definition.name + "</span>";
-    newMissionCode += "</div><div>";
-    newMissionCode += "<i class='name mission-title-" + missionState + " glyphicon glyphicon-";
+    var newMissionCode = "<div class='col-sm-6 col-md-3'><div class='mission mission-list-item-" + missionState + "'>"
+      + "<div class='mission-header-container'><div>"
+      + "<img class='mission-image' src='" + (mission.definition.logo_url ? mission.definition.logo_url + "=s60-c" : "/images/button_logo.png") + "'>"
+      + "</div><div>"
+      + "<span class='name mission-title-" + missionState + "'>" + mission.definition.name + "</span>"
+      + "</div><div>"
+      + "<i class='name mission-title-" + missionState + " glyphicon glyphicon-";
     switch (missionState) {
       case "draft":
         newMissionCode += "wrench' title='Unpublished draft mission'";
@@ -612,10 +611,10 @@ function init() {
         newMissionCode += "time' title='Published mission, changes under review'";
         break;
     }
-    newMissionCode += "></i>";
-    newMissionCode += "</div></div>";
-    newMissionCode += "<span class='name mission-time-" + missionState + "'>" + missionScope.getInfoTime(mission) + "</span>";
-    newMissionCode += "<table class='table table-bordered'";
+    newMissionCode += "></i>"
+      + "</div></div>"
+      + "<span class='name mission-time-" + missionState + "'>" + missionScope.getInfoTime(mission) + "</span>"
+      + "<table class='table table-bordered'";
     if (!mission.stats) {
       newMissionCode += " style='width: 20%;' ";
     }
@@ -633,13 +632,13 @@ function init() {
     }
     newMissionCode += "</td>";
     if (mission.stats) {
-      newMissionCode += "<td><i class='glyphicon glyphicon-time'></i> " + missionScope.getMissionTimeString(mission) + "</td>";
-      newMissionCode += "<td><i class='glyphicon glyphicon-thumbs-up'></i> " + missionScope.getMissionRatingString(mission) + "</td>";
-      newMissionCode += "<td><i class='glyphicon glyphicon-user'></i> " + mission.stats.num_completed + "</td>";
+      newMissionCode += "<td><i class='glyphicon glyphicon-time'></i> " + missionScope.getMissionTimeString(mission) + "</td>"
+        + "<td><i class='glyphicon glyphicon-thumbs-up'></i> " + missionScope.getMissionRatingString(mission) + "</td>"
+        + "<td><i class='glyphicon glyphicon-user'></i> " + mission.stats.num_completed + "</td>";
     }
-    newMissionCode += "</tr></table>";
-    newMissionCode += "<div class='dropup'><button class='button action-button dropdown-toggle' type='button' id='dropdownMenu1' data-toggle='dropdown' aria-haspopup='true' aria-expanded='true'>Perform Mission Action</button>";
-    newMissionCode += "<ul class='dropdown-menu' aria-labelledby='dropdownMenu1'>"
+    newMissionCode += "</tr></table>"
+      + "<div class='dropup'><button class='button action-button dropdown-toggle' type='button' id='dropdownMenu1' data-toggle='dropdown' aria-haspopup='true' aria-expanded='true'>Perform Mission Action</button>"
+      + "<ul class='dropdown-menu' aria-labelledby='dropdownMenu1'>";
     if (missionScope.getButton1Title(mission))
       newMissionCode += "<li><a role='button' ng-click='button1Clicked(missions[" + id + "])'>" + missionScope.getButton1Title(mission) + "</a></li>";
     if (missionScope.getButton2Title(mission))
@@ -663,20 +662,20 @@ function init() {
   }
   var generateAllMissions = function() {
     $(".missions-list").empty();
-    if (categoriesLength == 0) {
+    if (missionScope.categoryContent.length == 0) {
       $(".missions-list").addClass("row");
     }
     missionScope.sortCriteria = [];
     w.$injector.invoke(function($compile) {
       var missionContent = "";
-      if (categoriesLength > 0) {
+      if (missionScope.categoryContent.length > 0) {
         //if there are user-defined categories, loop over them
         missionContent += "<div class='panel-group' id='accordion' role='tablist' aria-multiselectable='true' style='width: 100%'>";
-        for (var i = 0; i < categoriesLength; i++) {
+        for (var i = 0; i < missionScope.categoryContent.length; i++) {
           missionContent += "<div class='panel panel-default'><div class='panel-heading' role='tab'>";
-          missionContent += "<h4 class='panel-title' ng-class='{\"collapsed\" : !categoryCollapse[" + i + "]}'><a ng-click='categoryCollapse[" + i + "] = !categoryCollapse[" + i + "]' role='button' data-toggle='collapse'>";
-          missionContent += categoryNames[i];
-          missionContent += "</a></h4></div><div class='panel-collapse collapse' ng-class='{\"in\" : categoryCollapse[" + i + "]}' role='tabpanel'><div class='panel-body'>";
+          missionContent += "<h4 class='panel-title' ng-class='{\"collapsed\" : categoryContent[" + i + "].collapse}'><a ng-click='categoryContent[" + i + "].collapse = !categoryContent[" + i + "].collapse' role='button' data-toggle='collapse'>";
+          missionContent += missionScope.categoryContent[i].name;
+          missionContent += "</a></h4></div><div class='panel-collapse collapse' ng-class='{\"in\" : !categoryContent[" + i + "].collapse}' role='tabpanel'><div class='panel-body'>";
           missionContent += "<div class='row'><div class='col-xs-12'>";
           missionContent += generateSort(i);
           missionContent += "<button class='btn btn-default'style='float: right!important;margin: 5px 0;' ng-click='deleteCategory(" + i + ")'>Delete Category</button>";
@@ -686,9 +685,9 @@ function init() {
           } else {
             missionContent += "<button class='btn btn-default'style='float: right!important;margin: 5px;' data-toggle='modal' data-target='#previewBanner" + i + "'>Preview Images</button>";
             missionContent += "<button class='btn btn-default'style='float: right!important;margin: 5px;' ng-click='previewBanner(" + i + ")' data-toggle='modal' data-target='#previewMissionModel'>Preview Route</button></div>";
-            var bannerModal = "<div class='modal fade' id='previewBanner" + i + "' tabindex='-1' role='dialog'><div class='modal-dialog modal-lg' role='document'><div class='modal-content banner-preview'><div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button><h4 class='modal-title'>Preview \"" + categoryNames[i] + "\"</h4></div><div class='modal-body'><div class='row'>";
+            var bannerModal = "<div class='modal fade' id='previewBanner" + i + "' tabindex='-1' role='dialog'><div class='modal-dialog modal-lg' role='document'><div class='modal-content banner-preview'><div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button><h4 class='modal-title'>Preview \"" + missionScope.categoryContent[i].collapse + "\"</h4></div><div class='modal-body'><div class='row'>";
             for (var j = 0; j < missionScope.categoryContent[i].length; j++) {
-              var mission = missionScope.categoryContent[i][j];
+              var mission = missionScope.categoryContent[i].missions[j];
               missionContent += generateMission(mission, mission.position, i);
               bannerModal += "<div class='col-xs-2'><img class='img-responsive' src='" + (mission.definition.logo_url ? mission.definition.logo_url : "/images/button_logo.png") + "' /></div>";
             }
@@ -699,7 +698,7 @@ function init() {
         }
         //add unsorted missions if there are any
         missionContent += "<div class='panel panel-default'><div class='panel-heading' role='tab' id='header-unsorted'>";
-        missionContent += "<h4 class='panel-title' ng-class='{\"collapsed\" : !categoryCollapse[" + categoriesLength + "]}'><a ng-click='categoryCollapse[" + categoriesLength + "] = !categoryCollapse[" + categoriesLength + "]' role='button' data-toggle='collapse'>Unsorted Missions</a></h4></div><div class='panel-collapse collapse' ng-class='{\"in\" : categoryCollapse[" + categoriesLength + "]}' role='tabpanel'><div class='panel-body'>";
+        missionContent += "<h4 class='panel-title' ng-class='{\"collapsed\" : unsortedCollapse}'><a ng-click='unsortedCollapse = !unsortedCollapse' role='button' data-toggle='collapse'>Unsorted Missions</a></h4></div><div class='panel-collapse collapse' ng-class='{\"in\" : !unsortedCollapse}' role='tabpanel'><div class='panel-body'>";
         missionContent += "<div class='row'><div class='col-xs-12'>";
         missionContent += generateSort('unsorted');
         missionContent += "</div>";
@@ -720,8 +719,8 @@ function init() {
       //modal for adding missions to categories
       missionContent += "<div class='modal fade' id='addCateModel' tabindex='-1' role='dialog'><div class='modal-dialog' role='document'><div class='modal-content'><div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button><h4 class='modal-title'>{{missionTitle}}</h4></div><div class='modal-body'>";
       missionContent += "<select class='form-control' ng-model='selectedCategoryID' ng-change='addToCategory()' >";
-      for (var i = 0; i < categoriesLength; i++) {
-        missionContent += "<option value='" + i + "' data-dismiss='modal'>" + categoryNames[i] + "</option>";
+      for (var i = 0; i < missionScope.categoryContent.length; i++) {
+        missionContent += "<option value='" + i + "' data-dismiss='modal'>" + missionScope.categoryContent[i].name + "</option>";
       }
       missionContent += "</select>";
       missionContent += "</div></div></div></div>";
@@ -738,9 +737,36 @@ function init() {
     });
   }
 
+  missionScope.exportData = function() {
+    prompt("Copy this text and paste it into the textbox for Import Data", JSON.stringify(missionScope.categoryContent));
+  };
+
+  missionScope.importData = function() {
+    var dataInput = prompt("Please paste in the text you got from the Export Data popup");
+    if (dataInput == null || dataInput == "") {
+      //don't do anything
+    } else {
+      //try to parse data, then turn it into object
+      try {
+        missionScope.categoryContent = JSON.parse(dataInput);
+        w.localStorage.setItem('allCategories', JSON.stringify(missionScope.categoryContent));
+        generateAllMissions();
+      } catch (e){
+        alert('Something went wrong!!');
+      }
+    }
+  }
+
   //compiling the buttons
   w.$injector.invoke(function($compile) {
     var buttonContent = "<div class='bordered-panel'>";
+
+    //button for adding categories
+    buttonContent += "<button ng-click='createCategory()' class='yellow create-mission-button'>Create New Category</button>";
+    buttonContent += "<button ng-click='exportData()' class='yellow create-mission-button'>Export Category Data</button>";
+    buttonContent += "<button ng-click='importData()' class='yellow create-mission-button'>Import Category Data</button>";
+    //buttonContent += "<button ng-click='nukeCategories()' class='yellow create-mission-button'>NUKE EVERYTHING</button>";
+
     //tally up available missions, and missions in draft states
     var draftMissions = w.$filter('filter')(missionScope.missions, {missionListState: "DRAFT"}, true).length;
     var dopMissions = w.$filter('filter')(missionScope.missions, {missionListState: "DRAFT_OF_PUBLISHED_MISSION"}, true).length;
@@ -768,17 +794,13 @@ function init() {
       buttonContent += "<span class='label mission-list-item-published'>"+publishedMissions+" published</span>";
     }
     buttonContent += "</h4>"
-    //button for adding categories
-    buttonContent += "<button ng-click='createCategory()' class='yellow create-mission-button'>Create New Category</button>";
-    //buttonContent += "<button ng-click='nukeCategories()' class='yellow create-mission-button'>NUKE EVERYTHING</button>";
-
     buttonContent += "</div>";
     // Pass our fragment content to $compile, and call the function that $compile returns with the scope.
     var compiledContent = $compile(buttonContent)(missionScope);
     // Put the output of the compilation in to the page using jQuery
     $('.list').prepend(compiledContent);
   });
-  $('.list .bordered-panel').append($('.list div:not(.bordered-panel) button.yellow.create-mission-button'));
+  $('.list .bordered-panel').prepend($('.list div:not(.bordered-panel) button.yellow.create-mission-button'));
 
   //initiating the missions
   $(".missions-list").removeClass("row").addClass('ready');

From 61bd3713c0d6917f75bf8942f7238ce0754c28cb Mon Sep 17 00:00:00 2001
From: "andyjennings314@" <andyjennings314@gmail.com>
Date: Mon, 15 Jul 2019 14:14:10 +0100
Subject: [PATCH 2/5] Refactored data storage to include more recent sorting
 structure

---
 IMATTC.user.js | 110 +++++++++++++++++++++++++------------------------
 1 file changed, 56 insertions(+), 54 deletions(-)

diff --git a/IMATTC.user.js b/IMATTC.user.js
index 72304d6..b76fa04 100644
--- a/IMATTC.user.js
+++ b/IMATTC.user.js
@@ -303,6 +303,9 @@ function init() {
     }
 
     missionScope.categoryContent = [];
+    missionScope.categorisedMissions = [];
+    missionScope.uncategorisedMissions = [];
+    missionScope.uncategorisedSort = 'initial';
     missionScope.missions = w.$filter("orderBy")(missionScope.missions, 'definition.name');
     missionScope.loadingPreview = false;
     missionScope.unsortedCollapse = w.localStorage.getItem('unsortedCollapse') || true;
@@ -318,7 +321,8 @@ function init() {
           id: i,
           name: categoryNames[i],
           missions: w.localStorage.getItem('categoryContent' + i) ? w.localStorage.getItem('categoryContent' + i).split(',') : [],
-          collapse: true
+          collapse: true,
+          sortCriteria: 'initial'
         };
         missionScope.categoryContent.push(thisCategory);
         w.localStorage.removeItem('categoryContent' + i);
@@ -334,31 +338,10 @@ function init() {
     missionScope.categoryContent = JSON.parse(w.localStorage.getItem('allCategories')) || [];
     missionScope.selectedCategoryMissionId = null;
 
-    //now create the categorised/uncategorised missions
-    if (missionScope.categoryContent.length > 0) {
-      missionScope.categoryContent = [];
-      //create uncategorised mission bucket, that categories will take missions from. Add position in initial array
-      for (var i = 0; i < missionScope.missions.length; i++) {
-        missionScope.missions[i].position = i;
-      }
-      missionScope.uncategorisedMissions = angular.copy(missionScope.missions);
-
-    //loop through each category of GUIDs, and add actual missions to scope
-    missionScope.categoryContent.forEach(function(category) {
-      var catobj = [];
-      category.forEach(function(guid) {
-        for (var i = 0; i < missionScope.uncategorisedMissions.length ; i++) {
-          //once the right mission is found, add position, push it to the holding array and remove from uncategorised
-          if (missionScope.uncategorisedMissions[i].mission_guid == guid) {
-            catobj.push(missionScope.uncategorisedMissions[i]);
-            missionScope.uncategorisedMissions.splice(i, 1);
-            break;
-          }
-        }
-      })
-      missionScope.categoryContent.push(catobj)
-    })
-  }
+    //Add position in initial array
+    for (var i = 0; i < missionScope.missions.length; i++) {
+      missionScope.missions[i].position = i;
+    }
 
   //function to calculate distances between two sets of coordinates taken from geodatasource.com
   missionScope.distance = function(lat1, lon1, lat2, lon2, unit) {
@@ -421,10 +404,10 @@ function init() {
   missionScope.previewBanner = function(category) {
     $('#previewMissionModel .modal-body .notloading').empty();
     missionScope.loadingPreview = true;
-      missionScope.getFullMissionData(missionScope.categoryContent[category]).then(function(data){
+      missionScope.getFullMissionData(missionScope.categorisedMissions[category]).then(function(data){
         missionScope.banner = {
           definition: {
-            name: categoryNames[category],
+            name: missionScope.categoryContent[category].name,
             author_nickname: data[0].author_nickname,
             description: data[0].description,
             _sequential: data[0]._sequential,
@@ -432,14 +415,14 @@ function init() {
             waypoints: []
           },
           stats: {
-            num_completed: missionScope.categoryContent[category][data.length -1].stats ? missionScope.categoryContent[category][data.length -1].stats.num_completed : 0,
+            num_completed: missionScope.categorisedMissions[category][data.length -1].stats ? missionScope.categorisedMissions[category][data.length -1].stats.num_completed : 0,
             rating: 0,
             median_completion_time: 0
           },
         };
-        for (var i = 0; i < missionScope.categoryContent[category].length; i++){
-          missionScope.banner.stats.rating += missionScope.categoryContent[category][i].stats ? missionScope.categoryContent[category][i].stats.rating : 0;
-          missionScope.banner.stats.median_completion_time += missionScope.categoryContent[category][i].stats ? missionScope.categoryContent[category][i].stats.median_completion_time : 0;
+        for (var i = 0; i < missionScope.categorisedMissions[category].length; i++){
+          missionScope.banner.stats.rating += missionScope.categorisedMissions[category][i].stats ? missionScope.categorisedMissions[category][i].stats.rating : 0;
+          missionScope.banner.stats.median_completion_time += missionScope.categorisedMissions[category][i].stats ? missionScope.categorisedMissions[category][i].stats.median_completion_time : 0;
           data[i].waypoints.forEach(function(wp){
             missionScope.banner.definition.waypoints.push(wp)
           })
@@ -483,14 +466,6 @@ function init() {
     var categoryID = missionScope.selectedCategoryID;
     missionScope.categoryContent[categoryID].missions.push(missionScope.selectedCategoryMissionId);
     missionScope.categoryContent[categoryID].collapse = false;
-    //find mission in uncategorised missions
-    for (var i = 0; i < missionScope.uncategorisedMissions.length; i++) {
-      if (missionScope.uncategorisedMissions[i].mission_guid == missionScope.selectedCategoryMissionId) {
-        missionScope.categoryContent[categoryID].push(missionScope.uncategorisedMissions[i]);
-        missionScope.uncategorisedMissions.splice(i, 1);
-        break;
-      }
-    }
     missionScope.selectedCategoryMissionId = null;
     missionScope.selectedCategoryID = null;
     w.localStorage.setItem('allCategories', JSON.stringify(missionScope.categoryContent));
@@ -500,12 +475,9 @@ function init() {
   missionScope.removeFromCategory = function(category, mission) {
     for (var i = 0; i < missionScope.categoryContent[category].missions.length; i++) {
       if (missionScope.categoryContent[category].missions[i] == mission.mission_guid) {
-        missionScope.uncategorisedMissions.push(mission);
-        missionScope.categoryContent[category].splice(i, 1);
-        categoryGUIDs[category].splice(i, 1);
+        missionScope.categoryContent[category].missions.splice(i, 1);
       }
     }
-    missionScope.categoryContent[category].collapse = false;
     w.localStorage.setItem('allCategories', JSON.stringify(missionScope.categoryContent));
     generateAllMissions();
   }
@@ -520,7 +492,8 @@ function init() {
         id: missionScope.categoryContent.length,
         name: categoryName,
         missions: [],
-        collapse: false
+        collapse: false,
+        sortCriteria: 'initial'
       };
       missionScope.categoryContent.push(newCategory);
       w.localStorage.setItem('allCategories', JSON.stringify(missionScope.categoryContent));
@@ -545,19 +518,20 @@ function init() {
     }
   }
 
-  missionScope.sortCategory = function(category, criteria){
+  missionScope.sortCategory = function(category){
     if (category == 'all'){
-      missionScope.missions = w.$filter("orderBy")(missionScope.missions, missionScope.sortCriteria[0]);
+      missionScope.missions = w.$filter("orderBy")(missionScope.missions, missionScope.sortCriteria[0] == 'initial' ? 'position' : missionScope.sortCriteria[0]);
     } else if (category == 'unsorted'){
-      missionScope.uncategorisedMissions = w.$filter("orderBy")(missionScope.uncategorisedMissions, missionScope.sortCriteria[missionScope.categoryContent.length]);
+      missionScope.uncategorisedSort = missionScope.sortCriteria[missionScope.categoryContent.length];
     } else {
-      missionScope.categoryContent[category].missions = w.$filter("orderBy")(missionScope.categoryContent[category].missions, missionScope.sortCriteria[category]);
+      missionScope.categoryContent[category].sortCriteria = missionScope.sortCriteria[category];
     }
     generateAllMissions();
   }
 
   var generateSort = function (category){
     var criteria = [
+      {name: "Initial", value: "initial"},
       {name: "Alphabetical (ascending)", value: "definition.name"},
       {name: "Alphabetical (descending)", value: "-definition.name"},
       {name: "Creation order", value: "created_ms"},
@@ -660,6 +634,7 @@ function init() {
     newMissionCode += "</div></div>";
     return newMissionCode;
   }
+
   var generateAllMissions = function() {
     $(".missions-list").empty();
     if (missionScope.categoryContent.length == 0) {
@@ -669,7 +644,34 @@ function init() {
     w.$injector.invoke(function($compile) {
       var missionContent = "";
       if (missionScope.categoryContent.length > 0) {
-        //if there are user-defined categories, loop over them
+        //if there are user-defined categories, first sort the categorised/uncategorised missions
+        missionScope.categorisedMissions = [];
+        missionScope.uncategorisedMissions = angular.copy(missionScope.missions);
+
+        //loop through each category of GUIDs, and add actual missions to scope
+        missionScope.categoryContent.forEach(function(category) {
+          var catobj = [];
+          category.missions.forEach(function(guid) {
+            //TODO: Do this with filters, not loops
+            for (var i = 0; i < missionScope.uncategorisedMissions.length ; i++) {
+              //once the right mission is found, add position, push it to the holding array and remove from uncategorised
+              if (missionScope.uncategorisedMissions[i].mission_guid == guid) {
+                catobj.push(missionScope.uncategorisedMissions[i]);
+                missionScope.uncategorisedMissions.splice(i, 1);
+                break;
+              }
+            }
+          })
+          missionScope.categorisedMissions.push(catobj);
+        })
+
+        //then get the categories sorted
+        missionScope.categoryContent.forEach(function(category) {
+            if (category.sortCriteria != 'initial') {missionScope.categorisedMissions[category.id] = w.$filter("orderBy")(missionScope.categorisedMissions[category.id], category.sortCriteria);}
+        })
+        if (missionScope.uncategorisedSort != 'initial') {missionScope.uncategorisedMissions = w.$filter("orderBy")(missionScope.uncategorisedMissions, missionScope.uncategorisedSort);}
+
+        //once all the categorisation is done, create the HTML for the categories!
         missionContent += "<div class='panel-group' id='accordion' role='tablist' aria-multiselectable='true' style='width: 100%'>";
         for (var i = 0; i < missionScope.categoryContent.length; i++) {
           missionContent += "<div class='panel panel-default'><div class='panel-heading' role='tab'>";
@@ -679,15 +681,15 @@ function init() {
           missionContent += "<div class='row'><div class='col-xs-12'>";
           missionContent += generateSort(i);
           missionContent += "<button class='btn btn-default'style='float: right!important;margin: 5px 0;' ng-click='deleteCategory(" + i + ")'>Delete Category</button>";
-          if (!missionScope.categoryContent[i] || missionScope.categoryContent[i].length == 0) {
+          if (!missionScope.categoryContent[i].missions || missionScope.categoryContent[i].missions.length == 0) {
             //no missions so far!
             missionContent += "</div><div class='col-xs-12'>No missions added to the category yet</div>";
           } else {
             missionContent += "<button class='btn btn-default'style='float: right!important;margin: 5px;' data-toggle='modal' data-target='#previewBanner" + i + "'>Preview Images</button>";
             missionContent += "<button class='btn btn-default'style='float: right!important;margin: 5px;' ng-click='previewBanner(" + i + ")' data-toggle='modal' data-target='#previewMissionModel'>Preview Route</button></div>";
             var bannerModal = "<div class='modal fade' id='previewBanner" + i + "' tabindex='-1' role='dialog'><div class='modal-dialog modal-lg' role='document'><div class='modal-content banner-preview'><div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button><h4 class='modal-title'>Preview \"" + missionScope.categoryContent[i].collapse + "\"</h4></div><div class='modal-body'><div class='row'>";
-            for (var j = 0; j < missionScope.categoryContent[i].length; j++) {
-              var mission = missionScope.categoryContent[i].missions[j];
+            for (var j = 0; j < missionScope.categoryContent[i].missions.length; j++) {
+              var mission = missionScope.categorisedMissions[i][j];
               missionContent += generateMission(mission, mission.position, i);
               bannerModal += "<div class='col-xs-2'><img class='img-responsive' src='" + (mission.definition.logo_url ? mission.definition.logo_url : "/images/button_logo.png") + "' /></div>";
             }
@@ -774,7 +776,7 @@ function init() {
     var sapMissions = w.$filter('filter')(missionScope.missions, {missionListState: "SUBMITTED_AND_PUBLISHED"}, true).length;
     var publishedMissions = w.$filter('filter')(missionScope.missions, {missionListState: "PUBLISHED"}, true).length;
     var remainder = 150 - (dopMissions + submittedMissions + sapMissions + publishedMissions);
-    buttonContent += "<h4 style='margin: 0 0 20px;'>";
+    buttonContent += "<h4 style='line-height: 2;'>";
     if (remainder > 0) {
       buttonContent += "<span class='label'>"+remainder+" missions remaining</span> ";
     }

From ae1d13469d46fb8885f970e34ccd246d14af1a71 Mon Sep 17 00:00:00 2001
From: "andyjennings314@" <andyjennings314@gmail.com>
Date: Mon, 15 Jul 2019 16:37:24 +0100
Subject: [PATCH 3/5] Reducing reuse of variables

---
 IMATTC.user.js | 288 ++++++++++++++++++++++++-------------------------
 1 file changed, 141 insertions(+), 147 deletions(-)

diff --git a/IMATTC.user.js b/IMATTC.user.js
index b76fa04..7ff37f5 100644
--- a/IMATTC.user.js
+++ b/IMATTC.user.js
@@ -29,97 +29,97 @@ $(function() {
 
   //Build CSS rules
   var newCssRules = "<style>"
-  newCssRules += ".navbar-my-missions							{cursor: pointer;}";
-  newCssRules += ".list > .bordered-panel {padding: 15px;}";
-  newCssRules += ".list .missions-list,.missions-list .panel-body .row 				{display: flex;flex-wrap: wrap;}";
-  newCssRules += ".list .create-mission-button    {margin: 0 5px;float: none!important;display: inline-block;}";
-  newCssRules += ".missions-list, .name-view .bordered-panel, .type-view .bordered-panel {opacity: 0; transition: opacity 0.5s}";
-  newCssRules += ".missions-list.ready, .name-view .bordered-panel.ready, .type-view .bordered-panel.ready {opacity:1}";
-  newCssRules += ".missions-list .mission 					{border-width: 2px;  margin: 10px 0 0; position: relative; padding: 5px; display: block;}";
-  newCssRules += ".list .mission .action-button 				{width: 100%; min-width: initial; max-width: initial;}";
-  newCssRules += ".mission-header-container					{display: flex; align-items: stretch;}";
-  newCssRules += ".mission-header-container div:nth-of-type(1){padding-right: 5px; width: 60px}";
-  newCssRules += ".mission-header-container div:nth-of-type(2){width: calc(100% - 115px)}";
-  newCssRules += ".mission-header-container div:nth-of-type(3){padding-left: 5px; width: 45px}";
-  newCssRules += ".button, button 							{background-image: none;}";
-  newCssRules += ".mission .name.glyphicon 					{font-size: 40px;}";
-  newCssRules += ".mission .name:not(.glyphicon) 				{text-align: center; display: block;}";
-  newCssRules += ".mission table {margin: 5px 0 10px;}";
-  newCssRules += ".missions-list .panel-default { border-color: #5afbea; background-color: black; border-radius: 0;}";
-  newCssRules += ".missions-list .panel-default>.panel-heading {color: #5afbea; background: #1f4549; border-radius: 0;}";
-  newCssRules += ".missions-list .panel-default>.panel-heading a:hover {color: #5afbea;}";
-  newCssRules += ".missions-list .panel-default>.panel-heading+.panel-collapse>.panel-body {border-top-color: black; padding-top: 0;}";
-  newCssRules += ".missions-list .panel-heading a:after {  font-family: 'Glyphicons Halflings';  content: '\\e114';  float: right;  color: 5afbea;  position: relative;  left: 10px; }";
-  newCssRules += ".missions-list .panel-heading h4.collapsed a:after {content: '\\e080'; }";
-  newCssRules += ".modal {color: black;}";
-  newCssRules += ".banner-preview .modal-body {background-color: #222;}";
-  newCssRules += ".banner-preview .row {display: flex; flex-direction: row-reverse; flex-wrap:wrap-reverse!important}";
-  newCssRules += ".banner-preview img {border-radius: 50%;border: 3px solid goldenrod;}";
-  newCssRules += ".banner-preview .col-xs-2 {padding-bottom: 15px;}";
-
-  newCssRules += ".mission-list-item-published 				{background-image: none; background: #001a00; border-color: darkgreen;color: lightgreen;}";
-  newCssRules += ".list .mission .mission-title-published 	{color: lightgreen;}";
-  newCssRules += ".mission-list-item-published .table-bordered * {border-color: lightgreen;}";
-  newCssRules += ".mission-list-item-published .button		{color: lightgreen; border-color: lightgreen; background-color: #004d00;}";
-  newCssRules += ".mission-list-item-published .button:hover	{background-color: #003300;}";
-  newCssRules += ".mission-list-item-published .button .caret	{border-bottom-color: lightgreen;}";
-
-  newCssRules += ".mission-list-item-draft 					{background-image: none; background-color: #170703; border-color: #a42e12;color: #f7ba5f;}";
-  newCssRules += ".list .mission .mission-title-draft 	{color: #f7ba5f;}";
-  newCssRules += ".mission-list-item-draft .table-bordered * {border-color: #f7ba5f;}";
-  newCssRules += ".mission-list-item-draft .button		{color: #f7ba5f; border-color: #f7ba5f; background-color: #8a280f;}";
-  newCssRules += ".mission-list-item-draft .button:hover	{background-color: #73210d;}";
-  newCssRules += ".mission-list-item-draft .button .caret	{border-bottom-color: #f7ba5f;}";
-
-  newCssRules += ".mission-list-item-draft_of_published_mission {background-image: none; background-color: #1a1a00; border-color: olive;color: greenyellow;}";
-  newCssRules += ".list .mission .mission-title-draft_of_published_mission 	{color: greenyellow;}";
-  newCssRules += ".mission-list-item-draft_of_published_mission .table-bordered * {border-color: greenyellow;}";
-  newCssRules += ".mission-list-item-draft_of_published_mission .button		{color: greenyellow; border-color: greenyellow; background-color: #666600;}";
-  newCssRules += ".mission-list-item-draft_of_published_mission .button:hover	{background-color: #4d4d00;}";
-  newCssRules += ".mission-list-item-draft_of_published_mission .button .caret	{border-bottom-color: greenyellow;}";
-
-  newCssRules += ".mission-list-item-submitted				{background-image: none; background-color: #181201; border-color: darkgoldenrod;color: gold;}";
-  newCssRules += ".list .mission .mission-title-submitted 	{color: gold;}";
-  newCssRules += ".mission-list-item-submitted .table-bordered * {border-color: gold;}";
-  newCssRules += ".mission-list-item-submitted .button		{color: gold; border-color: gold; background-color: #916a08;}";
-  newCssRules += ".mission-list-item-submitted .button:hover	{background-color: #785807;}";
-  newCssRules += ".mission-list-item-submitted .button .caret	{border-bottom-color: gold;}";
-
-  newCssRules += ".mission-list-item-disabled 				{background-image: none; background-color: #0d0d0d; border-color: #6b6b6b; color: red;}";
-  newCssRules += ".list .mission .mission-title-disabled	 	{color: red;}";
-  newCssRules += ".mission-list-item-disabled .table-bordered * {border-color: red;}";
-  newCssRules += ".mission-list-item-disabled .button		{color: red; border-color: red; background-color: #595959;}";
-  newCssRules += ".mission-list-item-disabled .button:hover	{background-color: #4d4d4d;}";
-  newCssRules += ".mission-list-item-disabled .button .caret	{border-bottom-color: red;}";
-
-  newCssRules += ".mission-list-item-submitted_and_published	{background-image: none; background-color: #0f1405; border-color: olivedrab;color: springgreen;}";
-  newCssRules += ".list .mission .mission-title-submitted_and_published 	{color: springgreen;}";
-  newCssRules += ".mission-list-item-submitted_and_published .table-bordered * {border-color: springgreen;}";
-  newCssRules += ".mission-list-item-submitted_and_published .button		{color: springgreen; border-color: springgreen; background-color: #5c7a1f;}";
-  newCssRules += ".mission-list-item-submitted_and_published .button:hover	{background-color: #4d6619;}";
-  newCssRules += ".mission-list-item-submitted_and_published .button .caret	{border-bottom-color: springgreen;}";
-
-  newCssRules += ".dropup 									{position: relative;}";
-  newCssRules += ".dropup .dropdown-menu						{top: initial; bottom: 30px; left: 0; right: 0; text-align: center;}";
-  newCssRules += ".dropdown-menu > li > a 					{cursor: pointer;}";
-  newCssRules += ".editor .view 								{width: initial;height: initial;text-align: center;margin: 0;}";
-  newCssRules += ".editor .type-view, .editor .name-view  {width: 100%;}";
-  newCssRules += ".pagination>li>a 							{background: #0b0c0d;border-color: #5afbea;color: #5afbea; font-size: 18px;}";
-  newCssRules += ".pagination>li>a:hover 						{background: #2b2c2d;border-color: #5afbea;color: #5afbea;}"
-  newCssRules += ".pagination>.active>a, .pagination>.active>a:hover {background-color: #5afbea;border-color: #5afbea;color: #0b0c0d;}";
-  newCssRules += ".type-view .btn.focus, .type-view .btn:focus, .type-view .btn:hover {color: unset;}";
-  newCssRules += ".type-view .btn.active.focus, .type-view .btn.active:focus, .type-view .btn.active:hover {color: #ebbc4a;}";
-  newCssRules += ".type-view .bordered-panel p           {font-size: 20px;}";
-  newCssRules += ".stopthat 									{color: red; font-weight: bold;}";
-  newCssRules += "input.form-control, textarea.form-control {border: 1px solid #5afbea; background: none; border-radius: 0; color: white;}";
-  newCssRules += ".upload-logo .input-row .upload-label {display: block;padding: 0 0 10px;}";
-  newCssRules += ".upload-logo .input-row {display: block;}";
-  newCssRules += ".upload-logo .input-row .upload-logo-cell, .upload-logo .input-row .clear-logo-button {display: inline-block;padding: 0; max-width: 50%;}";
-  newCssRules += ".preview-mission .mission-header {margin: 0; width: 65%; float: left;)}";
-  newCssRules += ".preview-mission .mission-stats, .preview-mission .mission-description {max-width: 35%;float: right; display: inline-block;}";
-  newCssRules += "#previewMissionModel .loading-screen { top: 0; right: 0; position: relative; height: 40px;}";
-  newCssRules += "#previewMissionModel .loading.spin { position: fixed; left: 50%; top: 80px; }";
-  newCssRules += "</style>";
+    + ".navbar-my-missions							{cursor: pointer;}"
+    + ".list > .bordered-panel {padding: 15px;}"
+    + ".list .missions-list,.missions-list .panel-body .row 				{display: flex;flex-wrap: wrap;}"
+    + ".list .create-mission-button    {margin: 0 5px;float: none!important;display: inline-block;}"
+    + ".missions-list, .name-view .bordered-panel, .type-view .bordered-panel {opacity: 0; transition: opacity 0.5s}"
+    + ".missions-list.ready, .name-view .bordered-panel.ready, .type-view .bordered-panel.ready {opacity:1}"
+    + ".missions-list .mission 					{border-width: 2px;  margin: 10px 0 0; position: relative; padding: 5px; display: block;}"
+    + ".list .mission .action-button 				{width: 100%; min-width: initial; max-width: initial;}"
+    + ".mission-header-container					{display: flex; align-items: stretch;}"
+    + ".mission-header-container div:nth-of-type(1){padding-right: 5px; width: 60px}"
+    + ".mission-header-container div:nth-of-type(2){width: calc(100% - 115px)}"
+    + ".mission-header-container div:nth-of-type(3){padding-left: 5px; width: 45px}"
+    + ".button, button 							{background-image: none;}"
+    + ".mission .name.glyphicon 					{font-size: 40px;}"
+    + ".mission .name:not(.glyphicon) 				{text-align: center; display: block;}"
+    + ".mission table {margin: 5px 0 10px;}"
+    + ".missions-list .panel-default { border-color: #5afbea; background-color: black; border-radius: 0;}"
+    + ".missions-list .panel-default>.panel-heading {color: #5afbea; background: #1f4549; border-radius: 0;}"
+    + ".missions-list .panel-default>.panel-heading a:hover {color: #5afbea;}"
+    + ".missions-list .panel-default>.panel-heading+.panel-collapse>.panel-body {border-top-color: black; padding-top: 0;}"
+    + ".missions-list .panel-heading a:after {  font-family: 'Glyphicons Halflings';  content: '\\e114';  float: right;  color: 5afbea;  position: relative;  left: 10px; }"
+    + ".missions-list .panel-heading h4.collapsed a:after {content: '\\e080'; }"
+    + ".modal {color: black;}"
+    + ".banner-preview .modal-body {background-color: #222;}"
+    + ".banner-preview .row {display: flex; flex-direction: row-reverse; flex-wrap:wrap-reverse!important}"
+    + ".banner-preview img {border-radius: 50%;border: 3px solid goldenrod;}"
+    + ".banner-preview .col-xs-2 {padding-bottom: 15px;}";
+
+  newCssRules += ".mission-list-item-published 				{background-image: none; background: #001a00; border-color: darkgreen;color: lightgreen;}"
+    + ".list .mission .mission-title-published 	{color: lightgreen;}"
+    + ".mission-list-item-published .table-bordered * {border-color: lightgreen;}"
+    + ".mission-list-item-published .button		{color: lightgreen; border-color: lightgreen; background-color: #004d00;}"
+    + ".mission-list-item-published .button:hover	{background-color: #003300;}"
+    + ".mission-list-item-published .button .caret	{border-bottom-color: lightgreen;}";
+
+  newCssRules += ".mission-list-item-draft 					{background-image: none; background-color: #170703; border-color: #a42e12;color: #f7ba5f;}"
+    + ".list .mission .mission-title-draft 	{color: #f7ba5f;}"
+    + ".mission-list-item-draft .table-bordered * {border-color: #f7ba5f;}"
+    + ".mission-list-item-draft .button		{color: #f7ba5f; border-color: #f7ba5f; background-color: #8a280f;}"
+    + ".mission-list-item-draft .button:hover	{background-color: #73210d;}"
+    + ".mission-list-item-draft .button .caret	{border-bottom-color: #f7ba5f;}";
+
+  newCssRules += ".mission-list-item-draft_of_published_mission {background-image: none; background-color: #1a1a00; border-color: olive;color: greenyellow;}"
+    + ".list .mission .mission-title-draft_of_published_mission 	{color: greenyellow;}"
+    + ".mission-list-item-draft_of_published_mission .table-bordered * {border-color: greenyellow;}"
+    + ".mission-list-item-draft_of_published_mission .button		{color: greenyellow; border-color: greenyellow; background-color: #666600;}"
+    + ".mission-list-item-draft_of_published_mission .button:hover	{background-color: #4d4d00;}"
+    + ".mission-list-item-draft_of_published_mission .button .caret	{border-bottom-color: greenyellow;}";
+
+  newCssRules += ".mission-list-item-submitted				{background-image: none; background-color: #181201; border-color: darkgoldenrod;color: gold;}"
+    + ".list .mission .mission-title-submitted 	{color: gold;}"
+    + ".mission-list-item-submitted .table-bordered * {border-color: gold;}"
+    + ".mission-list-item-submitted .button		{color: gold; border-color: gold; background-color: #916a08;}"
+    + ".mission-list-item-submitted .button:hover	{background-color: #785807;}"
+    + ".mission-list-item-submitted .button .caret	{border-bottom-color: gold;}";
+
+  newCssRules += ".mission-list-item-disabled 				{background-image: none; background-color: #0d0d0d; border-color: #6b6b6b; color: red;}"
+    + ".list .mission .mission-title-disabled	 	{color: red;}"
+    + ".mission-list-item-disabled .table-bordered * {border-color: red;}"
+    + ".mission-list-item-disabled .button		{color: red; border-color: red; background-color: #595959;}"
+    + ".mission-list-item-disabled .button:hover	{background-color: #4d4d4d;}"
+    + ".mission-list-item-disabled .button .caret	{border-bottom-color: red;}";
+
+  newCssRules += ".mission-list-item-submitted_and_published	{background-image: none; background-color: #0f1405; border-color: olivedrab;color: springgreen;}"
+    + ".list .mission .mission-title-submitted_and_published 	{color: springgreen;}"
+    + ".mission-list-item-submitted_and_published .table-bordered * {border-color: springgreen;}"
+    + ".mission-list-item-submitted_and_published .button		{color: springgreen; border-color: springgreen; background-color: #5c7a1f;}"
+    + ".mission-list-item-submitted_and_published .button:hover	{background-color: #4d6619;}"
+    + ".mission-list-item-submitted_and_published .button .caret	{border-bottom-color: springgreen;}";
+
+  newCssRules += ".dropup 									{position: relative;}"
+    + ".dropup .dropdown-menu						{top: initial; bottom: 30px; left: 0; right: 0; text-align: center;}"
+    + ".dropdown-menu > li > a 					{cursor: pointer;}"
+    + ".editor .view 								{width: initial;height: initial;text-align: center;margin: 0;}"
+    + ".editor .type-view, .editor .name-view  {width: 100%;}"
+    + ".pagination>li>a 							{background: #0b0c0d;border-color: #5afbea;color: #5afbea; font-size: 18px;}"
+    + ".pagination>li>a:hover 						{background: #2b2c2d;border-color: #5afbea;color: #5afbea;}"
+    + ".pagination>.active>a, .pagination>.active>a:hover {background-color: #5afbea;border-color: #5afbea;color: #0b0c0d;}"
+    + ".type-view .btn.focus, .type-view .btn:focus, .type-view .btn:hover {color: unset;}"
+    + ".type-view .btn.active.focus, .type-view .btn.active:focus, .type-view .btn.active:hover {color: #ebbc4a;}"
+    + ".type-view .bordered-panel p           {font-size: 20px;}"
+    + ".stopthat 									{color: red; font-weight: bold;}"
+    + "input.form-control, textarea.form-control {border: 1px solid #5afbea; background: none; border-radius: 0; color: white;}"
+    + ".upload-logo .input-row .upload-label {display: block;padding: 0 0 10px;}"
+    + ".upload-logo .input-row {display: block;}"
+    + ".upload-logo .input-row .upload-logo-cell, .upload-logo .input-row .clear-logo-button {display: inline-block;padding: 0; max-width: 50%;}"
+    + ".preview-mission .mission-header {margin: 0; width: 65%; float: left;)}"
+    + ".preview-mission .mission-stats, .preview-mission .mission-description {max-width: 35%;float: right; display: inline-block;}"
+    + "#previewMissionModel .loading-screen { top: 0; right: 0; position: relative; height: 40px;}"
+    + "#previewMissionModel .loading.spin { position: fixed; left: 50%; top: 80px; }"
+    + "</style>";
   $("head").append(newCssRules);
 
 });
@@ -217,13 +217,11 @@ function init() {
     //Replace breadcrumb with something a bit clearer
     $(".view").empty();
     var newBreadcrumb = "<ul class='pagination'>";
-
-    newBreadcrumb += "<li" + (editScope.IsViewActive(editScope.EditorScreenViews.TYPE) ? " class='active'" : "") + "><a role='button' ng-click='bulletSetView(EditorScreenViews.TYPE)'>Mission Type</a></li>";
-    newBreadcrumb += "<li" + (editScope.IsViewActive(editScope.EditorScreenViews.NAME) ? " class='active'" : "") + "><a role='button' ng-click='bulletSetView(EditorScreenViews.NAME)'>Mission Details</a></li>";
-    newBreadcrumb += "<li" + (editScope.IsViewActive(editScope.EditorScreenViews.WAYPOINTS) ? " class='active'" : "") + "><a role='button' ng-click='bulletSetView(EditorScreenViews.WAYPOINTS)'>Waypoints</a></li>";
-    newBreadcrumb += "<li" + (editScope.IsViewActive(editScope.EditorScreenViews.PREVIEW) ? " class='active'" : "") + "><a role='button' ng-click='bulletSetView(EditorScreenViews.PREVIEW)'>Preview</a></li>";
-
-    newBreadcrumb += "</ul>";
+      + "<li" + (editScope.IsViewActive(editScope.EditorScreenViews.TYPE) ? " class='active'" : "") + "><a role='button' ng-click='bulletSetView(EditorScreenViews.TYPE)'>Mission Type</a></li>"
+      + "<li" + (editScope.IsViewActive(editScope.EditorScreenViews.NAME) ? " class='active'" : "") + "><a role='button' ng-click='bulletSetView(EditorScreenViews.NAME)'>Mission Details</a></li>"
+      + "<li" + (editScope.IsViewActive(editScope.EditorScreenViews.WAYPOINTS) ? " class='active'" : "") + "><a role='button' ng-click='bulletSetView(EditorScreenViews.WAYPOINTS)'>Waypoints</a></li>"
+      + "<li" + (editScope.IsViewActive(editScope.EditorScreenViews.PREVIEW) ? " class='active'" : "") + "><a role='button' ng-click='bulletSetView(EditorScreenViews.PREVIEW)'>Preview</a></li>"
+      + "</ul>";
 
     var compiledBread = $compile(newBreadcrumb)(editScope);
     $(".view").append(compiledBread);
@@ -231,31 +229,28 @@ function init() {
     if (editStep == editScope.EditorScreenViews.TYPE) {
       //Overhauled UI on Mission Type page, including more editorialising on non-linear missions in banners
       $(".type-view .bordered-panel").empty().addClass('ready');
-      var editCode = "<div class='btn-group btn-group-justified'>";
-
-      editCode += "<div class='btn-group'><button class='btn btn-lg' ng-click='mission.definition._sequential = true; mission.definition._hidden = false' ng-class='{active: mission.definition._sequential && !mission.definition._hidden}'><i class='glyphicon glyphicon-arrow-right'></i>&nbsp;&nbsp;SEQUENTIAL</button></div>";
-      editCode += "<div class='btn-group'><button class='btn btn-lg' ng-click='mission.definition._sequential = true; mission.definition._hidden = true' ng-class='{active: mission.definition._sequential && mission.definition._hidden}'><i class='glyphicon glyphicon-eye-close'></i>&nbsp;&nbsp;HIDDEN SEQUENTIAL</button></div>";
-      editCode += "<div class='btn-group'><button class='btn btn-lg' ng-click='mission.definition._sequential = false; mission.definition._hidden = false' ng-class='{active: !mission.definition._sequential}'><i class='glyphicon glyphicon-random'></i>&nbsp;&nbsp;ANY ORDER</button></div>";
-
-      editCode += "</div><br />";
-
-      editCode += "<p ng-show='mission.definition._sequential && !mission.definition._hidden'>Agents visit portals and field trip markers in a set order.<br/><br/>Best suited to missions in a banner series, or one-offs with a pre-determined route.</p>"
-      editCode += "<p ng-show='mission.definition._sequential && mission.definition._hidden'>Agents visit portals and field trip markers in a set order, but the location of every waypoint beyond the first is hidden, meaning players rely on clues in the waypoint text.<br/><br/>Good for more puzzle-based missions, but please ensure you provide adequate clues for agents to find all the waypoints.</p>"
-      editCode += "<p ng-show='!mission.definition._sequential'>Agents visit portals and field trip markers in any order. Excellent for one-off missions where a specific route isn't required, but terrible for missions in banner serieses.<br /><br /><span class='stopthat'>It is strongly advised that if you are making missions for a banner, you set them as Sequential missions - your rating on IngressMosaik will thank you! </span></p>"
+      var editCode = "<div class='btn-group btn-group-justified'>"
+        + "<div class='btn-group'><button class='btn btn-lg' ng-click='mission.definition._sequential = true; mission.definition._hidden = false' ng-class='{active: mission.definition._sequential && !mission.definition._hidden}'><i class='glyphicon glyphicon-arrow-right'></i>&nbsp;&nbsp;SEQUENTIAL</button></div>"
+        + "<div class='btn-group'><button class='btn btn-lg' ng-click='mission.definition._sequential = true; mission.definition._hidden = true' ng-class='{active: mission.definition._sequential && mission.definition._hidden}'><i class='glyphicon glyphicon-eye-close'></i>&nbsp;&nbsp;HIDDEN SEQUENTIAL</button></div>"
+        + "<div class='btn-group'><button class='btn btn-lg' ng-click='mission.definition._sequential = false; mission.definition._hidden = false' ng-class='{active: !mission.definition._sequential}'><i class='glyphicon glyphicon-random'></i>&nbsp;&nbsp;ANY ORDER</button></div>"
+        + "</div><br />"
+        + "<p ng-show='mission.definition._sequential && !mission.definition._hidden'>Agents visit portals and field trip markers in a set order.<br/><br/>Best suited to missions in a banner series, or one-offs with a pre-determined route.</p>"
+        + "<p ng-show='mission.definition._sequential && mission.definition._hidden'>Agents visit portals and field trip markers in a set order, but the location of every waypoint beyond the first is hidden, meaning players rely on clues in the waypoint text.<br/><br/>Good for more puzzle-based missions, but please ensure you provide adequate clues for agents to find all the waypoints.</p>"
+        + "<p ng-show='!mission.definition._sequential'>Agents visit portals and field trip markers in any order. Excellent for one-off missions where a specific route isn't required, but terrible for missions in banner serieses.<br /><br /><span class='stopthat'>It is strongly advised that if you are making missions for a banner, you set them as Sequential missions - your rating on IngressMosaik will thank you! </span></p>";
       var compiledContent = $compile(editCode)(editScope);
       $(".type-view .bordered-panel").append(compiledContent);
     } else if (editStep == editScope.EditorScreenViews.NAME) {
       //Overhauled UI on Mission Name/Image pages
       $(".name-view .bordered-panel").empty().addClass('ready');
-      var editCode = "<div class='row'><div class='col-sm-8 form-horizontal'><div class='form-group'>";
-      editCode += "<label for='missionName' class='col-sm-2 control-label'>Mission Name</label>";
-      editCode += "<div class='col-sm-10'><input type='text' id='missionName' ng-model='mission.definition.name' class='form-control' placeholder='Add mission name' ng-class='{\"invalid\": !mission.definition.name}' maxlength='" + editScope.MissionRules.MAX_MISSION_NAME_LENGTH + "'>";
-      editCode += "</div></div><div class='form-group'>";
-      editCode += "<label for='missionDesc' class='col-sm-2 control-label'>Mission Description</label>";
-      editCode += "<div class='col-sm-10'><textarea id='missionDesc' class='form-control' rows='4' ng-model='mission.definition.description' placeholder='Add mission description' ng-class='{\"invalid\": !mission.definition.description}' maxlength='" + editScope.MissionRules.MAX_MISSION_DESCRIPTION_LENGTH + "'></textarea>";
-      editCode += "</div></div></div><div class='col-sm-4'";
-      editCode += "<div mission-logo-upload max-size='{{LogoParams.MAX_SIZE_BYTES}}' success='logoUploadSuccess' error='logoUploadFailure' pre-post='ensureMissionHasGuid' accept='image/*' type-restriction='image/(gif|jpeg|jpg|png)' mission='mission'></div>";
-      editCode += "</div></div>";
+      var editCode = "<div class='row'><div class='col-sm-8 form-horizontal'><div class='form-group'>"
+        + "<label for='missionName' class='col-sm-2 control-label'>Mission Name</label>"
+        + "<div class='col-sm-10'><input type='text' id='missionName' ng-model='mission.definition.name' class='form-control' placeholder='Add mission name' ng-class='{\"invalid\": !mission.definition.name}' maxlength='" + editScope.MissionRules.MAX_MISSION_NAME_LENGTH + "'>"
+        + "</div></div><div class='form-group'>"
+        + "<label for='missionDesc' class='col-sm-2 control-label'>Mission Description</label>"
+        + "<div class='col-sm-10'><textarea id='missionDesc' class='form-control' rows='4' ng-model='mission.definition.description' placeholder='Add mission description' ng-class='{\"invalid\": !mission.definition.description}' maxlength='" + editScope.MissionRules.MAX_MISSION_DESCRIPTION_LENGTH + "'></textarea>"
+        + "</div></div></div><div class='col-sm-4'"
+        + "<div mission-logo-upload max-size='{{LogoParams.MAX_SIZE_BYTES}}' success='logoUploadSuccess' error='logoUploadFailure' pre-post='ensureMissionHasGuid' accept='image/*' type-restriction='image/(gif|jpeg|jpg|png)' mission='mission'></div>"
+        + "</div></div>";
       var compiledContent = $compile(editCode)(editScope);
       $(".name-view .bordered-panel").append(compiledContent);
     }
@@ -379,8 +374,8 @@ function init() {
           distance += missionScope.distance(
             mission.definition.waypoints[i-1]._poi.location.latitude,
             mission.definition.waypoints[i-1]._poi.location.longitude,
-              mission.definition.waypoints[i]._poi.location.latitude,
-              mission.definition.waypoints[i]._poi.location.longitude,
+            mission.definition.waypoints[i]._poi.location.latitude,
+            mission.definition.waypoints[i]._poi.location.longitude,
             "K")
         }
 
@@ -674,19 +669,19 @@ function init() {
         //once all the categorisation is done, create the HTML for the categories!
         missionContent += "<div class='panel-group' id='accordion' role='tablist' aria-multiselectable='true' style='width: 100%'>";
         for (var i = 0; i < missionScope.categoryContent.length; i++) {
-          missionContent += "<div class='panel panel-default'><div class='panel-heading' role='tab'>";
-          missionContent += "<h4 class='panel-title' ng-class='{\"collapsed\" : categoryContent[" + i + "].collapse}'><a ng-click='categoryContent[" + i + "].collapse = !categoryContent[" + i + "].collapse' role='button' data-toggle='collapse'>";
-          missionContent += missionScope.categoryContent[i].name;
-          missionContent += "</a></h4></div><div class='panel-collapse collapse' ng-class='{\"in\" : !categoryContent[" + i + "].collapse}' role='tabpanel'><div class='panel-body'>";
-          missionContent += "<div class='row'><div class='col-xs-12'>";
-          missionContent += generateSort(i);
-          missionContent += "<button class='btn btn-default'style='float: right!important;margin: 5px 0;' ng-click='deleteCategory(" + i + ")'>Delete Category</button>";
+          missionContent += "<div class='panel panel-default'><div class='panel-heading' role='tab'>"
+            + "<h4 class='panel-title' ng-class='{\"collapsed\" : categoryContent[" + i + "].collapse}'><a ng-click='categoryContent[" + i + "].collapse = !categoryContent[" + i + "].collapse' role='button' data-toggle='collapse'>"
+            + missionScope.categoryContent[i].name
+            + "</a></h4></div><div class='panel-collapse collapse' ng-class='{\"in\" : !categoryContent[" + i + "].collapse}' role='tabpanel'><div class='panel-body'>"
+            + "<div class='row'><div class='col-xs-12'>"
+            + generateSort(i)
+            + "<button class='btn btn-default'style='float: right!important;margin: 5px 0;' ng-click='deleteCategory(" + i + ")'>Delete Category</button>";
           if (!missionScope.categoryContent[i].missions || missionScope.categoryContent[i].missions.length == 0) {
             //no missions so far!
             missionContent += "</div><div class='col-xs-12'>No missions added to the category yet</div>";
           } else {
-            missionContent += "<button class='btn btn-default'style='float: right!important;margin: 5px;' data-toggle='modal' data-target='#previewBanner" + i + "'>Preview Images</button>";
-            missionContent += "<button class='btn btn-default'style='float: right!important;margin: 5px;' ng-click='previewBanner(" + i + ")' data-toggle='modal' data-target='#previewMissionModel'>Preview Route</button></div>";
+            missionContent += "<button class='btn btn-default'style='float: right!important;margin: 5px;' data-toggle='modal' data-target='#previewBanner" + i + "'>Preview Images</button>"
+              + "<button class='btn btn-default'style='float: right!important;margin: 5px;' ng-click='previewBanner(" + i + ")' data-toggle='modal' data-target='#previewMissionModel'>Preview Route</button></div>";
             var bannerModal = "<div class='modal fade' id='previewBanner" + i + "' tabindex='-1' role='dialog'><div class='modal-dialog modal-lg' role='document'><div class='modal-content banner-preview'><div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button><h4 class='modal-title'>Preview \"" + missionScope.categoryContent[i].collapse + "\"</h4></div><div class='modal-body'><div class='row'>";
             for (var j = 0; j < missionScope.categoryContent[i].missions.length; j++) {
               var mission = missionScope.categorisedMissions[i][j];
@@ -699,38 +694,37 @@ function init() {
           missionContent += "</div></div></div></div>";
         }
         //add unsorted missions if there are any
-        missionContent += "<div class='panel panel-default'><div class='panel-heading' role='tab' id='header-unsorted'>";
-        missionContent += "<h4 class='panel-title' ng-class='{\"collapsed\" : unsortedCollapse}'><a ng-click='unsortedCollapse = !unsortedCollapse' role='button' data-toggle='collapse'>Unsorted Missions</a></h4></div><div class='panel-collapse collapse' ng-class='{\"in\" : !unsortedCollapse}' role='tabpanel'><div class='panel-body'>";
-        missionContent += "<div class='row'><div class='col-xs-12'>";
-        missionContent += generateSort('unsorted');
-        missionContent += "</div>";
+        missionContent += "<div class='panel panel-default'><div class='panel-heading' role='tab' id='header-unsorted'>"
+          + "<h4 class='panel-title' ng-class='{\"collapsed\" : unsortedCollapse}'><a ng-click='unsortedCollapse = !unsortedCollapse' role='button' data-toggle='collapse'>Unsorted Missions</a></h4></div><div class='panel-collapse collapse' ng-class='{\"in\" : !unsortedCollapse}' role='tabpanel'><div class='panel-body'>"
+          + "<div class='row'><div class='col-xs-12'>"
+          + generateSort('unsorted')
+          + "</div>";
         for (var i = 0; i < missionScope.uncategorisedMissions.length; i++) {
           missionContent += generateMission(missionScope.uncategorisedMissions[i], missionScope.uncategorisedMissions[i].position, false);
         }
         missionContent += "</div></div></div></div></div>";
       } else {
         //if no user-defined categories, just loop through the missions
-        missionContent += "<div class='col-xs-12'>";
-        missionContent += generateSort('all');
-        missionContent += "</div>";
+        missionContent += "<div class='col-xs-12'>"
+          + generateSort('all')
+          + "</div>";
         for (var i = 0; i < missionScope.missions.length; i++) {
           var mission = missionScope.missions[i];
           missionContent += generateMission(mission, i, false);
         }
       }
       //modal for adding missions to categories
-      missionContent += "<div class='modal fade' id='addCateModel' tabindex='-1' role='dialog'><div class='modal-dialog' role='document'><div class='modal-content'><div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button><h4 class='modal-title'>{{missionTitle}}</h4></div><div class='modal-body'>";
-      missionContent += "<select class='form-control' ng-model='selectedCategoryID' ng-change='addToCategory()' >";
+      missionContent += "<div class='modal fade' id='addCateModel' tabindex='-1' role='dialog'><div class='modal-dialog' role='document'><div class='modal-content'><div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button><h4 class='modal-title'>{{missionTitle}}</h4></div><div class='modal-body'>"
+        + "<select class='form-control' ng-model='selectedCategoryID' ng-change='addToCategory()' >";
       for (var i = 0; i < missionScope.categoryContent.length; i++) {
         missionContent += "<option value='" + i + "' data-dismiss='modal'>" + missionScope.categoryContent[i].name + "</option>";
       }
-      missionContent += "</select>";
-      missionContent += "</div></div></div></div>";
+      missionContent += "</select></div></div></div></div>";
 
       //modal for previewing missions
-      missionContent += "<div class='modal fade' id='previewMissionModel' tabindex='-1' role='dialog'><div class='modal-dialog modal-lg' role='document'><div class='modal-content'><div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button><h4 class='modal-title'>Preview Mission</h4></div><div class='modal-body' style='background:#151515'>";
-      missionContent += "<div class='loading-screen' ng-show='loadingPreview'><div class='loading spin'></div></div><div class='notloading'></div>";
-      missionContent += "</div></div></div></div>";
+      missionContent += "<div class='modal fade' id='previewMissionModel' tabindex='-1' role='dialog'><div class='modal-dialog modal-lg' role='document'><div class='modal-content'><div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button><h4 class='modal-title'>Preview Mission</h4></div><div class='modal-body' style='background:#151515'>"
+        + "<div class='loading-screen' ng-show='loadingPreview'><div class='loading spin'></div></div><div class='notloading'></div>"
+        + "</div></div></div></div>";
 
       // Pass our fragment content to $compile, and call the function that $compile returns with the scope.
       var compiledContent = $compile(missionContent)(missionScope);
@@ -764,9 +758,9 @@ function init() {
     var buttonContent = "<div class='bordered-panel'>";
 
     //button for adding categories
-    buttonContent += "<button ng-click='createCategory()' class='yellow create-mission-button'>Create New Category</button>";
-    buttonContent += "<button ng-click='exportData()' class='yellow create-mission-button'>Export Category Data</button>";
-    buttonContent += "<button ng-click='importData()' class='yellow create-mission-button'>Import Category Data</button>";
+    buttonContent += "<button ng-click='createCategory()' class='yellow create-mission-button'>Create New Category</button>"
+      + "<button ng-click='exportData()' class='yellow create-mission-button'>Export Category Data</button>"
+      + "<button ng-click='importData()' class='yellow create-mission-button'>Import Category Data</button>";
     //buttonContent += "<button ng-click='nukeCategories()' class='yellow create-mission-button'>NUKE EVERYTHING</button>";
 
     //tally up available missions, and missions in draft states

From 0c0ded669a950c04e0a1828774824bcf9fb30666 Mon Sep 17 00:00:00 2001
From: andyjennings314 <andyjennings314@gmail.com>
Date: Mon, 15 Jul 2019 21:12:13 +0100
Subject: [PATCH 4/5] Updated branch number

---
 IMATTC.user.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/IMATTC.user.js b/IMATTC.user.js
index 7ff37f5..4739a50 100644
--- a/IMATTC.user.js
+++ b/IMATTC.user.js
@@ -1,6 +1,6 @@
 // ==UserScript==
 // @name         IMATTC
-// @version      1.5.0
+// @version      1.5.1
 // @description  A usability overhaul for the Ingress Mission Authoring Tool
 // @author       @Chyld314
 // @match        https://mission-author-dot-betaspike.appspot.com/

From 16408a8088395a4c31be7aaa2d43fb0697677294 Mon Sep 17 00:00:00 2001
From: andyjennings314 <andyjennings314@gmail.com>
Date: Mon, 15 Jul 2019 22:16:57 +0100
Subject: [PATCH 5/5] Proper tracking of collapse toggle

---
 IMATTC.user.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/IMATTC.user.js b/IMATTC.user.js
index 7ff37f5..b1c51f2 100644
--- a/IMATTC.user.js
+++ b/IMATTC.user.js
@@ -303,7 +303,7 @@ function init() {
     missionScope.uncategorisedSort = 'initial';
     missionScope.missions = w.$filter("orderBy")(missionScope.missions, 'definition.name');
     missionScope.loadingPreview = false;
-    missionScope.unsortedCollapse = w.localStorage.getItem('unsortedCollapse') || true;
+    missionScope.unsortedCollapse = {collapse: w.localStorage.getItem('unsortedCollapse') || true};
 
     //handling for legacy data format
     if (!!w.localStorage.getItem('categoryNames')){
@@ -495,6 +495,7 @@ function init() {
       generateAllMissions();
     }
   }
+
   missionScope.nukeCategories = function() {
     missionScope.categoryContent = [];
     w.localStorage.setItem('allCategories', []);
@@ -524,6 +525,12 @@ function init() {
     generateAllMissions();
   }
 
+  missionScope.toggleCollapse = function(collapse, unsorted){
+    collapse.collapse = !collapse.collapse;
+    unsorted ? w.localStorage.setItem('unsortedCollapse', collapse.collapse)
+      : w.localStorage.setItem('allCategories', JSON.stringify(missionScope.categoryContent));
+  }
+
   var generateSort = function (category){
     var criteria = [
       {name: "Initial", value: "initial"},
@@ -670,7 +677,7 @@ function init() {
         missionContent += "<div class='panel-group' id='accordion' role='tablist' aria-multiselectable='true' style='width: 100%'>";
         for (var i = 0; i < missionScope.categoryContent.length; i++) {
           missionContent += "<div class='panel panel-default'><div class='panel-heading' role='tab'>"
-            + "<h4 class='panel-title' ng-class='{\"collapsed\" : categoryContent[" + i + "].collapse}'><a ng-click='categoryContent[" + i + "].collapse = !categoryContent[" + i + "].collapse' role='button' data-toggle='collapse'>"
+            + "<h4 class='panel-title' ng-class='{\"collapsed\" : categoryContent[" + i + "].collapse}'><a ng-click='toggleCollapse(categoryContent[" + i + "], false)' role='button' data-toggle='collapse'>"
             + missionScope.categoryContent[i].name
             + "</a></h4></div><div class='panel-collapse collapse' ng-class='{\"in\" : !categoryContent[" + i + "].collapse}' role='tabpanel'><div class='panel-body'>"
             + "<div class='row'><div class='col-xs-12'>"
@@ -695,7 +702,7 @@ function init() {
         }
         //add unsorted missions if there are any
         missionContent += "<div class='panel panel-default'><div class='panel-heading' role='tab' id='header-unsorted'>"
-          + "<h4 class='panel-title' ng-class='{\"collapsed\" : unsortedCollapse}'><a ng-click='unsortedCollapse = !unsortedCollapse' role='button' data-toggle='collapse'>Unsorted Missions</a></h4></div><div class='panel-collapse collapse' ng-class='{\"in\" : !unsortedCollapse}' role='tabpanel'><div class='panel-body'>"
+          + "<h4 class='panel-title' ng-class='{\"collapsed\" : unsortedCollapse.collapse}'><a ng-click='toggleCollapse(unsortedCollapse, true)' role='button' data-toggle='collapse'>Unsorted Missions</a></h4></div><div class='panel-collapse collapse' ng-class='{\"in\" : !unsortedCollapse.collapse}' role='tabpanel'><div class='panel-body'>"
           + "<div class='row'><div class='col-xs-12'>"
           + generateSort('unsorted')
           + "</div>";