Järjestyksen muuttaminen toimii ja nuolet myös

V2/page/code.js

@@ -4,11 +4,11 @@ function init() {
     loadJumps()
 }
 
-async function loadJumps() {
+async function loadJumps(order = 'desc') {
     let response = await fetch('http://localhost:3000/jumps')
     let jumps = await response.json()
     console.log(jumps)
-    showJumps(jumps)
+    showJumps(jumps, order)
 }
 
 function createJumpListItem(jump) {    
@@ -42,12 +42,15 @@ function createJumpListItem(jump) {
 
     // Shows and hides rest of the jump info
     li.onclick = function() {
+        let arrow = document.getElementById(jump._id).getElementsByClassName('headerMore')[0]
         let clickedItem = document.getElementById(jump._id).getElementsByClassName('fullJumpInfo')[0]
         if (clickedItem.style.display != 'none') {
             clickedItem.style.display = 'none'
+            arrow.innerHTML = '▼'
         }
         else {
             clickedItem.style.display = 'list-item'
+            arrow.innerHTML = '▲'
         }
     }
     return li
@@ -87,14 +90,18 @@ function createDeleteButton(jump) {
     return deleteDiv
 }
 
-function showJumps(jumps) {
+function showJumps(jumps, order) {
     let jumpsList = document.getElementById('jumpsList')
     let infoText = document.getElementById('infoText')
     // no jumps
     if (jumps.length === 0) {
         infoText.innerHTML = 'Ei hyppyjä'
     } else {
-        jumps.sort((a, b) => b.number - a.number) // vaiha ab järjsetys jos haluu käänteiseks
+        if (order == 'desc') {
+            jumps.sort((a, b) => b.number - a.number)
+        } else {
+            jumps.sort((a, b) => a.number - b.number)
+        }
         jumps.forEach(jump => {
             let li = createJumpListItem(jump)        
             jumpsList.appendChild(li)
@@ -104,12 +111,14 @@ function showJumps(jumps) {
 }
 
 function changeJumpOrder() {
+    document.getElementById('jumpsList').innerHTML = ''
     let button = document.getElementById('sortJumpsButton')
     if (button.innerHTML == 'Järjestys ▼') {
         button.innerHTML = 'Järjestys ▲'
+        loadJumps('asc')
     } else {
         button.innerHTML = 'Järjestys ▼'
-        // Järjestys muuttumaan
+        loadJumps('desc')
     }
 }
 

V2/page/styles.css

@@ -36,7 +36,7 @@ li {
 .jumpItem {
     border: 1px black solid;
     border-radius: 5px;
-    padding: 16px 10px;
+    padding: 16px 20px;
     margin: 20px 0;
 }