lista otsakkeiden kasaamista

V2/index.js

@@ -23,7 +23,9 @@ db.once('open', function() {
 // scheema
 const jumpSchema = new mongoose.Schema({
     number: { type: String, required: true },
-    date: { type: String, required: true }
+    date: { type: String, required: true },
+    height: { type: String, required: true },
+    falltime: { type: String, required: true }
 })
   
 // model
@@ -31,11 +33,13 @@ const Jump = mongoose.model('Jump', jumpSchema, 'jumps')
   
 app.post('/jumps', async (request, response) => {
     console.log(request.body)
-    const { number, date } = request.body
-    console.log(number, date)
+    const { number, date, height, falltime } = request.body
+    console.log(number, date, height, falltime)
     const jump = new Jump({
         number: number,
-        date: date
+        date: date,
+        height: height,
+        falltime: falltime
     })
     const savedJump = await jump.save()
     response.json(savedJump)  

V2/page/code.js

@@ -13,27 +13,33 @@ async function loadJumps() {
 
 function createJumpListItem(jump) {    
     let li = document.createElement('li')
-    let ul = document.createElement('ul')
-    let li_attr = document.createAttribute('id')
-    li_attr.value = jump._id
-    li.setAttributeNode(li_attr)
-    let jumpNumber = document.createTextNode("#" + jump.number)
-    li.appendChild(jumpNumber)
-    document.getElementById(jump._id).appendChild(ul)
+    let li_attr_id = document.createAttribute('id')
+    let li_attr_class = document.createAttribute('class')
+    li_attr_class.value = 'jumpItem'
+    li.setAttributeNode(li_attr_class)
+    li_attr_id.value = jump._id
+    li.setAttributeNode(li_attr_id)
 
-    return li
-}
-
-function addJumpInfo(jump) {
-    let ul = document.createElement('ul')
-    let li = document.createElement('li')
-    ul.appendChild(li)
+    let spanDate = document.createElement('span')
+    let spanClassDate = document.createAttribute('class')
+    spanClassDate.value = 'headerJumpDate'
+    spanDate.setAttributeNode(spanClassDate)
     let jumpDate = document.createTextNode(jump.date)
-    console.log(jump.date)
-    li.appendChild(jumpDate)
-    return ul
-}
+    spanDate.appendChild(jumpDate)
+    let jumpHeader = document.createTextNode('#' + jump.number)
+    li.appendChild(jumpHeader)
+    li.appendChild(spanDate)
 
+    let spanMore = document.createElement('span')
+    let spanClassMore = document.createAttribute('class')
+    spanClassMore.value = 'headerMore'
+    spanMore.setAttributeNode(spanClassMore)
+    let moreButton = document.createTextNode('▼')
+    spanMore.appendChild(moreButton)
+    li.appendChild(spanMore)
+    
+    return li
+}
 
 // function createJumpListItem(jump) {    // Tähän sisennys hommat
 //     let li = document.createElement('li')
@@ -71,7 +77,7 @@ function showJumps(jumps) {
     if (jumps.length === 0) {
         infoText.innerHTML = 'Ei hyppyjä'
     } else {    
-        jumps.forEach(jump => {
+        jumps.slice().reverse().forEach(jump => {
             let li = createJumpListItem(jump)        
             jumpsList.appendChild(li)
         })
@@ -82,9 +88,13 @@ function showJumps(jumps) {
 async function addJump() {
     let newJumpNumber = document.getElementById('newJumpNumber')
     let newJumpDate = document.getElementById('newJumpDate')
+    let newJumpHeight = document.getElementById('newJumpHeight')
+    let newJumpFalltime = document.getElementById('newJumpFalltime')
     const data = { 
         'number': newJumpNumber.value,
-        'date': newJumpDate.value
+        'date': newJumpDate.value,
+        'height': newJumpHeight.value,
+        'falltime':newJumpFalltime.value
     }
     const response = await fetch('http://localhost:3000/jumps', {
         method: 'POST',
@@ -102,6 +112,8 @@ async function addJump() {
     infoText.innerHTML = ''
     newJumpNumber.value = ''
     newJumpDate.value = ''
+    newJumpHeight.value = ''
+    newJumpFalltime.value = ''
 }
 
 function editJump(id){

V2/page/index.html

@@ -11,6 +11,8 @@
     <h1>Hypyt</h1>
     <input type="text" placeholder="Hyppy nro." id="newJumpNumber"/>
     <input type="text" placeholder="Päivä" id="newJumpDate"/>
+    <input type="text" placeholder="Korkeus" id="newJumpHeight"/>
+    <input type="text" placeholder="Vapaa" id="newJumpFalltime"/>
     <button onclick="addJump()" id="addJumpBtn">Lisää</button>
     <ul id="jumpsList"></ul>
     <p id="infoText"></p>

V2/page/styles.css

@@ -29,6 +29,21 @@ li {
     padding: 10px 0;
 }
 
+.jumpItem {
+    border: 1px black solid;
+    border-radius: 5px;
+    padding: 16px 10px;
+    margin: 20px 0;
+}
+
+.headerJumpDate {
+    padding-left: 20px;
+}
+
+.headerMore {
+    float: right;
+}
+
 input[type=text] {
     border: 1px solid #ccc;
     padding: 5px;