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/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/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>