From 2fe281527da73226ed2fce98e0070663b3ad7945 Mon Sep 17 00:00:00 2001
From: John Janus <j.janus@lighthouse-it.de>
Date: Wed, 17 Apr 2019 18:39:33 +0200
Subject: [PATCH] add horse details and show them in footer

---
 core/static/core/dynamic_card_load.js      | 32 +++++++++++++---------
 core/templates/core/horse_detail.html      | 11 ++++++++
 core/templates/core/stablepart_detail.html |  2 +-
 core/urls.py                               |  4 ++-
 core/views.py                              |  6 +++-
 static/base.css                            | 17 +++++++++++-
 templates/base.html                        |  4 +--
 7 files changed, 57 insertions(+), 19 deletions(-)
 create mode 100644 core/templates/core/horse_detail.html

diff --git a/core/static/core/dynamic_card_load.js b/core/static/core/dynamic_card_load.js
index 96f43c6..2be726c 100644
--- a/core/static/core/dynamic_card_load.js
+++ b/core/static/core/dynamic_card_load.js
@@ -1,21 +1,27 @@
-// var cards;
-var idToUse;
+var bayIdToUse;
+var horseIdToUse;
 
-function generateCards() {
-    // console.log(this.response);
-    // cards += this.response;
-    document.getElementById(idToUse).innerHTML = this.response;
-    // console.log(cards);
+function generateBayCards() {
+    document.getElementById(bayIdToUse).innerHTML = this.response;
 }
 
-function getBayCards(id, stablepartId) {
-    // console.log(bayIds);
-    // cards = '';
-    idToUse = id;
+function getBayCards(docIdForData, stablepartId) {
+    bayIdToUse = docIdForData;
     const xhr = new XMLHttpRequest();
-    // console.log('loading bay', bay);
     xhr.open('GET', '/stablepart/'.concat(stablepartId));
-    xhr.addEventListener('load', generateCards);
+    xhr.addEventListener('load', generateBayCards);
     xhr.send();
 
 }
+
+function getHorseDetails(docIdForData, horseId) {
+    horseIdToUse = docIdForData;
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', '/horse/'.concat(horseId));
+    xhr.addEventListener('load', generateHorseDetail);
+    xhr.send();
+}
+
+function generateHorseDetail() {
+    document.getElementById(horseIdToUse).innerHTML = this.response;
+}
diff --git a/core/templates/core/horse_detail.html b/core/templates/core/horse_detail.html
new file mode 100644
index 0000000..c5df73d
--- /dev/null
+++ b/core/templates/core/horse_detail.html
@@ -0,0 +1,11 @@
+<div class="card">
+<h3>{{ object.name }}</h3>
+<div class="flexrow">
+{% for fodder in object.hasfodderplan_set.all %}
+  <div class="card">
+  <h4>{{ fodder.valid_since }} - {{ fodder.valid_until }}</h4>
+  <div>{{ fodder.fodderplan.fodder }}</div>
+  </div>
+{% endfor %}
+</div>
+</div>
diff --git a/core/templates/core/stablepart_detail.html b/core/templates/core/stablepart_detail.html
index 4826a73..a5bb9cb 100644
--- a/core/templates/core/stablepart_detail.html
+++ b/core/templates/core/stablepart_detail.html
@@ -5,7 +5,7 @@
   <h3>{{ bay }} </h3>
   <div>
     {% for inbay in bay.isinbay_set.all %}
-      <div class="card"><h4><button class="text">{{ inbay.horse }}</button></h4>
+      <div class="card"><h4><button class="text" onclick="getHorseDetails('footer', {{inbay.horse.pk}})">{{ inbay.horse }}</button></h4>
         <div>{{ inbay.valid_since }} bis {{ inbay.valid_until }}</div>
       </div>
     {% endfor %}
diff --git a/core/urls.py b/core/urls.py
index 988e327..32376f4 100644
--- a/core/urls.py
+++ b/core/urls.py
@@ -5,6 +5,8 @@ from . import views
 app_name = 'core'
 urlpatterns = [
     path('stableparts', views.StableParts.as_view(), name='StableParts'),
-    path('stablepart/<int:pk>', views.StablePartDetail.as_view(), name='StablePartDetail'),
+    path('stablepart/<int:pk>', views.StablePartDetail.as_view(),
+         name='StablePartDetail'),
     path('bay/<int:pk>', views.BayDetail.as_view(), name='BayDetail'),
+    path('horse/<int:pk>', views.HorseDetail.as_view(), name='HorseDetail'),
 ]
diff --git a/core/views.py b/core/views.py
index 9a747f5..e123b22 100644
--- a/core/views.py
+++ b/core/views.py
@@ -1,6 +1,6 @@
 from django.shortcuts import render
 from django.views.generic import ListView, DetailView
-from core.models import StablePart, Bay
+from core.models import StablePart, Bay, Horse
 
 # Create your views here.
 
@@ -15,3 +15,7 @@ class StablePartDetail(DetailView):
 
 class BayDetail(DetailView):
     model = Bay
+
+
+class HorseDetail(DetailView):
+    model = Horse
diff --git a/static/base.css b/static/base.css
index 9405e2c..0343a42 100644
--- a/static/base.css
+++ b/static/base.css
@@ -38,6 +38,7 @@ div#header > div#headertitle {
 
 div#nav {
     grid-area: nav;
+    border-right: 2px solid rebeccapurple;
     /* border: 1px solid red; */
 }
 
@@ -49,7 +50,21 @@ div#main {
 
 div#footer {
     grid-area: footer;
-    border-top: 2px solid darkgrey;
+    border-top: 2px solid rebeccapurple;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+div.flexrow {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+div.flexrow > div.card {
+    width: 15em;
+    overflow-y: auto;
 }
 
 div.card {
diff --git a/templates/base.html b/templates/base.html
index 0bce048..e7527d4 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -10,8 +10,8 @@
   </head>
   <body>
     <div id="header">{% block header %}<div id="headertitle">Stable Management</div>{% endblock %}</div>
-    <div id="nav">{% block nav %}nav{% endblock %}</div>
+    <div id="nav">{% block nav %}{% endblock %}</div>
     <div id="main">{% block main %}{% endblock %}</div>
-    <div id="footer">{%block footer %}footer{% endblock %}</div>
+    <div id="footer">{% block footer %}{% endblock %}</div>
   </body>
 </html>
-- 
2.47.0