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

2021-01-23 07:44:06 +01:00 · 2021-01-23 07:44:06 +01:00 · bdeb43cc6f
commit bdeb43cc6f
parent 96a69b7e94
5 changed files with 125 additions and 69 deletions
--- a/approve.php
+++ b/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">Cím:</span><span class="fill-in-content">${image_data["Title"]}</span><br />
-                        <span class="label">Leírás:</span><span class="fill-in-content">${desc}</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">Csoport:</span><input type="text" class="f-author-group-c" name="f_author_group" value="${image_data["AuthorGroup"]}"></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>
--- a/index.php
+++ b/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="upload-popup-inner-container" id="uploadtype">
+    <section class="popup-slider" id="pupslider">
+        <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 style="text-align: center; display: block; margin-top: 130px;">
+        <section class="popup-inner-container" id="uploadform">
+            <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
-            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!
+            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é, 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ó
-            gomb
-            segítségével, továbbá minden képhez leírás, történet csatolható.
+            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 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() {
-        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=/;`;
-    }
+    init_photowall();

    // 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>
--- a/interface.php
+++ b/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);
 }
--- a/js/phw.js
+++ b/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=/;`;
+}
--- a/phw.css
+++ b/phw.css
@ -40,14 +40,13 @@ label {
    text-transform: uppercase;
 }

-section.upload-popup,
 section.popup {
    display: block;
    position: fixed;
-    width: 500px;
-    height: 500px;
-    left: calc(50vw - 250px);
-    top: calc(50vh - 250px);
+    width: 600px;
+    height: 600px;
+    left: calc(50vw - 300px);
+    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;
-    height: 500px;
+    width: 1900px;
+    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;
-    height: 460px;
+    width: 560px;
+    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%;
    }