add horse details and show them in footer

diff --git a/core/static/core/dynamic_card_load.js b/core/static/core/dynamic_card_load.js
index 96f43c6342ae0c0033cd9e0b536b4573be5dbc77..2be726cffd852644385d8a74127f0012920c5c5f 100644 (file)
--- 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 (file)
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 4826a734097e3c487c8f00bc9ffe5c2bce018327..a5bb9cb80aeea5649175a9ce7ded7c5bdd456c91 100644 (file)
--- 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 988e327dd5fe20ef86bb1190f5515e069546d5af..32376f47ebb7896667c5393598385148ec4d17f7 100644 (file)
--- 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 9a747f5eec658a4c14d80a6562284fddc28bd7c2..e123b22ce543b9b8c48d4dd1c4e8cb324e3f5db3 100644 (file)
--- 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 9405e2cb8c54c3681695f82f469b838b137f1122..0343a42b48a1971926126aa1e58712e4ea27ead2 100644 (file)
--- 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 0bce0485b0821b028ca70d1946e75dba75eb3445..e7527d4d81057a405e8cbf4f37b571c2a91f68ba 100644 (file)
--- 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>