Image Replacements can now be sorted

server/was.rb

@@ -257,17 +257,19 @@ class SaveReplacement < Riddl::Implementation
     #Delete all, afterwards insert
     $db.execute("DELETE FROM replacements WHERE  station = ? AND patternID = ?", [@r[0], @r[1]])
     
+    order = 0;
+    
     doc = Nokogiri::XML(@p[0].value)
     doc.xpath(".//item").each do |node|
-      
-      $db.execute("INSERT INTO replacements (station, patternID, abbreviation, url) VALUES (?,?,?,?)", [@r[0], @r[1], node.xpath(".//abbreviation").text, node.xpath(".//url").text])
+      $db.execute("INSERT INTO replacements (station, patternID, abbreviation, url, ordering) VALUES (?,?,?,?,?)", [@r[0], @r[1], node.xpath(".//abbreviation").text, node.xpath(".//url").text, order])
+      order += 1
     end
   end
 end
 
 class GetReplacement < Riddl::Implementation
   def response
-    result = $db.execute "SELECT * FROM replacements WHERE station = #{@r[0]} and patternID = #{@r[1]}"
+    result = $db.execute "SELECT * FROM replacements WHERE station = #{@r[0]} and patternID = #{@r[1]} ORDER BY ordering ASC"
     
     builder = Nokogiri::XML::Builder.new do |xml|
       xml.replacement(){
@@ -996,7 +998,8 @@ def createDB(opts)
   
   $db.execute "CREATE TABLE IF NOT EXISTS error(station INT, patternID INT, error TEXT, FOREIGN KEY(station, patternID) REFERENCES station(station, patternID) ON DELETE CASCADE)"
   
-  $db.execute "CREATE TABLE IF NOT EXISTS replacements(station INT, patternID INT, abbreviation TEXT, url TEXT, FOREIGN KEY(station, patternID) REFERENCES station(station, patternID) ON DELETE CASCADE)"
+  
+  $db.execute "CREATE TABLE IF NOT EXISTS replacements(station INT, patternID INT, abbreviation TEXT, url TEXT, ordering INT, FOREIGN KEY(station, patternID) REFERENCES station(station, patternID) ON DELETE CASCADE)"
   
   $db.execute "CREATE TABLE IF NOT EXISTS image(station INT, patternID INT, imageID INT, language CHARACTER(20), label TEXT, FOREIGN KEY(station, patternID) REFERENCES station(station, patternID) ON DELETE CASCADE,PRIMARY KEY(station,patternID,imageID,language))"
   

ui/css/design.css

@@ -93,8 +93,16 @@ td {
 	font-style: normal;
 	font-size:2em;
 	width: 1em;
-    height: 100px;
+  height: 100px;
 }
+
+.handle2{
+	cursor: grab;
+	font-style: normal;
+	font-size:2em;
+	width: 1em;
+}
+
 #error, #replacements {
 	background-color: #efefef;
 	padding-bottom: 1em;

ui/index.html

@@ -234,8 +234,18 @@
                 <span class="removeImage">[<a  href='#' onclick="removeReplacement($(this))">⨯</a>]</span>
               </div>
               <div class="wasRight">
-                <input type="text" class="abbreviationInput width100 url" data-class='url' name="abbreviationInput">
-                <a href="#" onclick="overlayOn($(this));">🔍</a>
+              
+              
+                  <table style="width:100%">
+                    <tr>
+                      <td class="handle2">⇅</td>
+                      <td class="search"><a href="#" onclick="overlayOn($(this));">🔍</a></td>
+                      <td class="abbrtext"><input type="text" class="abbreviationInput width100 url" data-class='url' name="abbreviationInput"></td>
+                    </tr>
+                  </table>
+              
+                
+                
               </div>
             </div>
           </template>

ui/js/design.js

@@ -474,6 +474,11 @@ function getImages(stationID, patternID){ //Get From DB 2 HTML
 	  handle: '.handle',
 	  animation: 150
   });
+  
+  new Sortable(document.getElementById('replaceImages'),{
+	  handle: '.handle2',
+	  animation: 150
+  });
 }
 
 function addExternalImage(stationID, patternID){
@@ -538,16 +543,12 @@ function removeError(value) { //HTML
   value.parent().parent().parent().remove();
 }
 
-
-
-
 function addBlankReplacement() { //HTML
   //Will be added from DB on save
   var clone = document.importNode(document.querySelector('#imageReplacements').content,true);
   $('#replaceImages').append(clone);
 }
 
-
 function getReplaceImages(stationID, patternID){ //Get From DB 2 HTML
   $('#replacements').css("display", "block");
   $('#replaceImages').text("");