photo upload bei runs geht jetzt (beim ergebnis eintragen)

web/css/dogstats.css

@@ -54,6 +54,13 @@ main>.container {
   opacity: 1;
 }
 
+/* Dropzone overrides */
+.dropzone {
+  min-height: 150px;
+  border: 2px solid rgba(0,0,0,.3);
+  padding: 20px 20px;
+}
+
 /* XDEBUG */
 .xdebug-error th
 {

web/css/dropzone.min.css

@@ -0,0 +1 @@
+@-webkit-keyframes passing-through{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%,70%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}100%{opacity:0;-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);-o-transform:translateY(-40px);transform:translateY(-40px)}}@-moz-keyframes passing-through{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%,70%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}100%{opacity:0;-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);-o-transform:translateY(-40px);transform:translateY(-40px)}}@keyframes passing-through{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%,70%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}100%{opacity:0;-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);-o-transform:translateY(-40px);transform:translateY(-40px)}}@-webkit-keyframes slide-in{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}}@-moz-keyframes slide-in{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}}@keyframes slide-in{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}20%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@-moz-keyframes pulse{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}20%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}20%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}.dropzone,.dropzone *{box-sizing:border-box}.dropzone{min-height:150px;border:2px solid rgba(0,0,0,.3);background:#fff;padding:20px 20px}.dropzone.dz-clickable{cursor:pointer}.dropzone.dz-clickable *{cursor:default}.dropzone.dz-clickable .dz-message,.dropzone.dz-clickable .dz-message *{cursor:pointer}.dropzone.dz-started .dz-message{display:none}.dropzone.dz-drag-hover{border-style:solid}.dropzone.dz-drag-hover .dz-message{opacity:.5}.dropzone .dz-message{text-align:center;margin:2em 0}.dropzone .dz-message .dz-button{background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit}.dropzone .dz-preview{position:relative;display:inline-block;vertical-align:top;margin:16px;min-height:100px}.dropzone .dz-preview:hover{z-index:1000}.dropzone .dz-preview:hover .dz-details{opacity:1}.dropzone .dz-preview.dz-file-preview .dz-image{border-radius:20px;background:#999;background:linear-gradient(to bottom, #eee, #ddd)}.dropzone .dz-preview.dz-file-preview .dz-details{opacity:1}.dropzone .dz-preview.dz-image-preview{background:#fff}.dropzone .dz-preview.dz-image-preview .dz-details{-webkit-transLine truncated

web/inc/helpers.php

@@ -243,6 +243,68 @@ function pictshareUploadImage($path,$hash=false)
     return $json;
 }
 
+// takes $_FILES['file'] as input and validates, throws error if fails, else returns URL of the image
+function pictShareFormValidateAndUpload($file,$key=false)
+{
+    if($key===false)
+    {
+        $photo_name = $file['name'];
+        $photo_tmp_name = $file['tmp_name'];
+        $photo_size = $file['size'];
+        $photo_error = $file['error'];
+        $photo_type = $file['type'];
+    }
+    else
+    {
+        $photo_name = $file['name'][$key];
+        $photo_tmp_name = $file['tmp_name'][$key];
+        $photo_size = $file['size'][$key];
+        $photo_error = $file['error'][$key];
+        $photo_type = $file['type'][$key];
+    }
+
+    $allowed = ['jpg','jpeg','png','gif'];
+    $photo_ext = strtolower(end(explode('.', $photo_name)));
+
+    if(in_array($photo_ext, $allowed))
+    {
+        if($photo_error === 0)
+        {
+            if($photo_size < 10000000)
+            {
+                $answer = pictshareUploadImage($photo_tmp_name);
+                if($answer['status']=='ok' && in_array($answer['filetype'],['jpeg','png','gif']))
+                    return $answer['url'];
+                else
+                    throw new Exception('Fehler beim CDN Upload: '.json_encode($answer,true));
+            }
+            else
+                throw new Exception('Die Datei ist zu groß. Bitte eine kleinere Datei hochladen');
+        }
+        else
+            throw new Exception('Fehler beim Upload: '.getFileUploadError($photo_error));
+    }
+    else
+        throw new Exception('Dateityp nicht erlaubt. Bitte nur '.implode(', ',$allowed).' hochladen');
+
+}
+
+function getFileUploadError($error)
+{
+    $phpFileUploadErrors = array(
+        0 => 'There is no error, the file uploaded with success',
+        1 => 'The uploaded file exceeds the upload_max_filesize directive in php.ini',
+        2 => 'The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form',
+        3 => 'The uploaded file was only partially uploaded',
+        4 => 'No file was uploaded',
+        6 => 'Missing a temporary folder',
+        7 => 'Failed to write file to disk.',
+        8 => 'A PHP extension stopped the file upload.',
+    );
+
+    return $phpFileUploadErrors[$error];
+}
+
 function partial($name,$variables=[])
 {
     $templatefile = ROOT.DS.'templates'.DS.'partials'.DS.$name;

web/js/dropzone.min.js

@@ -0,0 +1 @@
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(self,(function(){return function(){var e={3099:function(e){e.exports=function(e){if("function"!=typeof e)throw TypeError(String(e)+" is not a function");return e}},6077:function(e,t,n){var r=n(111);e.exports=function(e){if(!r(e)&&null!==e)throw TypeError("Can't set "+String(e)+" as a prototype");return e}},1223:function(e,t,n){var r=n(5112),i=n(30),o=n(3070),a=r("unscopables"),u=Array.prototype;null==u[a]&&o.f(u,a,{configurable:!0,value:i(null)}),e.exports=function(e){u[a][e]=!0}},1530:function(e,t,n){"use strict";var r=n(8710).charAt;e.exports=function(e,t,n){return t+(n?r(e,t).length:1)}},5787:function(e){e.exports=function(e,t,n){if(!(e instanceof t))throw TypeError("Incorrect "+(n?n+" ":"")+"invocation");return e}},9670:function(e,t,n){var r=n(111);e.exports=function(e){if(!r(e))throw TypeError(String(e)+" is not an object");return e}},4019:function(e){e.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},260:function(e,t,n){"use strict";var r,i=n(4019),o=n(9781),a=n(7854),u=n(111),s=n(6656),l=n(648),c=n(8880),f=n(1320),p=n(3070).f,h=n(9518),d=n(7674),v=n(5112),y=n(9711),g=a.Int8Array,m=g&&g.prototype,b=a.Uint8ClampedArray,x=b&&b.prototype,w=g&&h(g),E=m&&h(m),k=Object.prototype,A=k.isPrototypeOf,S=v("toStringTag"),F=y("TYPED_ARRAY_TAG"),T=i&&!!d&&"Opera"!==l(a.opera),C=!1,L={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},R={BigInt64Array:8,BigUint64Array:8},I=function(e){if(!u(e))return!1;var t=l(e);return s(L,t)||s(R,t)};for(r in L)a[r]||(T=!1);if((!T||"function"!=typeof w||w===Function.prototype)&&(w=function(){throw TypeError("Incorrect invocation")},T))for(r in L)a[r]&&d(a[r],w);if((!T||!E||E===k)&&(E=w.prototype,T))for(r in L)a[r]&&d(a[r].prototype,E);if(T&&h(x)!==E&&d(x,E),o&&!s(E,S))for(r in C=!0,p(E,S,{get:function(){return u(this)?this[F]:void 0}}),L)a[r]&&c(a[r],F,r);e.exports={NATIVE_ARRAY_BUFFER_VIEWS:T,TYPED_ARRAY_TAG:C&&F,aTypedArray:function(e){if(I(e))return e;throw TypeError("Target is not a typed array")},aTypedArrayConstructor:function(e){if(d){if(A.call(w,e))return e}else for(var t in L)if(s(L,r)){var n=a[t];if(n&&(e===n||A.call(n,e)))return e}throw TypeError("Target is not a typed array constructor")},exportTypedArrayMethod:function(e,t,n){if(o){if(n)for(var r in L){var i=a[r];i&&s(i.prototype,e)&&delete i.prototype[e]}E[e]&&!n||f(E,e,n?t:T&&m[e]||t)}},exportTypedArrayStaticMethod:function(e,t,n){var r,i;if(o){if(d){if(n)for(r in L)(i=a[r])&&s(i,e)&&delete i[e];if(w[e]&&!n)return;try{return f(w,e,n?t:T&&g[e]||t)}catch(e){}}for(r in L)!(i=a[r])||i[e]&&!n||f(i,e,t)}},isView:function(e){if(!u(e))return!1;var t=l(e);return"DataView"===t||s(L,t)||s(R,t)},isTypedArray:I,TypedArray:w,TypedArrayPrototype:E}},3331:function(e,t,n){"use strict";var r=n(7854),i=n(9781),o=n(4019),a=n(8880),u=n(2248),s=n(7293),l=n(5787),c=n(9958),f=n(7466),p=n(7067),h=n(1179),d=n(9518),v=n(7674),y=n(8006).f,g=n(3070).f,m=n(1285),b=n(8003),x=n(9909),w=x.get,E=x.set,k="ArrayBuffer",A="DataView",S="Wrong index",F=r.ArrayBuffer,T=F,C=r.DataView,L=C&&C.prototype,R=Object.prototype,I=r.RangeError,U=h.pack,O=h.unpack,_=function(e){return[255&e]},M=function(e){return[255&e,e>>8&255]},z=function(e){return[255&e,e>>8&255,e>>16&255,e>>24&255]},P=function(e){return e[3]<<24|e[2]<<16|e[1]<<8|e[0]},j=function(e){return U(e,23,4)},D=function(e){return U(e,52,8)},N=function(e,t){g(e.prototype,t,{get:function(){return w(this)[t]}})},B=function(e,t,n,r){var i=p(n),o=w(e);if(i+t>o.byteLength)throw I(S);var a=w(o.buffer).bytes,u=i+o.byteOffset,s=a.slice(u,u+t);return r?s:s.reverse()},q=function(e,t,n,r,i,o){var a=p(n),u=w(e);if(a+t>u.byteLength)throw I(S);for(var s=w(u.buffer).bytes,l=a+u.byteOffset,c=r(+i),f=0;f<t;f++)s[l+f]=c[o?f:t-f-1]};if(o){if(!s((function(){F(1)}))||!s((function(){new F(-1)}))||s((function(){return new F,new F(1.5),new F(NaN),F.name!=k}))){for(var W,H=(T=function(e){return l(this,T),new F(p(e))}).prototype=F.prototype,Y=y(F),G=0;Y.length>G;)(W=Y[G++])in T||a(T,W,F[W]);H.constructor=T}v&&d(L)!==R&&v(L,R);var Q=new C(new T(2)),$=L.setInt8;Q.setInt8(0,2147483648),Q.setInt8(1,2147483649),!Q.getInt8(0)&&Q.getInt8(1)||u(L,{setInt8:function(e,t){$.call(this,e,t<<24>>24)},setUint8:function(e,t){$.call(this,e,t<<24>>24)}},{unsafe:!0})}else T=function(e){l(this,T,k);var t=p(e);E(this,{bytes:m.call(new Array(t),0),byteLength:t}),i||(this.byteLength=t)},C=function(e,t,n){l(this,C,A),l(e,T,A);var r=w(e).byteLength,o=c(t);if(o<0||o>r)throw I("Wrong offset");if(o+(n=void 0===n?r-o:f(n))>r)throw I("Wrong length");E(this,{buffer:e,byteLength:n,byteOffset:o}),i||(this.buffer=e,this.byteLength=n,this.byteOffset=o)},i&&(N(T,"byteLength"),N(C,"buffer"),N(C,"byteLength"),N(C,"byteOffset")),u(C.prototype,{getInt8Line truncated

web/pages/runs/controller.php

@@ -103,6 +103,25 @@ class Runs extends Page {
             $res->run = $rid;
             $res->user = $_SESSION['user']->id;
 
+            if($_FILES['photos'])
+            {
+                foreach($_FILES['photos']['tmp_name'] as $key => $tmp_name)
+                {
+                    try{
+                        $url = pictShareFormValidateAndUpload($_FILES['photos'],$key);
+                        $res->data['photos'][] = $url;
+                    }
+                    catch(Exception $e)
+                    {
+                        return partial('error.html', ['errorMessage' => 'Fehler beim Upload des Fotos: '.$e->getMessage()]);
+                    }
+
+                }
+
+                //filter out unique values so we don't have double entries
+                $res->data['photos'] = array_unique($res->data['photos']);
+            }
+
             try{
                 $resid = $res->save();
 

web/pages/runs/edit_result.html

@@ -22,7 +22,8 @@
     <h2>Ergebnis
         <?= $result_id?'Bearbeiten':'Eintragen'; ?>
     </h2>
-    <form hx-post="/runs/validateresults" hx-encoding='multipart/form-data' hx-target="#response">
+    <form id="resulteditform" hx-post="/runs/validateresults" hx-encoding='multipart/form-data' hx-target="#response">
+        <div class="dropzone-previews"></div>
         <input type="hidden" name="result_id" value="<?= $result_id; ?>">
         <input type="hidden" name="run_id" value="<?= $run_id; ?>">
         <div>
@@ -88,7 +89,7 @@
         </div>
         <div>
             <label for="uploads">Uploads</label>
-            <input type="file" accept="image/png, image/jpeg, image/gif" id="uploads" name="uploads">
+            <input type="file" accept="image/png, image/jpeg, image/gif" id="uploads" name="photos[]" multiple>
         </div>
         <div>
             <label for="video-url">Video Url</label>
@@ -103,7 +104,13 @@
             <input class="form-check-input" type="checkbox" id="public" name="public" value="1" <?=$result['public']!='0' ?'checked':''; ?>>
         </div>
         <button type="submit" name="submit" value="true" class="btn btn-primary">Speichern</button>
-
+        <progress id='progress' value='0' max='100'></progress>
         <div id="response"></div>
     </form>
-</div>
+</div>
+
+<script>
+    htmx.on('#resulteditform', 'htmx:xhr:progress', function(evt) {
+      htmx.find('#progress').setAttribute('value', evt.detail.loaded/evt.detail.total * 100)
+    });
+  </script>

web/pages/runs/run.html

@@ -1,33 +1,61 @@
 <div class="container">
     <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
-          <li class="breadcrumb-item">
-            <i class="fas fa-calendar-star"></i>
-            <a href="/tournaments/event/<?= $tournament_id; ?>" hx-push-url="/tournaments/event/<?= $tournament_id; ?>" hx-get="/tournaments/event/<?= $tournament_id; ?>" hx-target="#main"><?= escape($tournament['name']); ?></a>
-        </li>
-          <li class="breadcrumb-item active" aria-current="page">
-            <i class="far fa-running"></i> <?= escape($run['name']); ?>
-        </li>
+            <li class="breadcrumb-item">
+                <i class="fas fa-calendar-star"></i>
+                <a href="/tournaments/event/<?= $tournament_id; ?>" hx-push-url="/tournaments/event/<?= $tournament_id; ?>" hx-get="/tournaments/event/<?= $tournament_id; ?>" hx-target="#main">
+                    <?= escape($tournament['name']); ?>
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                <i class="far fa-running"></i>
+                <?= escape($run['name']); ?>
+            </li>
         </ol>
-      </nav>
+    </nav>
     <div class="row">
         <div class="col-3">
             <div class="card">
-                <?php if($run['photo']): ?><img src="<?= $run['photo'] ?>/300x170/fixedsize" class="card-img-top" alt="<?= escape($run['name']); ?>'s profile Picture"> <?php endif; ?>
+                <?php if($run['photo']): ?><img src="<?= $run['photo'] ?>/300x170/fixedsize" class="card-img-top" alt="<?= escape($run['name']); ?>'s profile Picture">
+                <?php endif; ?>
                 <div class="card-body">
-                    <h5 class="card-title"><?= escape($run['name']); ?></h5>
+                    <h5 class="card-title">
+                        <?= escape($run['name']); ?>
+                    </h5>
                     <p class="card-text">
-                        <ul>
-                            
-                            <li>Gehört zu <a href="/tournaments/event/<?= $tournament_id; ?>" hx-push-url="/tournaments/event/<?= $tournament_id; ?>" hx-get="/tournaments/event/<?= $tournament_id; ?>" hx-target="#main"><?= escape($tournament['name']); ?></a></li>
-                            <?php if($run['category']): ?> <li>Typ: <?= escape($run['category']); ?></li><?php endif; ?>
-                            <?php if($run['length']): ?> <li>Länge: <?= escape($run['length']); ?>m</li><?php endif; ?>
-                            <?php if($run['time_standard']): ?> <li>Normzeit: <?= escape($run['time_standard']); ?>s</li><?php endif; ?>
-                            <?php if($run['time_max']): ?> <li>Maxzeit: <?= escape($run['time_max']); ?>s</li><?php endif; ?>
-                            <?php if($run['referee']): ?> <li>Richter: <?= escape($run['referee']); ?></li><?php endif; ?>
-                        </ul>
-                    
-                    
+                    <ul>
+
+                        <li>Gehört zu <a href="/tournaments/event/<?= $tournament_id; ?>" hx-push-url="/tournaments/event/<?= $tournament_id; ?>" hx-get="/tournaments/event/<?= $tournament_id; ?>" hx-target="#main">
+                                <?= escape($tournament['name']); ?>
+                            </a></li>
+                        <?php if($run['category']): ?>
+                        <li>Typ:
+                            <?= escape($run['category']); ?>
+                        </li>
+                        <?php endif; ?>
+                        <?php if($run['length']): ?>
+                        <li>Länge:
+                            <?= escape($run['length']); ?>m
+                        </li>
+                        <?php endif; ?>
+                        <?php if($run['time_standard']): ?>
+                        <li>Normzeit:
+                            <?= escape($run['time_standard']); ?>s
+                        </li>
+                        <?php endif; ?>
+                        <?php if($run['time_max']): ?>
+                        <li>Maxzeit:
+                            <?= escape($run['time_max']); ?>s
+                        </li>
+                        <?php endif; ?>
+                        <?php if($run['referee']): ?>
+                        <li>Richter:
+                            <?= escape($run['referee']); ?>
+                        </li>
+                        <?php endif; ?>
+                    </ul>
+
+
                     <div class="d-flex justify-content-end">
                         <?php if($admin===true): ?>
                         <button type="button" class="btn btn-secondary" hx-get="/runs/edit/<?= $run_id; ?>" hx-target="#main">
@@ -36,15 +64,36 @@
                         <?php endif; ?>
                     </div>
                 </div>
-            </div>    
+            </div>
+
         </div>
         <div class="col" id="sitemain">
+            <div class="card p-2 mb-2">
+                <div class="row">
+                    <h3>Fotos</h3>
+                    <?php foreach($results as $result) : ?>
+                    <?php if($result['photos']): ?>
+                    <?php foreach($result['photos'] as $photo) : ?>
+
+                    <div class="col-md-4 mt-3 col-lg-3">
+                        <a href="<?= $photo; ?>">
+                            <img src="<?= $photo; ?>/100x100/forcesize" alt="<?= escape( (new Dog())->getField('name',$result['dog']) ) ?>'s Lauf" class="figure-img rounded">
+                        </a>
+                    </div>
+
+                    <?php endforeach; ?>
+
+                    <?php endif; ?>
+                    <?php endforeach; ?>
+                </div>
+            </div>
+
             <div class="card p-2">
                 <h4>Ergebnisse</h4>
                 <p class="card-text">
                     <button hx-get="/runs/addresults/<?= $run_id; ?>" hx-push-url="/runs/addresults/<?= $run_id; ?>" hx-target="#main" class="btn btn-primary"><i class="fas fa-plus-circle"></i> Ergebnis Eintragen</button>
 
-                </p>  
+                </p>
 
                 <table class="table">
                     <thead>
@@ -64,23 +113,42 @@
                     <tbody>
                         <?php foreach($results as $result) : ?>
                         <tr>
-                            <td><?= escape($result['ranking']); ?></td>
-                            <td><?= $result['disqualified']?'Ja':'Nein'; ?></td>
-                            <td><?= escape($result['refusals']); ?></td>
-                            <td><?= escape($result['errors']); ?></td>
-                            <td><?= escape($result['timefaults']); ?></td>
-                            <td><?= escape($result['runtime']); ?></td>
-                            <td><?= escape($result['penalties']); ?></td>
-                            <td><?= escape($result['speed']); ?></td>
-                            <td><?= escape($result['rating']); ?></td>
-                            <td><a href="/dogs/overview/<?= $result['dog'] ?>"><?= escape( (new Dog())->getField('name',$result['dog']) ); ?></a></td>
+                            <td>
+                                <?= escape($result['ranking']); ?>
+                            </td>
+                            <td>
+                                <?= $result['disqualified']?'Ja':'Nein'; ?>
+                            </td>
+                            <td>
+                                <?= escape($result['refusals']); ?>
+                            </td>
+                            <td>
+                                <?= escape($result['errors']); ?>
+                            </td>
+                            <td>
+                                <?= escape($result['timefaults']); ?>
+                            </td>
+                            <td>
+                                <?= escape($result['runtime']); ?>
+                            </td>
+                            <td>
+                                <?= escape($result['penalties']); ?>
+                            </td>
+                            <td>
+                                <?= escape($result['speed']); ?>
+                            </td>
+                            <td>
+                                <?= escape($result['rating']); ?>
+                            </td>
+                            <td><a href="/dogs/overview/<?= $result['dog'] ?>">
+                                    <?= escape( (new Dog())->getField('name',$result['dog']) ); ?>
+                                </a></td>
                         </tr>
                         <?php endforeach; ?>
                     </tbody>
                 </table>
             </div>
         </div>
-        
-    </div>
-</div>
 
+    </div>
+</div>

web/templates/mainpage.html

@@ -8,7 +8,9 @@
     <link href="/css/animate.min.css" rel="stylesheet">
     <link href="/css/fontawesome.min.css" rel="stylesheet">
     <link href="/css/bootstrap.min.css" rel="stylesheet">
+
     <link href="/css/dogstats.css" rel="stylesheet">
+    
 
     <script src="/js/echarts.min.js"></script>
 </head>
@@ -37,6 +39,7 @@
 
     <script src="/js/htmx.min.js"></script>
     <script src="/js/bootstrap.bundle.min.js"></script>
+    <script src="/js/dropzone.min.js"></script>
     <?php if((!$_SESSION['user'] || !$_SESSION['user']->theme)): ?><script src="/js/color-modes.js"></script><?php endif; ?>
 </body>