From c7ae73f8ada2f14cada9358cac2b17930dec00ef Mon Sep 17 00:00:00 2001
From: rawbertp <robertp@posteo.at>
Date: Sun, 10 Nov 2019 19:30:22 +0100
Subject: [PATCH] Apply filter on picture taken

Change-Id: I48b47aad2226a8043069af1404b1f16a3bb06722
---
 README.md            |  2 +-
 index.php            |  9 ++++-----
 lib/db.php           |  7 ++++---
 resources/js/core.js | 13 +++++++++----
 4 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index 94b57a6b0..ca5b34307 100644
--- a/README.md
+++ b/README.md
@@ -23,7 +23,7 @@ A Photobooth web interface for Raspberry Pi and Windows.
     - Order pictures in gallery ascending oder descending by picture age.
     - Hide the gallery.
   - Choose between md5- or date-formatted image names.
-  - Choose an image filter before taking a picture.
+  - Choose an image filter after taking a picture.
   - QR-Code to allow downloading pictures from your Photobooth.
   - Pictures can be directly downloaded from the gallery.
   - Print feature.
diff --git a/index.php b/index.php
index 37c6590bb..b9e0bee1a 100644
--- a/index.php
+++ b/index.php
@@ -77,11 +77,6 @@
 				</div>
 				<?php endif; ?>
 
-				<?php if ($config['use_filter']): ?>
-				<a href="#" class="btn imageFilter"><i class="fa fa-magic"></i> <span
-						data-l10n="selectFilter"></span></a>
-				<?php endif; ?>
-
 				<?php if ($config['force_buzzer']): ?>
 				<div id="useBuzzer">
 						<span data-l10n="use_button"></span>
@@ -165,6 +160,10 @@
 					<?php endif; ?>
 				<?php endif; ?>
 
+				<?php if ($config['use_filter']): ?>
+				<a href="#" class="btn imageFilter"><i class="fa fa-magic"></i> <span data-l10n="selectFilter"></span></a>
+				<?php endif; ?>
+
 				<a href="#" class="btn deletebtn"><i class="fa fa-trash"></i> <span data-l10n="delete"></span></a>
 			</div>
 
diff --git a/lib/db.php b/lib/db.php
index 4944cd466..8f398e284 100644
--- a/lib/db.php
+++ b/lib/db.php
@@ -15,9 +15,10 @@ function getImagesFromDB() {
 function appendImageToDB($filename) {
 	$images = getImagesFromDB();
 
-	$images[] = $filename;
-
-	file_put_contents(DB_FILE, json_encode($images));
+	if (!in_array($filename, $images)) {
+		$images[] = $filename;
+		file_put_contents(DB_FILE, json_encode($images));
+	}
 }
 
 function deleteImageFromDB($filename) {
diff --git a/resources/js/core.js b/resources/js/core.js
index 7dfb5f632..9cfb196d8 100644
--- a/resources/js/core.js
+++ b/resources/js/core.js
@@ -185,6 +185,11 @@ const photoBooth = (function () {
         jQuery.post('api/takePic.php', data).done(function (result) {
             console.log('took picture', result);
 
+            // reset filter (selection) after picture was taken
+            imgFilter = config.default_imagefilter;
+            $('#mySidenav .activeSidenavBtn').removeClass('activeSidenavBtn');
+            $('#' + imgFilter).addClass('activeSidenavBtn');
+
             if (result.error) {
                 public.errorPic(result);
             } else if (result.success === 'collage' && (result.current + 1) < result.limit) {
@@ -318,7 +323,7 @@ const photoBooth = (function () {
         const preloadImage = new Image();
         preloadImage.onload = () => {
             resultPage.css({
-                'background-image': `url(${imageUrl})`,
+                'background-image': `url(${imageUrl}?filter=${imgFilter})`,
             });
             resultPage.attr('data-img', filename);
 
@@ -468,14 +473,14 @@ const photoBooth = (function () {
 
     $('.sidenav > div').on('click', function () {
         $('.sidenav > div').removeAttr('class');
-
         $(this).addClass('activeSidenavBtn');
 
         imgFilter = $(this).attr('id');
-
+        const result = {file: $('#result').attr('data-img')};
         if (config.dev) {
-            console.log('Active filter', imgFilter);
+            console.log('Applying filter', imgFilter, result);
         }
+        public.processPic(imgFilter, result);
     });
 
     // Take Picture Button