módosítási lehetőség jóváhagyáskor, üdvözlőüzenet mobilon

approve.php

@@ -47,6 +47,25 @@ function set_approval($Image_FileName, $approved)
     return $res; // true ha sikeres, false ha valami hiba történt
 }
 
+// adatok frissítése
+function update_details($Image_FileName, $details)
+{
+    global $dbconn;
+
+    // felhasználótól jött paraméterek ellenőrzése
+    $Image_FileName = $dbconn->real_escape_string($Image_FileName);
+    $author = $dbconn->real_escape_string($details["author"]);
+    $group = strtolower($dbconn->real_escape_string($details["group"]));
+    $title = $dbconn->real_escape_string($details["title"]);
+    $desc = $dbconn->real_escape_string($details["desc"]);
+
+    // jóváhagyás mező beállítása és ellenőrzöttnek jelölés
+    $query = "UPDATE publish_table SET Author='$author', AuthorGroup='$group', Title='$title', Description='$desc' WHERE Image_FileName='$Image_FileName';";
+    $res = $dbconn->query($query);
+
+    return $res; // true ha sikeres, false ha valami hiba történt
+}
+
 // --------------------------------
 
 // munkamenet bekapcsolása, ez minden előtt kell legyen
@@ -98,6 +117,10 @@ if ($logged_in) {
                     echo json_encode(set_approval($_POST["Image_FileName"], $_POST["approved"]));
                 }
                 break;
+            case "update_details":
+                if (isset($_POST["Image_FileName"]) && isset($_POST["details"])) {
+                    echo json_encode(update_details($_POST["Image_FileName"], json_decode($_POST["details"], true)));
+                }
         }
 
         exit(0);
@@ -187,20 +210,19 @@ if ($logged_in) {
                 var row_container = document.createElement('section');
                 row_container.style.paddingLeft = "0.5em";
 
-                // "(nincs)" kiírása, ha ki van hagyva
-                let desc = image_data["Description"] === "" ? "<i>(nincs)</i>" : image_data["Description"];
-
                 row_container.innerHTML = `
                 <hr style="height: 0.5em; border: 0; background-color: lightgray;"/>
                 <img src="ARTWORKS/thumbnails/${image_data["Image_FileName"]}" style="vertical-align: top" />
                 <section style="display: inline-block; margin-left: 1em;">
                     <section style="display: block">
-                        <span class="label">Alkotó:</span><span class="fill-in-content">${image_data["Author"]} <i>(${image_data["AuthorGroup"]})</i></span><br />
+                        <span class="label">Alkotó:</span><span class="fill-in-content" style="margin-right: 0.5em;"><input type="text" class="f-author-c" name="f_author" value="${image_data["Author"]}">,</span>
-                        <span class="label">Cím:</span><span class="fill-in-content">${image_data["Title"]}</span><br />
+                        <span class="label">Csoport:</span><input type="text" class="f-author-group-c" name="f_author_group" value="${image_data["AuthorGroup"]}"></span><br />
-                        <span class="label">Leírás:</span><span class="fill-in-content">${desc}</span><br />
+                        <span class="label">Cím:</span><span class="fill-in-content"><input type="text" class="f-title-c" name="f_title" value="${image_data["Title"]}"></span><br />
+                        <span class="label">Leírás:</span><span class="fill-in-content"><textarea placeholder="(nincs)" class="f-desc-c" style="vertical-align: baseline;" name="f_details">${image_data["Description"]}</textarea></span><br />
                         <span class="label">Feltöltés ideje:</span><span class="fill-in-content">${image_data["TS"]}</span><br />
                     </section>
                     <section style="display: block; margin-top: 1em;">
+                        <section class="btn" id="button_update_details" onclick="update_details(event);" >Frissítés</section>
                         <section class="btn" id="button_approve" onclick="set_approval(event);" >Engedélyez</section>
                         <section class="btn" id="button_hide" onclick="set_approval(event);" >Elutasít</section>
                     </section>
@@ -237,6 +259,38 @@ if ($logged_in) {
                     });
             }
 
+            function update_details(event) {
+                var row_container = event.target.parentElement.parentElement.parentElement;
+                var image_data = row_container.details;
+
+                var artwork_details = {
+                    author: row_container.getElementsByClassName("f-author-c")[0].value,
+                    group: row_container.getElementsByClassName("f-author-group-c")[0].value,
+                    title: row_container.getElementsByClassName("f-title-c")[0].value,
+                    desc: row_container.getElementsByClassName("f-desc-c")[0].value
+                }
+
+                console.log(artwork_details);
+
+                request(
+                    'approve.php',
+                    'POST',
+                    {
+                        action: 'update_details',
+                        Image_FileName: image_data['Image_FileName'],
+                        details: JSON.stringify(artwork_details)
+                    }
+                )
+                    .then(data => {
+                        if (data === 'false') {
+                            alert('Valami nem stimmel, kérlek próbáld újra.');
+                        }
+
+                        // újabb elem betöltése, ha van
+                        fill_table();
+                    });
+            }
+
         </script>
         <style>
             section.settings_container {
@@ -259,7 +313,7 @@ if ($logged_in) {
             span.label {
                 color: var(--LABEL-TCOLOR);
                 text-transform: uppercase;
-                margin-right: 0.5em;
+                /*margin-right: 0.5em;*/
             }
         </style>
     <?php } else { ?>
@@ -299,7 +353,8 @@ if ($logged_in) {
     <section class="login">
         <form method="POST" id="loginform" style="text-align: center; font-weight: bold;">
             <span style="font-size: 20px; color: var(--LABEL-TCOLOR);">Photowall admin-felület</span><br>
-            <input type="password" name="password" placeholder="Jelszó" style="margin-left: 0"/><br style="margin: 0.8em;">
+            <input type="password" name="password" placeholder="Jelszó" style="margin-left: 0"/><br
+                    style="margin: 0.8em;">
             <section class="btn" onclick="o('loginform').submit()">Belépés</section>
         </form>
     </section>

index.php

@@ -33,10 +33,10 @@
 </section>
 
 <!-- FELTÖLTŐABLAK -->
-<section class="upload-popup" id="uploadpup" shown="false">
+<section class="popup" id="uploadpup" shown="false">
     <section class="upload-popup-closebtn" onclick="close_upload_pup();">&boxtimes;</section>
-    <section class="upload-popup-slider" id="pupslider">
+    <section class="popup-slider" id="pupslider">
-        <section class="upload-popup-inner-container" id="uploadtype">
+        <section class="popup-inner-container" id="uploadtype">
             <section style="margin: 3em 0em; text-align: center;">
                 Húzd az ablakra, vagy tallózással töltsd fel a képet!<br><br>
 
@@ -49,17 +49,17 @@
                 <section class="btn" onclick="upload_from_device()">Feltöltés</section>
             </section>
         </section>
-        <section class="upload-popup-inner-container" id="uploadform">
+        <section class="popup-inner-container" id="uploadform">
-            <section style="text-align: center; display: block; margin-top: 130px;">
+            <section style="text-align: center; display: block; margin-top: 190px;">
                 <img src="media/loading.svg" style="width: 148px; height: 148px;"><br>
                 Feltöltés folyamatban...
             </section>
         </section>
-        <section class="upload-popup-inner-container" id="infoform">
+        <section class="popup-inner-container" id="infoform">
             <section style="margin: 0em 0em;">
                 <label for="author">Alkotó:*</label><br>
                 <input type="text" id="author" style="width: 55%;" placeholder="Arthur Dent">
-                <input type="text" id="author_group" style="margin-left: 0.0em; width: 38.5%;"
+                <input type="text" id="author_group" style="margin-left: 0.0em; width: 33%;"
                        placeholder="szürke csoport"><br><br>
                 <label for="imgtitle">Cím:*</label><br>
                 <input type="text" id="imgtitle" style="width: 95%;" placeholder="Negyvenkettő"><br><br>
@@ -74,6 +74,8 @@
             <section style="text-align: right;">
                 <section class="btn" onclick="publish()" id="publishbtn">Mehet!</section>
             </section>
+            <br>
+            <br>
         </section>
     </section>
 </section>
@@ -92,49 +94,33 @@
 
 <!-- ÜDVÖZLŐÜZENET -->
 <section class="popup" id="welcomepup" shown="false">
-    <section class="upload-popup-inner-container">
+    <section class="popup-inner-container">
         <section style="color: var(--LABEL-TCOLOR)">
             Kedves idelágatogató közis, azaz Te!<br>
             <br>
-            Nagy örömmel üdvözlünk a Fotófalon, ahol a számodra kedves, tartalmas, lélekemelő fényképeidet tárhatod a
+            Nagy örömmel köszöntünk a Fotófalon, ahol a számodra kedves, tartalmas, lélekemelő fényképeidet tárhatod a
-            többi közis elé,
+            többi közis elé, vagy, ahol, ha úgy tartja kedved, elmerülhetsz a mások által készített képek böngészésében!
-            vagy, ahol, ha úgy tartja kedved, elmerülhetsz a mások által készített képek böngészésében!
             <br><br>
-            Képet a <i>neved</i>, a <i>csoportod</i> és egy <i>cím</i> megadásával tölthetsz fel a jobbra lent található
+            Képet a <i>neved</i>, a <i>csoportod</i> és egy <i>képcím</i> megadásával tölthetsz fel a jobbra lent található
-            gomb
+            gomb segítségével, továbbá minden képhez leírás, történet csatolható.
-            segítségével, továbbá minden képhez leírás, történet csatolható.
             <br><br>
             Kérünk, ugyan a humoros képektől sem zárkózunk el, alapvetően mégis a feltöltéskor a mélyebb lelki tartalom
             átadására törekedj, így segítve, hogy az oldal a megfelelő célt szolgálja!
             <br><br>
-            <i>Ahogy minden más weboldal, a Fotófal is használ sütiket!</i>
+            <i>Ahogy minden más weboldal, a Fotófal is használ sütiket!</i><br><br>
+            <span style="display: inherit; text-align: right; font-style: italic;">MKK Fotókör, 2021</span>
         </section>
-        <br>
+        <br><br>
         <section style="text-align: center">
             <section class="btn" onclick="confirm_welcome_msg()">Ok, értem!</section>
         </section>
+        <br>
+        <br>
     </section>
 </section>
 
 <script>
-    function open_welcome_msg() {
+    init_photowall();
-        show('welcomepup');
-        blur_page(true);
-    }
-
-    function hide_welcome_msg() {
-        hide('welcomepup');
-        blur_page(false);
-    }
-
-    function confirm_welcome_msg() {
-        hide_welcome_msg();
-
-        // süti mentése
-        let d = new Date();
-        d.setTime(d.getTime() + (7*24*3600*1000));
-        document.cookie = `phw_welcome_confirmed=1; expires=${d.toUTCString()}; path=/;`;
-    }
 
     // ha még nem olvasta el a felhasználó az útmutatót
     if (document.cookie.match("phw_welcome_confirmed") == null) {
@@ -145,9 +131,5 @@
 <!-- TESZTVERZIÓ -->
 <section class="testversion-sign">TESZTVERZIÓ</section>
 
-<script>
-    init_photowall();
-</script>
-
 </body>
 </html>

interface.php

@@ -90,7 +90,7 @@ function verify_group($g)
 {
     // EZ ÍGY NEM JÓ!! EZT LE KELLENE TÖLTENI A KÖZI OLDALÁRÓL!!!
     $groups = ["bíbor", "tejszín", "borostyán", "azúr", "türkiz", "aquamarin", "burgundi", "zafír", "mangó",
-        "levendula", "bambusz", "csipkebogyó", "mustár", "parázs", "áfonya"];
+        "levendula", "bambusz", "csipkebogyó", "mustár", "parázs", "áfonya", "MKK Fotókör"];
 
     return in_array(strtolower($g), $groups);
 }

js/phw.js

@@ -17,17 +17,19 @@ function scroll_enable(on) {
 
 function blur_page(blur) {
     if (blur) {
-        show('blurlayer');
+        show("blurlayer");
         o("display").style.filter = "blur(10px)";
+        scroll_enable(false);
     } else {
-        hide('blurlayer');
+        hide("blurlayer");
         o("display").style.filter = "";
+        scroll_enable(true);
     }
 }
 
 // -----------------------------------------
 
-var slide_unit = 504;
+var slide_unit = 604;
 var slider_id = "pupslider";
 var upload_popup_id = "uploadpup";
 var publish_btn_id = "publishbtn";
@@ -37,7 +39,7 @@ var processing_busy = false; // feldolgozás folyamatban
 
 function determine_sliding_unit() {
     if (window.innerWidth > 600) { // számítógépes megjelenítés
-        slide_unit = 504;
+        slide_unit = 604;
     } else { // mobilos megjelenítés
         slide_unit = ((window.orientation % 90) === 0) ? window.innerWidth : window.innerHeight; // deprecated, de működik...
     }
@@ -204,8 +206,6 @@ function upload_from_device() {
 function open_upload_pup() {
     show(upload_popup_id);
     blur_page(true);
-    let display = o("display");
-    scroll_enable(false);
 
     o("fileselector").value = "";
 }
@@ -214,8 +214,6 @@ function open_upload_pup() {
 function close_upload_pup() {
     hide(upload_popup_id);
     blur_page(false);
-    let display = o("display");
-    scroll_enable(true);
     pup_reset();
 }
 
@@ -756,3 +754,25 @@ function change_viewer_offset(offset, absolute = false) {
     img.style.left = img.offset.x + "px";
     img.style.top = img.offset.y + "px";
 }
+
+// üdvözlőüzenet megnyitása
+function open_welcome_msg() {
+    show("welcomepup");
+    blur_page(true);
+}
+
+// üdvözlőüzenet eltüntetése
+function hide_welcome_msg() {
+    hide("welcomepup");
+    blur_page(false);
+}
+
+// üdvözlőüzenet OK-gomb
+function confirm_welcome_msg() {
+    hide_welcome_msg();
+
+    // süti mentése
+    let d = new Date();
+    d.setTime(d.getTime() + (7*24*3600*1000));
+    document.cookie = `phw_welcome_confirmed=1; expires=${d.toUTCString()}; path=/;`;
+}

phw.css

@@ -40,14 +40,13 @@ label {
     text-transform: uppercase;
 }
 
-section.upload-popup,
 section.popup {
     display: block;
     position: fixed;
-    width: 500px;
+    width: 600px;
-    height: 500px;
+    height: 600px;
-    left: calc(50vw - 250px);
+    left: calc(50vw - 300px);
-    top: calc(50vh - 250px);
+    top: calc(50vh - 300px);
     background-color: var(--PUP-BGCOLOR);
     overflow: hidden;
     border: 1px dashed var(--PUP-BORDERCOLOR);
@@ -55,21 +54,21 @@ section.popup {
     z-index: 10;
 }
 
-section.upload-popup-slider {
+section.popup-slider {
     display: block;
     position: absolute;
-    width: 1600px;
+    width: 1900px;
-    height: 500px;
+    height: 600px;
     background-color: var(--PUP-BGCOLOR);
     left: 0px;
 
     transition: 0.3s ease-in-out;
 }
 
-section.upload-popup-inner-container {
+section.popup-inner-container {
     display: inline-block;
-    width: 460px;
+    width: 560px;
-    height: 460px;
+    height: 560px;
     margin: 10px;
     padding: 10px;
     vertical-align: bottom;
@@ -78,7 +77,7 @@ section.upload-popup-inner-container {
 }
 
 @media only screen and (max-width: 600px) {
-    section.upload-popup {
+    section.popup {
         top: 0;
         left: 0;
         right: 0;
@@ -88,12 +87,12 @@ section.upload-popup-inner-container {
         height: unset;
     }
 
-    section.upload-popup-slider {
+    section.popup-slider {
         width: calc(300% + 100px);
         height: 100%;
     }
 
-    section.upload-popup-inner-container {
+    section.popup-inner-container {
         width: calc(100vw - 40px);
         height: 100%;
     }