Add ability to credit photographer and uploader

.nova/Configuration.json

@@ -1,4 +1,11 @@
 {
+  "com.thorlaksson.phpcs.formatOnSave" : true,
+  "com.thorlaksson.phpcs.runOnChange" : "onSave",
+  "com.thorlaksson.phpcs.standard" : "PSR2",
+  "prettier.default-config.tabWidth" : 4,
+  "prettier.format-on-save" : "Disable",
   "workspace.art_style" : 0,
-  "workspace.name" : "PhotoPrismUpload"
+  "workspace.name" : "PhotoPrismUpload",
+  "workspace.preview_type" : "custom",
+  "workspace.preview_url" : "http:\/\/phlaym.net\/photoupload\/?token=1g29eaapq6"
 }

composer.lock

@@ -8,16 +8,16 @@
     "packages": [
         {
             "name": "monolog/monolog",
-            "version": "2.3.5",
+            "version": "2.9.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/Seldaek/monolog.git",
-                "reference": "fd4380d6fc37626e2f799f29d91195040137eba9"
+                "reference": "f259e2b15fb95494c83f52d3caad003bbf5ffaa1"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/Seldaek/monolog/zipball/fd4380d6fc37626e2f799f29d91195040137eba9",
+                "url": "https://api.github.com/repos/Seldaek/monolog/zipball/f259e2b15fb95494c83f52d3caad003bbf5ffaa1",
-                "reference": "fd4380d6fc37626e2f799f29d91195040137eba9",
+                "reference": "f259e2b15fb95494c83f52d3caad003bbf5ffaa1",
                 "shasum": ""
             },
             "require": {
@@ -30,18 +30,22 @@
             "require-dev": {
                 "aws/aws-sdk-php": "^2.4.9 || ^3.0",
                 "doctrine/couchdb": "~1.0@dev",
-                "elasticsearch/elasticsearch": "^7",
+                "elasticsearch/elasticsearch": "^7 || ^8",
-                "graylog2/gelf-php": "^1.4.2",
+                "ext-json": "*",
+                "graylog2/gelf-php": "^1.4.2 || ^2@dev",
+                "guzzlehttp/guzzle": "^7.4",
+                "guzzlehttp/psr7": "^2.2",
                 "mongodb/mongodb": "^1.8",
                 "php-amqplib/php-amqplib": "~2.4 || ^3",
-                "php-console/php-console": "^3.1.3",
+                "phpspec/prophecy": "^1.15",
-                "phpspec/prophecy": "^1.6.1",
                 "phpstan/phpstan": "^0.12.91",
-                "phpunit/phpunit": "^8.5",
+                "phpunit/phpunit": "^8.5.14",
-                "predis/predis": "^1.1",
+                "predis/predis": "^1.1 || ^2.0",
-                "rollbar/rollbar": "^1.3",
+                "rollbar/rollbar": "^1.3 || ^2 || ^3",
-                "ruflin/elastica": ">=0.90@dev",
+                "ruflin/elastica": "^7",
-                "swiftmailer/swiftmailer": "^5.3|^6.0"
+                "swiftmailer/swiftmailer": "^5.3|^6.0",
+                "symfony/mailer": "^5.4 || ^6",
+                "symfony/mime": "^5.4 || ^6"
             },
             "suggest": {
                 "aws/aws-sdk-php": "Allow sending log messages to AWS services like DynamoDB",
@@ -56,7 +60,6 @@
                 "graylog2/gelf-php": "Allow sending log messages to a GrayLog2 server",
                 "mongodb/mongodb": "Allow sending log messages to a MongoDB server (via library)",
                 "php-amqplib/php-amqplib": "Allow sending log messages to an AMQP server using php-amqplib",
-                "php-console/php-console": "Allow sending log messages to Google Chrome",
                 "rollbar/rollbar": "Allow sending log messages to Rollbar",
                 "ruflin/elastica": "Allow sending log messages to an Elastic Search server"
             },
@@ -91,7 +94,7 @@
             ],
             "support": {
                 "issues": "https://github.com/Seldaek/monolog/issues",
-                "source": "https://github.com/Seldaek/monolog/tree/2.3.5"
+                "source": "https://github.com/Seldaek/monolog/tree/2.9.1"
             },
             "funding": [
                 {
@@ -103,7 +106,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2021-10-01T21:08:31+00:00"
+            "time": "2023-02-06T13:44:46+00:00"
         },
         {
             "name": "psr/log",
@@ -169,5 +172,5 @@
     "platform-overrides": {
         "php": "7.4.1"
     },
-    "plugin-api-version": "2.1.0"
+    "plugin-api-version": "2.3.0"
 }

config.php.sample

@@ -1,7 +1,10 @@
 <?php
 
 return [
-  'username' => '',
+    'username' => '',
-  'password' => ''
+    'password' => '',
-  'noAlbumToken' => ''
+    'noAlbumToken' => '',
+    'fileUploadLimitMb' => 1024,
+    'maximumNumberOfFilesPerUpload' => 200,
+    'baseUrl' => 'https://rabenberger.photos',
 ];

index.php

@@ -1,9 +1,16 @@
 <?php
 session_start();
+
+/** require autoloading to manage namespaces */
 require __DIR__ . '/vendor/autoload.php';
 
 use PhotoPrismUpload\API\PhotoPrism;
-$footer = '<footer style="position: fixed;bottom: 0;left: 0;"><a href="/git/phlaym/photoprismupload">Ich bin Open Source</a></footer>';
+use PhotoPrismUpload\Entities\Album;
+
+/** @var string $footer Footer text which links to the Gitea repo */
+$footer =
+    '<footer style="position: fixed;bottom: 0;left: 0;">' .
+    '<!--<a href="https://phlaym.net/git/phlaym/photoprismupload">Ich bin Open Source</a></footer>-->';
 ?>
 <html>
     <head>
@@ -36,12 +43,20 @@ $footer = '<footer style="position: fixed;bottom: 0;left: 0;"><a href="/git/phla
         .form-wrapper {
             display: grid;
             grid-template-rows: auto auto auto;
-            grid-auto-columns: auto auto;
+            grid-auto-columns: minmax(auto, 400px) auto;
-            max-width: 300px;
         }
         label[for="album"] {
             grid-column: 1;
             grid-row: 1;
+            align-self: center;
+        }
+        label[for="artist"], label[for="uploader"] {
+            grid-column: 1;
+            align-self: center;
+        }
+        input[type=text] {
+            grid-column: 2;
+            justify-self: right;
         }
         #album {
             grid-column: 2;
@@ -56,19 +71,25 @@ $footer = '<footer style="position: fixed;bottom: 0;left: 0;"><a href="/git/phla
         }
         input[type=submit] {
             grid-column: 2;
-            grid-row: 3;
+            grid-row: 5;
             justify-self: right;
         }
-        #error, #fileProgress, #totalProgress, label[for="fileProgress"], label[for="totalProgress"] {
+        #error,
+        #fileProgress,
+        #totalProgress,
+        label[for="fileProgress"],
+        label[for="totalProgress"] {
             display:none;
             grid-column: 1;
         }
         #uploadForm {
             grid-row: 1;
             grid-column: 1;
+            grid-auto-columns: minmax(100px, auto);
         }
         #error {
             grid-row: 2;
+            grid-column: 1/3;
         }
         label[for="fileProgress"] {
             grid-row: 3;
@@ -84,6 +105,9 @@ $footer = '<footer style="position: fixed;bottom: 0;left: 0;"><a href="/git/phla
             grid-row: 6;
             width: 100%;
         }
+        #viewAlbum {
+            grid-row: 7;
+        }
         footer {
             margin: 8px;
         }
@@ -91,59 +115,77 @@ $footer = '<footer style="position: fixed;bottom: 0;left: 0;"><a href="/git/phla
     </head>
     <body>
 <?php
+/** @var array $config configuration options */
+$config = require __DIR__ . '/config.php';
 
-$config = require(__DIR__ . '/config.php');
+/** @var PhotoPrism $api API object to interface with PhotoPrism */
 $api = new PhotoPrism($config);
+
+/** @var Album[] $albums List of PhotoPrism albums */
 $albums = [];
 try {
     $api->login();
 } catch (\Exception $e) {
-    die('Fehler: ' . $e->getMessage().'</body></html>');
+    die('Fehler: ' . $e->getMessage() . $footer . '</body></html>');
 }
 
 if (!isset($_POST['submit'])) {
     if (!isset($_GET['token'])) {
-        die('Sorry, kein Zugriff</body></html>');
+        die('Sorry, kein Zugriff' . $footer . '</body></html>');
     }
+
+    /** @var string $token Tokens for which album(s) are visible in the dropdown */
     $token = $_GET['token'];
+
+    /** @var string[] $tokens List of album tokens */
     $tokens = explode(',', $token);
+
+    /** @var string $album_url URL path to the selected album */
+    $album_url = '/';
     try {
         $albums = $api->getAlbumsByTokens($tokens);
     } catch (\Exception $e) {
-        die('Fehler: ' . $e->getMessage().'</body></html>');
+        die('Fehler: ' . $footer . $e->getMessage() . '</body></html>');
     }
-    if (empty($albums) && (empty($config['noAlbumToken']) || !in_array($config['noAlbumToken'], $tokens))) {
+    if (empty($albums) &&
-        die('Falscher Token</body></html>');
+        (empty($config['noAlbumToken']) ||
+            !in_array($config['noAlbumToken'], $tokens))
+    ) {
+        die('Falscher Token' . $footer . '</body></html>');
     }
     ?>
-    <script>
-        window.tooLarge = false;
-        window.tooManyFiles = false;
-        function validateForm() {
-            const isInvalid = window.tooLarge || window.tooManyFiles;
-            console.log('Validating', window.tooLarge, window.tooManyFiles, isInvalid);
-            if (isInvalid) {
-                const errorDiv = document.getElementById('error');
-                errorDiv.innerText = '';
-                errorDiv.innerText += window.tooLarge ? 'Zu groß, Upload muss weniger als 200MB sein. ' : '';
-                errorDiv.innerText += window.tooManyFiles ? 'Zu viele Dateien, maximal 200 erlaubt. ' : '';
-                errorDiv.style.display = 'block';
-            }
-            return !isInvalid;
-        }
-    </script>
     <div class="form-wrapper">
-        <!--<form method="POST" enctype="multipart/form-data" onsubmit="return validateForm();" id="uploadForm"> !-->
         <form method="POST" enctype="multipart/form-data" id="uploadForm">
             <label for="album">Zu Album hinzufügen</label>
             <select name="album" id="album">
-                <option value="">---</option>
+                <?php
-                <?php foreach ($albums as $album) {
+                if (!empty($config['noAlbumToken'])) {
-                    echo '<option value="' . $album->uid . '">' . $album->title . '</option>\n';
+                    echo '<option value="" data-url="/">---</option>';
-                } ?>
+                }
+                /** @var Album $album Current PhotoPrism albums */
+                foreach ($albums as $album) {
+                    /** @var string $selected Selected attribute of the option */
+                    $selected = $album->token === $tokens[0] ? ' selected ' : '';
+                    if ($album->token === $tokens[0]) {
+                        $album_url = $album->getUrlPath() ?? '/';
+                    }
+                    echo '<option value="' .
+                        $album->uid .
+                        '"' .
+                        $selected .
+                        'data-url=' .
+                        ($album->getUrlPath() ?? '/') .
+                        '>' .
+                        $album->title .
+                        '</option>\n';
+                }
+                $album_url = "{$api->base_url}{$album_url}";
+                ?>
             </select>
-            <!--<label></label>
+            <label for="artist">Fotograf*in</label>
-            <input type="text" />!-->
+            <input type="text" name="artist" id="artist" required/>
+            <label for="artist">Dein Name</label>
+            <input type="text" name="uploader" id="uploader"/>
             <input multiple type="file" name="files[]" id="input" required/>
             <input type="submit" name="submit" value="Upload" />
         </form>
@@ -152,17 +194,23 @@ if (!isset($_POST['submit'])) {
         <progress id="fileProgress"></progress>
         <label for="totalProgress">Gesamt:</label>
         <progress max="0" value="0" id="totalProgress"></progress>
+        <a href="<?= $album_url ?>" target="_blank" id="viewAlbum">Album ansehen</a>
     </div>
     <script>
+        window.tooLarge = false;
+        window.tooManyFiles = false;
         const form = document.getElementById('uploadForm');
         const submitButton = form.querySelector('input[type=submit]');
         const albumInput = form.querySelector('select[name=album]');
+        const artistInput = form.querySelector('input[name=artist]');
+        const uploaderInput = form.querySelector('input[name=uploader]');
         const input = document.getElementById('input');
         const fileProgress = document.getElementById('fileProgress');
         const totalProgress = document.getElementById('totalProgress');
         const fileProgressLabel = document.querySelector('label[for=fileProgress]');
         const totalProgressLabel = document.querySelector('label[for=totalProgress]');
         const errorDiv = document.getElementById('error');
+        const albumAnchor = document.getElementById('viewAlbum');
 
         async function postData(url, data = {}, method = 'POST') {
             const response = await fetch(url, {
@@ -172,8 +220,31 @@ if (!isset($_POST['submit'])) {
             return response;
         }
 
+        function validateFileType(file) {
+            if (file.type && (file.type.startsWith('image/') || file.type.startsWith('video/'))) {
+                return true;
+            }
+            const parts = file.name.split('.');
+            const extension = parts.length > 0 ? parts[parts.length-1] : '';
+            if (['jpg', 'jpeg', 'png', 'heic', 'heif', 'mov', 'mp4', 'mkv'].includes(extension)) {
+                return true;
+            }
+            console.warn('Invalid file type', extension);
+            return false;
+        }
+
+        albumInput.addEventListener('change', (event) => {
+            console.log(event);
+            albumAnchor.href = `<?=$api->base_url?>${albumInput.selectedOptions[0].dataset.url}`;
+        });
+
         form.addEventListener('submit', async function(event) {
             event.preventDefault();
+            const isInvalid = window.tooLarge || window.tooManyFiles;
+            if (isInvalid) {
+               console.error('Aborting upload! Too many files or files too large');
+               return;
+            }
             errorDiv.innerText = '';
 
             fileProgressLabel.style.display = 'inherit';
@@ -193,6 +264,8 @@ if (!isset($_POST['submit'])) {
                 formData.set(input.name, file);
                 formData.set(submitButton.name, submitButton.value);
                 formData.set(albumInput.name, albumInput.value);
+                formData.set(artistInput.name, artistInput.value);
+                formData.set(uploaderInput.name, uploaderInput.value);
                 try {
                     let resp = await postData(form.action, formData, form.method);
                 } catch(e) {
@@ -210,35 +283,91 @@ if (!isset($_POST['submit'])) {
 
         let fileList = [];
         input.addEventListener('change', (event) => {
+            const maxFileSize = <?= $config['fileUploadLimitMb'] ?>;
+            const maxAmountOfFiles = <?= $config[
+                'maximumNumberOfFilesPerUpload'
+            ] ?>;
             const errorDiv = document.getElementById('error');
             const totalProgress = document.getElementById('totalProgress');
+
             errorDiv.innerText = '';
             errorDiv.style.display = 'none';
+            submitButton.disabled = false;
 
             const target = event.target;
-            let totalSize = 0;
             fileList = [];
+            const filesTooLarge = [];
             if (target.files) {
                 for (file of target.files) {
-                    totalSize += file.size;
+                    const sizeInMb = file.size / 1024 / 1024;
-                    fileList.push(file);
+                    if (sizeInMb >= maxFileSize) {
+                        filesTooLarge.push(file.name);
+                        console.warn(
+                            'File',
+                            file.name,
+                            'is',
+                            sizeInMb,
+                            'MB big, which is over the limit of',
+                            maxFileSize);
+                    } else if(validateFileType(file)) {
+                        fileList.push(file);
+                    }
+
                 }
             }
             totalProgress.max = fileList.length;
-            const sizeInMb = totalSize / 1000 / 1000;
+
-            window.tooLarge = sizeInMb >= 200;
+            window.tooManyFiles = fileList.length > maxAmountOfFiles;
-            console.log('Total size:', totalSize, 'too large: ', window.tooLarge);
+            if (window.tooManyFiles) {
-            window.tooManyFiles = target.files.length > 200;
+                errorDiv.style.display = 'block';
-            console.log('Total files:', target.files.length, 'too many: ', window.tooManyFiles);
+                errorDiv.innerHTML += ```
+                    Das sind zu viele Dateien, du darfst max.
+                    ${maxAmountOfFiles} Dateien gleichzeitig hochladen. ```;
+                submitButton.disabled = true;
+                console.warn('Total files:', target.files.length, '. Too many!');
+            }
+
+            window.tooLarge = filesTooLarge.length > 0;
+            if (window.tooLarge) {
+                const names = filesTooLarge.join(', ')
+                errorDiv.style.display = 'block';
+                const pluralizedMessage = filesTooLarge.length > 1
+                ? 'Die folgenden Dateien sind'
+                : 'Die folgende Datei ist';
+                errorDiv.innerHTML += ```
+                    ${pluralizedMessage} zu groß und wird beim Upload ignoriert: ${names}.
+                    Jede Datei darf max. ${maxFileSize} MB groß sein.```;
+            }
+            if (!fileList.length) {
+                submitButton.disabled = true;
+                errorDiv.style.display = 'block';
+                errorDiv.innerHTML += 'Keine gültigen Bilder oder Videos gefunden';
+            }
         });
     </script>
-    <?php
+    <?php die($footer . '</body></html>');
-    die($footer.'</body></html>');
 }
 try {
-    $api->uploadPhotos($_POST['album']);
+    $hashes = $api->uploadPhotos($_POST['album']);
+    foreach ($hashes as $hash) {
+        $photo = $api->getByHash($hash);
+        if (!isset($photo)) {
+            continue;
+        }
+        $details = [
+            'Artist' => $_POST['artist'],
+            'ArtistSrc' => 'manual',
+            'Copyright' => $_POST['artist'],
+            'CopyrightSrc' => 'manual',
+        ];
+        if (!empty($_POST['uploader'])) {
+            $details['Notes'] = 'Hochgeladen von: ' . $_POST['uploader'];
+            $details['NotesSrc'] = 'manual';
+        }
+        $api->updatePhotoDetails($photo, $details);
+    }
 } catch (\Exception $e) {
-    die('Fehler: ' . $e->getMessage().'</body></html>');
+    die('Fehler: ' . $footer . $e->getMessage() . '</body></html>');
 }
 ?>
 Erfolg! <a href=".">Zurück</a>

results-gallery.php

@@ -0,0 +1,103 @@
+<?php
+session_start();
+
+/** require autoloading to manage namespaces */
+require __DIR__ . '/vendor/autoload.php';
+
+use PhotoPrismUpload\API\PhotoPrism;
+use PhotoPrismUpload\Entities\Album;
+use PhotoPrismUpload\Entities\Photo;
+
+?>
+<html>
+    <head>
+        <title>Collagen Abstimmung</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta charset="utf-8">
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <link href="vote.css" rel="stylesheet">
+    </head>
+    <body>
+<?php
+
+$footer = '</body></html>';
+
+/** @var array $config configuration options */
+$config = require(__DIR__ . '/config.php');
+
+/** @var PhotoPrism $api API object to interface with PhotoPrism */
+$api = new PhotoPrism($config);
+
+/** @var Album[] $albums List of PhotoPrism albums */
+$albums = [];
+try {
+    $api->login();
+} catch (\Exception $e) {
+    die('Fehler: ' . $e->getMessage().$footer.'</body></html>');
+}
+
+/** @var string $token Tokens for which album(s) are visible in the dropdown */
+$token = $_GET['token'];
+
+/** @var int $page Page number of photos to load */
+$page = 1;
+
+/** @var int $count Number of pictures to load */
+$count = 200;
+
+/** @var int $offset Tokens for which album(s) are visible in the dropdown */
+$offset = ($page - 1) * $count;
+
+/** @var string $album_url URL path to the selected album */
+$album_url = '/';
+
+$votes_file = 'votes.json';
+
+$contents = file_get_contents($votes_file);
+if ($contents === false) {
+    $contents = '{}';
+}
+$contents = json_decode($contents, true);
+
+$vote_counts = [];
+foreach ($contents as $votes) {
+    foreach ($votes as $photo_uid => $vote_value) {
+        if (!array_key_exists($photo_uid, $vote_counts)) {
+            $vote_counts[$photo_uid] = 0;
+        }
+        $vote_counts[$photo_uid] += intval($vote_value);
+    }
+}
+
+$page_sizes = array_values(array_unique([10, 20, 50, 100, $count]));
+sort($page_sizes);
+$link_class = $page === 1 ? 'pageLink disabled' : 'pageLink';
+
+try {
+    $album = $api->getAlbumByToken($token);
+    if ($album === null) {
+        die('Album nicht gefunden' . $footer . '</body></html>');
+    }
+    $photos = $api->getAlbumPhotos($album, $count, $offset);
+    $photos = array_filter($photos, function (Photo $a) use ($vote_counts) {
+        $vote_a = $vote_counts[$a->uid] ?? 0;
+        return $vote_a >= 0;
+    });
+    usort($photos, function (Photo $a, Photo $b) use ($vote_counts) {
+        $vote_a = $vote_counts[$a->uid] ?? 0;
+        $vote_b = $vote_counts[$b->uid] ?? 0;
+        return $vote_b - $vote_a;
+    });
+    ?>
+    <?php
+    foreach ($photos as $photo) {
+        $thumb = $photo->getThumbnailUrl();?>
+        <div class="photowrapper">
+            <img src="<?= $api->api_url.$thumb?>" id="<?= $photo->uid?>" loading="lazy" data-votes="<?=$vote_counts[$photo->uid]?>">
+        </div>
+        <?php
+    }
+} catch (\Exception $e) {
+    die('Fehler: ' . $footer . $e->getMessage() . '</body></html>');
+}
+?>

src/API/LoggerFactory.php

@@ -0,0 +1,38 @@
+<?php
+namespace PhotoPrismUpload\API;
+
+use Monolog\Logger;
+use Monolog\Handler\HandlerInterface;
+
+/** Simple factory to create a logger without needing to set stream handlers every time */
+class LoggerFactory
+{
+    private static $handlers = [];
+
+    /**
+     * Add a new handler which is automatically added to the list of handlers
+     *  for all _future_ loggers
+     *
+     * @param HandlerInterface $handler The handler to add
+     *
+     * @return void
+     */
+    public static function addHandler(HandlerInterface $handler): void
+    {
+        self::$handlers[] = $handler;
+    }
+
+    /**
+     * Create a new Logger with the specified name
+     *
+     * @param string $name
+     *
+     * @return Logger
+     */
+    public static function create(string $name): Logger
+    {
+        $l = new Logger($name);
+        $l->setHandlers(self::$handlers);
+        return $l;
+    }
+}

src/API/PhotoPrism.php

@@ -8,35 +8,85 @@ use Psr\Log\LoggerInterface;
 use PhotoPrismUpload\Exceptions\NetworkException;
 use PhotoPrismUpload\Exceptions\AuthenticationException;
 use PhotoPrismUpload\Entities\Album;
+use PhotoPrismUpload\Entities\Photo;
 
+/**
+ * The main API class to interface with PhotoPrism
+ */
 class PhotoPrism
 {
-    protected string $base_url = 'https://photos.phlaym.net';
+    /** @var string $base_url Base URL of the PhotoPrism instance */
-    protected string $api_url = '';
+    public string $base_url = 'https://photos.phlaym.net';
+
+    /** @var string $api_url API URL of the PhotoPrism instance */
+    public string $api_url = '';
+
+    /** @var string|null $user_id Id of the currently logged in user */
+    protected ?string $user_id = null;
+
+    /** @var string|null $session_id Session id of the currently logged in user */
     protected ?string $session_id = null;
+
+    /** @var string|null $download_token Token for downloading files */
+    protected ?string $download_token = null;
+
+    /** @var string|null $preview_token Token for thumbnails files */
+    protected ?string $preview_token = null;
+
+    /** @var array $config Configuration options */
     protected array $config;
+
+    /** @var LoggerInterface $logger Logger object */
     protected LoggerInterface $logger;
 
-    public function __construct(
+    /**
-        array $config,
+     * Creates a new Photoprism API object from the configuration
-        ?string $log_path = null
+     *
-    ) {
+     * @param array $config Configuration dictionary
-        $this->api_url = $this->base_url.'/api/v1';
+     * @param string|null $log_path Path where the log files end up in.
+     *      Will be set to `$log_path = __DIR__.'/logs/log.log';` if empty.
+     *
+     * @return void
+     */
+    public function __construct(array $config, ?string $log_path = null)
+    {
         $this->config = $config;
-        $this->logger = new Logger('PhotoPrismUpload');
         if (empty($log_path)) {
-            $log_path = __DIR__.'/logs/log.log';
+            $log_path = __DIR__ . '/logs/log.log';
         }
-        $handler = new RotatingFileHandler($log_path, 5, Logger::DEBUG, true);
+        if (isset($config['baseUrl'])) {
-        $this->logger->pushHandler($handler);
+            $this->base_url = $config['baseUrl'];
+        }
+        $this->api_url = $this->base_url . '/api/v1';
+        LoggerFactory::addHandler(
+            new RotatingFileHandler($log_path, 5, Logger::DEBUG, true)
+        );
+        $this->logger = LoggerFactory::create('PhotoPrismUpload');
         if (isset($_SESSION['pp_sessionid'])) {
             $this->session_id = $_SESSION['pp_sessionid'];
+            $this->preview_token = $_SESSION['pp_preview_token'];
+            $this->download_token = $_SESSION['pp_download_token'];
+            $this->user_id = $_SESSION['pp_userid'];
         }
     }
 
+    /**
+     * Parse headers from a cURL HTTP response.
+     * Returns an array with the keys `headers` and `content`.
+     * The former is an array containing the headers (header name as key, value as value).
+     * The latter is a string with the body of the response
+     *
+     * @param string $response The complete response, containing the headers and body
+     *
+     * @return array
+     */
     private function parseHeaders(string $response): array
     {
         $response = explode("\r\n\r\n", $response, 2);
+        if (count($response) === 3) {
+            $dropped = array_shift($response);
+            $this->logger->warning('Dropping start of response:' . $dropped);
+        }
         $headers = $response[0];
         if ($headers === 'HTTP/1.1 100 Continue') {
             $response = explode("\r\n\r\n", $response[1], 2);
@@ -57,19 +107,32 @@ class PhotoPrism
             if (count($header) < 2) {
                 continue;
             }
-            list($k,$v) = $header;
+            list($k, $v) = $header;
             $header_arr[$k] = $v;
         }
         return ['headers' => $header_arr, 'content' => $content];
     }
 
+    /**
+     * Sends a HTTP request using cURL
+     * Returns the body of the response
+     *
+     * @param string $method -The HTTP method to use
+     * @param string $path The HTTP request path without the API URL
+     * @param array $data Request data to send
+     * @param string $content_type Content-Type to use
+     *
+     * @throws NetworkException on failure
+     *
+     * @return string The response body
+     */
     private function makeRequest(
         string $method,
         string $path,
         array $data = [],
         string $content_type = 'application/json'
     ): string {
-        $url = $this->api_url.$path;
+        $url = $this->api_url . $path;
         $method = strtolower($method);
         $query_data = [];
         $headers = [];
@@ -87,57 +150,85 @@ class PhotoPrism
 
             $ch = curl_init();
             if ($method === 'get' && !empty($query_data)) {
-                $url .= '?'.$query_data;
+                $url .= '?' . $query_data;
             }
             if ($method !== 'get') {
-                $headers[] = 'Content-Type: '.$content_type;
+                $headers[] = 'Content-Type: ' . $content_type;
             }
 
             if (!empty($this->session_id)) {
                 $headers[] = 'X-Session-Id: ' . $this->session_id;
             }
-            $this->logger->info($method .' request to ' . $url);
+            $this->logger->info($method . ' request to ' . $url);
             $this->logger->debug('Headers ' . json_encode($headers));
             $this->logger->debug('postfields data ' . json_encode($data));
             $this->logger->debug('postfields ' . json_encode($query_data));
 
             curl_setopt($ch, CURLOPT_URL, $url);
-            curl_setopt($ch, CURLOPT_POST, $method !== 'get');
+            curl_setopt($ch, CURLOPT_POST, $method !== 'get' && $method !== 'put');
+            if ($method === 'put') {
+                curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'PUT');
+            }
             curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
             curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
             curl_setopt($ch, CURLOPT_HEADER, true);
             curl_setopt($ch, CURLINFO_HEADER_OUT, true);
+            curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
             if ($method !== 'get' && !empty($query_data)) {
                 curl_setopt($ch, CURLOPT_POSTFIELDS, $query_data);
             }
             $output = curl_exec($ch);
 
-            $request = curl_getinfo($ch, CURLINFO_HEADER_OUT);
             $http_status = curl_getinfo($ch, CURLINFO_HTTP_CODE);
 
             if ($output === false) {
-                throw new NetworkException("Error sending request to " . $url, 0);
+                throw new NetworkException(
+                    'Error sending request to ' . $url,
+                    0
+                );
             }
             if (empty($output) || $output === false) {
-                $e = new NetworkException("No answer from" . $url, 0);
+                $e = new NetworkException('No answer from' . $url, 0);
-                $this->logger->error("Error sending request", ['Exception' => $e]);
+                $this->logger->error(
+                    'Error sending request. No answer from server',
+                    [
+                        'Exception' => print_r($e, true),
+                    ]
+                );
                 throw $e;
             }
             if ($http_status === 0) {
                 throw new NetworkException('Unable to connect to API ' . $url);
             }
             if ($http_status >= 400) {
-                throw new NetworkException('Invalid response ' . $url . ': ' . $http_status);
+                throw new NetworkException(
+                    'Invalid response ' . $url . ': ' . $http_status
+                );
             }
             $result = $this->parseHeaders($output);
         } catch (\Exception $e) {
-            $this->logger->error("Error sending request", ['Exception' => $e]);
+            $this->logger->error('Error sending request', [
-            throw new NetworkException("Error sending request to " . $url, 0, $e);
+                'Exception' => print_r($e, true),
+            ]);
+            throw new NetworkException(
+                'Error sending request to ' . $url,
+                0,
+                $e
+            );
         }
         return $result['content'];
     }
 
-    public function login(bool $force = false)
+    /**
+     * Log in to PhotoPrism.
+     * If already logged in nothing happens.
+     * No check whether the session is still valid is performed
+
+     * @throws AuthenticationException on failure
+     *
+     * @param bool $force -Force re-login even if already logged in
+     */
+    public function login(bool $force = false): void
     {
         if (!empty($this->session_id) && !$force) {
             $this->logger->info('Skipping login, already logged in');
@@ -154,36 +245,65 @@ class PhotoPrism
             throw new AuthenticationException($response['error']);
         }
         $this->session_id = $response['id'];
+        $this->download_token = $response['config']['downloadToken'];
+        $this->preview_token = $response['config']['previewToken'];
+        $this->user_id = $response['user']['UID'];
         $_SESSION['pp_sessionid'] = $this->session_id;
-        $this->logger->debug('Session ID: ' . $this->session_id);
+        $_SESSION['pp_preview_token'] = $this->preview_token;
+        $_SESSION['pp_download_token'] = $this->download_token;
+        $_SESSION['pp_userid'] = $this->user_id;
+        $this->logger->debug(
+            'Session ID: ' .
+                $this->session_id .
+                ', preview token: ' .
+                $this->preview_token
+        );
     }
 
+    /**
+     * Fetches albums from PhotoPrism
+
+     * @throws NetworkException on failure
+     *
+     * @param int $count -Maximum amount of albums to fetch
+     * @param int $offset -Number of albums to skip
+     * @return Album[]
+     */
     public function getAlbums(int $count = 1000, int $offset = 0): array
     {
         $data = [
             'count' => $count,
             'offset' => $offset,
-            'type' => 'album'
+            'type' => 'album',
         ];
         $res = $this->makeRequest('GET', '/albums', $data, 'text/plain');
         $response = json_decode($res, true);
         if (!empty($response['error'])) {
             throw new NetworkException($response['error']);
         }
-        $albums = array_map(
+        $albums = array_map(function ($entry) {
-            function ($entry) {
+            return new Album($entry);
-                return new Album($entry);
+        }, $response);
-            },
-            $response
-        );
         $this->logger->debug('Albums' . json_encode($albums));
         return $albums;
     }
 
-    public function getAlbumsByTokens(array $tokens, int $count = 1000, int $offset = 0): array
+    /**
-    {
+     * Fetches albums from PhotoPrism which can be viewed with the provided tokens
+
+     * @throws NetworkException on failure
+     * @param string[] $tokens -A list of tokens by which the albums are filtered
+     * @param int $count -Maximum amount of albums to fetch
+     * @param int $offset -Number of albums to skip
+     * @return Album[]
+     */
+    public function getAlbumsByTokens(
+        array $tokens,
+        int $count = 1000,
+        int $offset = 0
+    ): array {
         $this->logger->debug('getAlbumsByToken');
-        $albums = $this->getAlbums($count, 0);
+        $albums = $this->getAlbums($count, $offset);
         $visibleAlbums = [];
         foreach ($albums as $album) {
             $token = $this->getAlbumToken($album);
@@ -191,7 +311,9 @@ class PhotoPrism
             if ($token != null && in_array($album->token, $tokens)) {
                 $visibleAlbums[] = $album;
             } else {
-                $this->logger->debug('Skipping album without access: ' . $album->title);
+                $this->logger->debug(
+                    'Skipping album without access: ' . $album->title
+                );
             }
         }
 
@@ -199,42 +321,173 @@ class PhotoPrism
         return $visibleAlbums;
     }
 
+    /**
+     * Fetches an album from PhotoPrism which can be viewed with the provided token
+
+     * @throws NetworkException on failure
+     * @param string $token -A token by which the albums are filtered
+     * @return Album|null
+     */
+    public function getAlbumByToken(string $token): ?Album
+    {
+        $this->logger->debug('getAlbumByToken');
+        $albums = $this->getAlbumsByTokens([$token]);
+        if (empty($albums)) {
+            $this->logger->debug('Could not find album for token' . $token);
+            return null;
+        }
+        $this->logger->debug('getAlbumByToken done');
+        return $albums[0];
+    }
+
+    /**
+     * Fetches the secret token of an album
+
+     * @throws NetworkException on failure
+     *
+     * @param Album $album -The album which's toke should be fetched
+     * @return string|null Album token or null if the album is private
+     */
     public function getAlbumToken($album): ?string
     {
         $uid = is_string($album) ? $album : $album->uid;
         $res = $this->makeRequest('GET', '/albums/' . $uid . '/links');
+        $this->logger->debug('Token response: ' . $res);
+        /** @var array $response */
         $response = json_decode($res, true)[0];
         if (!empty($response['error'])) {
             throw new NetworkException($response['error']);
         }
-        $this->logger->debug('Token response: ' . $res);
+        if (!array_key_exists('Token', $response)) {
-        if (!in_array('Token', $response)) {
             return null;
         }
         return $response['Token'];
     }
 
-    public function uploadPhotos(?string $album = null)
+    /**
+     * Upload photos, optionally add them to a specific album
+
+     * @throws NetworkException on failure
+     * @param string|null $album -The album uid to which the photos should be aded
+     */
+    public function uploadPhotos(?string $album = null): array
     {
+        $albums = empty($album) ? [] : [$album];
+        $import_data = ['albums' => $albums];
+
         $path = time();
-        $url = '/upload/'.$path;
+        $url = '/users/' . $this->user_id . '/upload/' . $path;
-        $import_url = '/import'.$url;
+        $hashes = [];
-        foreach ($_FILES['files']['tmp_name'] as $key => $value) {
+        $this->logger->info('Uploading ' . json_encode($_FILES));
+        foreach (array_keys($_FILES['files']['tmp_name']) as $key) {
             $file_tmpname = $_FILES['files']['tmp_name'][$key];
+            if (empty($file_tmpname)) {
+                $this->logger->warning('file tmp_name is empty. All file info: ' . json_encode($_FILES));
+                continue;
+            }
             $this->logger->info('Uploading ' . $file_tmpname . ' to ' . $url);
+            $hashes[] = sha1_file($file_tmpname);
             $filename = basename($_FILES['files']['name'][$key]);
-            $cFile = curl_file_create($file_tmpname, $_FILES['files']['type'][$key], $filename);
+            $cFile = curl_file_create(
+                $file_tmpname,
+                $_FILES['files']['type'][$key],
+                $filename
+            );
 
             $data = ['files' => $cFile];
-            $res = $this->makeRequest('POST', $url, $data, 'multipart/form-data');
+            $res = $this->makeRequest(
+                'POST',
+                $url,
+                $data,
+                'multipart/form-data'
+            );
             $this->logger->info('Upload result: ' . $res);
+            $this->logger->info('Importing files');
+            $res = $this->makeRequest(
+                'PUT',
+                $url,
+                $import_data
+            );
+            $this->logger->info('Import result: ' . $res);
         }
+        return $hashes;
+    }
 
-        $this->logger->info('Importing files');
+    public function getByHash(string $hash): ?Photo
-        $albums = empty($album) ? [] : [$album];
+    {
+        $this->logger->debug('getByHash');
 
-        $import_data = ["move" => true, "albums" => $albums];
+        $data = [
-        $res = $this->makeRequest('POST', $import_url, $import_data);
+            'q' => 'hash:' . $hash,
-        $this->logger->info('Import result: ' . $res);
+            'count' => 1,
+            'offset' => 0
+        ];
+        $res = $this->makeRequest('GET', '/photos', $data, 'text/plain');
+        $this->logger->debug('getByHash response: ' . $res);
+        $response = json_decode($res, true);
+        if (!empty($response['error'])) {
+            throw new NetworkException($response['error']);
+        }
+        if (empty($response)) {
+            return null;
+        }
+        $photo = new Photo($response[0]);
+        $photo->thumbnail_token = $this->preview_token;
+        $this->logger->debug('getByHash photo: ' . json_encode($photo));
+        return $photo;
+    }
+
+    public function updatePhotoDetails(Photo $photo, array $updatedDetails): void
+    {
+        $updatedDetails['PhotoID'] = $photo->id;
+        foreach ($updatedDetails as $key => $value) {
+            $details[$key] = $value;
+        }
+        $res = $this->makeRequest('PUT', '/photos/' . $photo->uid, ['Details' => $details]);
+        $this->logger->debug('updatePhotoDetails response: ' . json_encode($res));
+    }
+
+    /**
+     * Retrieves the photos of an album
+
+     * @throws NetworkException on failure
+     * @param Album $album - The album to which the photos should be loaded
+     * @param int $count - How many photos should be loaded
+     * @param int $offset - Offset for paging
+     * @return Photo[] - Photos in the album
+     */
+    public function getAlbumPhotos(
+        Album $album,
+        int $count = 60,
+        int $offset = 0
+    ): array {
+        $this->logger->debug('getAlbumPhotos');
+        $data = [
+            'album' => $album->uid,
+            'count' => $count,
+            'offset' => $offset,
+        ];
+        $res = $this->makeRequest('GET', '/photos', $data, 'text/plain');
+        $response = json_decode($res, true);
+        if (!empty($response['error'])) {
+            throw new NetworkException($response['error']);
+        }
+        $this->logger->debug('getAlbumPhotos response');
+        $photos = array_map(function ($entry) {
+            $photo = new Photo($entry);
+            $photo->thumbnail_token = $this->preview_token;
+            return $photo;
+        }, $response);
+        $this->logger->info('Got photos:' . json_encode($photos));
+        $photos = array_filter($photos, function ($obj) {
+            static $idList = [];
+            if (in_array($obj->uid, $idList)) {
+                return false;
+            }
+            $idList[] = $obj->uid;
+            return true;
+        });
+        $this->logger->info('unique photos:' . json_encode($photos));
+        return $photos;
     }
 }

src/Entities/Album.php

@@ -1,20 +1,54 @@
 <?php
 namespace PhotoPrismUpload\Entities;
 
-use Monolog\Logger;
+use PhotoPrismUpload\API\LoggerFactory;
+use Psr\Log\LoggerInterface;
 
+/** A PhotoPrism Album */
 class Album
 {
+    /** @var string $uid Unique Id of the album */
     public string $uid = '';
+
+    /** @var string $slug URL slug of the album */
     public string $slug = '';
+
+    /** @var string $title Title of the album */
     public string $title = '';
+
+    /** @var string|null $token Secret token of the album. Needs to be set by the API */
     public ?string $token = null;
 
-    public function __construct(
+    /** @var LoggerInterface $logger Logger object */
-        array $response
+    protected LoggerInterface $logger;
-    ) {
+
+    /**
+     * Creates a new album from the api response
+     *
+     * @param array $response Photoprism API response containing an album object
+     *
+     * @return void
+     */
+    public function __construct(array $response)
+    {
         $this->uid = $response['UID'];
         $this->slug = $response['Slug'];
         $this->title = $response['Title'];
+        $this->logger = LoggerFactory::create('PhotoPrismUpload.Album');
+    }
+
+    /**
+     * Gets the URL path for this album.
+     * Starts with a leading /
+     * Returns null if the album's token is not set
+     *
+     * @return string|null
+     */
+    public function getUrlPath(): ?string
+    {
+        if (empty($this->token)) {
+            return null;
+        }
+        return "/s/{$this->token}/{$this->slug}";
     }
 }

src/Entities/Photo.php

@@ -0,0 +1,66 @@
+<?php
+namespace PhotoPrismUpload\Entities;
+
+use PhotoPrismUpload\API\LoggerFactory;
+
+/** A PhotoPrism Photo */
+class Photo
+{
+
+    /** @var string $thumbnail_token Token for fetching the thumbnail*/
+    public string $thumbnail_token = '';
+
+    /** @var string $uid Unique Id of the photo */
+    public string $uid = '';
+
+    /** @var string $id Id of the photo */
+    public int $id = 0;
+
+    /** @var string $type Type of the photo (image, video, etc) */
+    public string $type = '';
+
+    public string $fileUID;
+    public string $fileRoot;
+    public string $fileName;
+    public string $hash;
+    public int $width;
+    public int $height;
+
+    public array $files;
+
+    public array $details;
+
+    /**
+     * Creates a new photo from the api response
+     *
+     * @param array $response Photoprism API response containing a photo object
+     *
+     * @return void
+     */
+    public function __construct(
+        array $response
+    ) {
+        $this->uid = $response['UID'];
+        $this->id = intval($response['ID']);
+        $this->type = $response['Type'];
+        $this->fileUID = $response['FileUID'];
+        $this->fileRoot = $response['FileRoot'];
+        $this->fileName = $response['FileName'];
+        $this->hash = $response['Hash'];
+        $this->width = intval($response['Width']);
+        $this->height = intval($response['Height']);
+        $this->logger = LoggerFactory::create('PhotoPrismUpload.Photo');
+        $this->details = $response;
+    }
+
+    /**
+     * Gets the thumbnail URL path for this image.
+     * Starts with a leading /
+     *
+     * @return string
+     */
+    public function getThumbnailUrl(string $size = 'tile_500'): string
+    {
+        return "/t/{$this->hash}/{$this->thumbnail_token}/{$size}";
+    }
+}

vote-gallery.php

@@ -0,0 +1,110 @@
+<?php
+session_start();
+
+/** require autoloading to manage namespaces */
+require __DIR__ . '/vendor/autoload.php';
+
+use PhotoPrismUpload\API\PhotoPrism;
+use PhotoPrismUpload\Entities\Album;
+
+?>
+<html>
+    <head>
+        <title>Collagen Abstimmung</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta charset="utf-8">
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <script src="vote.js"></script>
+        <link href="vote.css" rel="stylesheet">
+    </head>
+    <body>
+<?php
+
+$footer = '</body></html><footer style="position: fixed;bottom: 0;left: 0;">'
+.'<a href="/git/phlaym/photoprismupload">Ich bin Open Source</a></footer>';
+
+/** @var array $config configuration options */
+$config = require(__DIR__ . '/config.php');
+
+/** @var PhotoPrism $api API object to interface with PhotoPrism */
+$api = new PhotoPrism($config);
+
+/** @var Album[] $albums List of PhotoPrism albums */
+$albums = [];
+try {
+    $api->login();
+} catch (\Exception $e) {
+    die('Fehler: ' . $e->getMessage().$footer.'</body></html>');
+}
+
+/** @var string $token Tokens for which album(s) are visible in the dropdown */
+$token = $_GET['token'];
+
+/** @var int $page Page number of photos to load */
+$page = intval($_GET['page'] ?? 1);
+
+/** @var int $count Number of pictures to load */
+$count = intval($_GET['count'] ?? 50);
+
+/** @var int $offset Tokens for which album(s) are visible in the dropdown */
+$offset = ($page - 1) * $count;
+
+/** @var string $album_url URL path to the selected album */
+$album_url = '/';
+
+$page_sizes = array_values(array_unique([10, 20, 50, 100, $count]));
+sort($page_sizes);
+$link_class = $page === 1 ? 'pageLink disabled' : 'pageLink';
+
+try {
+    $album = $api->getAlbumByToken($token);
+    if ($album === null) {
+        die('Album nicht gefunden' . $footer . '</body></html>');
+    }
+    $photos = $api->getAlbumPhotos($album, $count, $offset);
+    ?>
+    <div>
+        <input type="text" placeholder="Name" name="name" id="nameInput" style="margin: 0 0 0 8px">
+        <button onclick="loadVotes()">OK</button>
+        <a class="<?=$link_class?>" href="vote-gallery.php?token=<?=$token?>&count=<?=$count?>&page=1"><<</a>
+        <a class="<?=$link_class?>" href="vote-gallery.php?token=<?=$token?>&count=<?=$count?>&page=<?=$page-1?>"><</a>
+        Seite <?=$page?>
+        <a class="pageLink" href="vote-gallery.php?token=<?=$token?>&count=<?=$count?>&page=<?=$page+1?>">></a>
+        <select>
+            <?php
+            foreach ($page_sizes as $current_page_size) {
+                $selected_string = $current_page_size === $count ? 'selected' : '';
+                echo '<option '.$selected_string.'>'.$current_page_size.'</option>';
+            }
+            ?>
+        </select> pro Seite
+    </div>
+    <?php
+    foreach ($photos as $photo) {
+        $thumb = $photo->getThumbnailUrl();?>
+        <div class="photowrapper">
+            <img src="<?= $api->api_url.$thumb?>" id="<?= $photo->uid?>" loading="lazy">
+            <div class="votewrapper">
+                <button value="1" onclick="vote(this)" class="voteButton" data-uid="<?= $photo->uid?>" disabled>
+                    👍 Dafür
+                </button>
+                <button value="0" onclick="vote(this)" class="voteButton" data-uid="<?= $photo->uid?>" disabled>
+                    😶 Neutral
+                </button>
+                <button value="-1" onclick="vote(this)" class="voteButton" data-uid="<?= $photo->uid?>" disabled>
+                    👎 Dagegen
+                </button>
+            </div>
+        </div>
+        <?php
+    }
+} catch (\Exception $e) {
+    die('Fehler: ' . $footer . $e->getMessage() . '</body></html>');
+}
+?>
+<div>
+    <a class="<?=$link_class?>" href="vote-gallery.php?token=<?=$token?>&count=<?=$count?>&page=1"><<</a>
+    <a class="<?=$link_class?>" href="vote-gallery.php?token=<?=$token?>&count=<?=$count?>&page=<?=$page-1?>"><</a>
+    Seite <?=$page?>
+    <a class="pageLink" href="vote-gallery.php?token=<?=$token?>&count=<?=$count?>&page=<?=$page+1?>">></a>
+</div>

vote.css

@@ -0,0 +1,52 @@
+:root {
+  --main-bg-color: white;
+  --main-text-color: #333333;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --main-bg-color: #333333;
+    --main-text-color: white;
+  }
+}
+
+body {
+    background-color: var(--main-bg-color);
+    color: var(--main-text-color);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Oxygen-Sans, Ubuntu,
+            Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
+
+}
+
+button {
+    padding: 4px;
+}
+
+img {
+    display: block;
+}
+
+.photowrapper {
+    margin: 8px;
+    display: inline-block;
+}
+
+.votewrapper  {
+    margin: auto;
+    display: flex;
+    justify-content: center;
+}
+
+a.disabled, a.disabled:visited {
+    pointer-events: none;
+    color: rgb(163, 163, 163);
+    cursor: not-allowed;
+}
+
+.pageLink {
+    color: orange;
+}
+
+.pageLink:visited {
+    color: rgb(195, 0, 255);
+}

vote.js

@@ -0,0 +1,41 @@
+async function vote(button) {
+    console.log(button);
+    const name = document.getElementById('nameInput').value;
+    const data = new FormData();
+    data.append("name", name);
+    data.append("vote", button.value);
+    data.append("uid", button.dataset.uid);
+    const response = await fetch('vote.php', { method: "POST", body: data });
+    button.disabled = true;
+    button.parentElement
+    .querySelectorAll('.voteButton')
+    .forEach(b => {
+        b.disabled = b.value === button.value;
+    });
+}
+
+async function loadVotes() {
+    const name = document.getElementById('nameInput').value;
+    localStorage.setItem('name', name);
+    const response = await fetch('vote.php?' + new URLSearchParams({
+        name: name
+    }));
+    const result = await response.json();
+    console.log(result);
+    document
+    .querySelectorAll('.voteButton')
+    .forEach(b => {
+        b.disabled = b.dataset.uid in result && b.value == result[b.dataset.uid];
+    });
+}
+
+window.addEventListener('DOMContentLoaded', async (event) => {
+    console.log('DOMContentLoaded');
+    const loadedName = localStorage.getItem('name');
+    console.log(loadedName);
+    if (loadedName) {
+        const nameInput = document.getElementById('nameInput');
+        nameInput.value = loadedName;
+        await loadVotes();
+    }
+});

vote.php

@@ -0,0 +1,30 @@
+<?php
+$votes_file = 'votes.json';
+
+if (isset($_GET['name'])) {
+    $name = $_GET['name'];
+    $contents = file_get_contents($votes_file);
+    if ($contents === false) {
+        $contents = '{}';
+    }
+    $contents = json_decode($contents, true);
+    $data = $contents[$name] ?? [];
+    header('Content-Type: application/json; charset=utf-8');
+    die(json_encode($data));
+} elseif (isset($_POST['name']) && isset($_POST['uid']) && isset($_POST['vote'])) {
+    $name = $_POST['name'];
+    $contents = file_get_contents($votes_file);
+    if ($contents === false) {
+        $contents = '{}';
+    }
+    $contents = json_decode($contents, true);
+    $data = $contents[$name] ?? [];
+    $data[$_POST['uid']] = $_POST['vote'];
+    $contents[$name] = $data;
+    file_put_contents($votes_file, json_encode($contents));
+    header('HTTP/1.1 204 No Content');
+    die();
+} else {
+    header('HTTP/1.1 400 Bad Request');
+    die();
+}

votes.json

@@ -0,0 +1 @@
+{"":{"pra15px12nephjox":"1"},"Max":{"pra15px12nephjox":"1","pra15pf3bal4owcz":"-1","pra15oq302x3jkuz":"1","pra15nj2z2ludgom":"1","pr354wv3w00i7czq":"1","pr354x42wpbkkg7m":"1","pr354z62mo0pncoz":"1","pr9mmge3mws6j0rw":"1","pr354yv3323z8b3z":"1","pr354wnz5nl70u4v":"1","pr354we11aqlpp4w":"1","pr354v03myo2bo7b":"1","pr354v63s8rslcv9":"1","pr354vp2ac5w1475":"1","pr354vs27id73evj":"1","pr354vwa8rws201t":"1","pra15okcu3t5ob18":"-1","pra15no38usadrog":"1","pr354x99sy2hweha":"-1","pr354wz2t3pdxu96":"1"},"Tanja":{"pra15px12nephjox":"-1","pra15pu3vm33tk8q":"-1","pra15pn12aqtap4o":"0","pra15pf3bal4owcz":"-1","pra15p92aj8kop1p":"0","pra15p43fyu1terq":"1","pra15ox3hmtsdz3l":"-1","pra15oq302x3jkuz":"1","pra15okcu3t5ob18":"0","pra15od10vgdxzrb":"1","pra15o6zv5tgetvk":"-1","pra15nz2zm6knku7":"-1","pra15nuvxk0zmeh9":"-1","pra15no38usadrog":"-1","pra15nj2z2ludgom":"1","pra15nd3ov8vazx7":"1","pra15n3y8fe0petq":"-1","pra15mw24h20rl1a":"1","pr9mmge3mws6j0rw":"1","pr354z62mo0pncoz":"-1","pr354z11al5w7r7g":"-1","pr354yv3323z8b3z":"-1","pr354yn28trvqtyy":"-1","pr354yi4avhp502d":"-1","pr354yc26ml4vbae":"-1","pr354y8edf9t34mj":"1","pr354y14maa7029f":"1","pr354xy2bhnte2gq":"-1","pr354xvtxuexra59":"1","pr354xl3gvk4amup":"-1","pr354xc1yyqjiciw":"-1","pr354x99sy2hweha":"-1","pr354x42wpbkkg7m":"1","pr354wz2t3pdxu96":"1","pr354wv3w00i7czq":"1","pr354wr25rtuux68":"1","pr354wnz5nl70u4v":"1","pr354wj2ph8qjcwg":"1","pr354we11aqlpp4w":"-1","pr354w93pprqutov":"-1","pr354w62c5g8t1po":"1","pr354vz2dnwjdm1r":"1","pr354vwa8rws201t":"-1","pr354vs27id73evj":"-1","pr354vp2ac5w1475":"1","pr354v63s8rslcv9":"0","pr354v03myo2bo7b":"0","pr354uovlc3coazv":"-1"},"Colin":{"pra15px12nephjox":"1","pra15pu3vm33tk8q":"-1","pra15pn12aqtap4o":"1","pra15pf3bal4owcz":"1","pra15p92aj8kop1p":"1","pra15p43fyu1terq":"0","pra15ox3hmtsdz3l":"0","pra15oq302x3jkuz":"1","pra15okcu3t5ob18":"0","pra15od10vgdxzrb":"1","pra15o6zv5tgetvk":"0","pra15nz2zm6knku7":"1","pra15nuvxk0zmeh9":"-1","pra15no38usadrog":"0","pra15nj2z2ludgom":"1","pra15nd3ov8vazx7":"1","pra15n3y8fe0petq":"-1","pra15mw24h20rl1a":"1","pr9mmge3mws6j0rw":"0","pr354z62mo0pncoz":"1","pr354z11al5w7r7g":"1","pr354yv3323z8b3z":"1","pr354yn28trvqtyy":"1","pr354yi4avhp502d":"1","pr354yc26ml4vbae":"1","pr354y8edf9t34mj":"1","pr354y14maa7029f":"1","pr354xy2bhnte2gq":"-1","pr354xvtxuexra59":"1","pr354xl3gvk4amup":"-1","pr354xc1yyqjiciw":"-1","pr354x99sy2hweha":"-1","pr354x42wpbkkg7m":"1","pr354wz2t3pdxu96":"0","pr354wv3w00i7czq":"1","pr354wr25rtuux68":"1","pr354wnz5nl70u4v":"0","pr354wj2ph8qjcwg":"0","pr354we11aqlpp4w":"-1","pr354w93pprqutov":"-1","pr354w62c5g8t1po":"0","pr354vz2dnwjdm1r":"1","pr354vwa8rws201t":"0","pr354vs27id73evj":"1","pr354vp2ac5w1475":"1","pr354v63s8rslcv9":"1","pr354v03myo2bo7b":"1","pr354uovlc3coazv":"1"},"Claraaa":{"pra15px12nephjox":"1","pra15pu3vm33tk8q":"0","pra15pn12aqtap4o":"1","pra15pf3bal4owcz":"1","pra15p92aj8kop1p":"1","pra15p43fyu1terq":"1","pra15ox3hmtsdz3l":"1","pra15oq302x3jkuz":"1","pra15okcu3t5ob18":"0","pra15od10vgdxzrb":"1","pra15o6zv5tgetvk":"-1","pra15nz2zm6knku7":"1","pra15nuvxk0zmeh9":"0","pra15no38usadrog":"0","pra15nj2z2ludgom":"1","pra15nd3ov8vazx7":"1","pra15n3y8fe0petq":"-1","pra15mw24h20rl1a":"0","pr9mmge3mws6j0rw":"0","pr354z62mo0pncoz":"1","pr354z11al5w7r7g":"1","pr354yv3323z8b3z":"1","pr354yn28trvqtyy":"0","pr354yi4avhp502d":"0","pr354yc26ml4vbae":"1","pr354y8edf9t34mj":"0","pr354y14maa7029f":"1","pr354xy2bhnte2gq":"0","pr354xvtxuexra59":"1","pr354xl3gvk4amup":"0","pr354xc1yyqjiciw":"0","pr354x99sy2hweha":"0","pr354x42wpbkkg7m":"1","pr354wv3w00i7czq":"1","pr354wz2t3pdxu96":"1","pr354wr25rtuux68":"1","pr354wnz5nl70u4v":"1"}}