_      _      _      _      _      _      _      _      _      _      _      _      _   
 _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_ 
(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)
 (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_) 
   _                                                                                   _   
 _( )_                        _                _   _                                 _( )_ 
(_ o _)                      | |              | | (_)                               (_ o _)
 (_,_)    _ __ ___   ___   __| | ___ _ __ __ _| |_ _  ___  _ __                      (_,_) 
   _     | '_ ` _ \ / _ \ / _` |/ _ \ '__/ _` | __| |/ _ \| '_ \                       _   
 _( )_   | | | | | | (_) | (_| |  __/ | | (_| | |_| | (_) | | | |                    _( )_ 
(_ o _)  |_| |_| |_|\___/ \__,_|\___|_|  \__,_|\__|_|\___/|_| |_|                   (_ o _)
 (_,_)                 | |       / _|           | | | |                              (_,_) 
   _       ___ ___   __| | ___  | |_ ___  _ __  | |_| |__   ___                        _   
 _( )_    / __/ _ \ / _` |/ _ \ |  _/ _ \| '__| | __| '_ \ / _ \                     _( )_ 
(_ o _)  | (_| (_) | (_| |  __/ | || (_) | |    | |_| | | |  __/                    (_ o _)
 (_,_)    \___\___/ \__,_|\___| |_| \___/|_|     \__|_| |_|\___|     _       _       (_,_) 
   _         | |                    | |                             (_)     | |        _   
 _( )_     __| |_ __ __ ___      __ | |__   _____  __  ___  ___ _ __ _ _ __ | |_     _( )_ 
(_ o _)   / _` | '__/ _` \ \ /\ / / | '_ \ / _ \ \/ / / __|/ __| '__| | '_ \| __|   (_ o _)
 (_,_)   | (_| | | | (_| |\ V  V /  | |_) | (_) >  <  \__ \ (__| |  | | |_) | |_     (_,_) 
   _      \__,_|_|  \__,_| \_/\_/   |_.__/ \___/_/\_\ |___/\___|_|  |_| .__/ \__|      _   
 _( )_                                                                | |            _( )_ 
(_ o _)                                                               |_|           (_ o _)
 (_,_)                                                                               (_,_) 
   _      _      _      _      _      _      _      _      _      _      _      _      _   
 _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_ 
(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)
 (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_) 

=== This is my attempt at adding a moderation code to the draw box script at https://drawbox.nekoweb.org. It'll prevent the submitted images from automatically being displayed on your website - you'll have to manually approve each submission by setting the variable in your Google Sheet from FALSE to TRUE ===

=== Cobbled together by Fritzi (https://bohemiansultriness.nekoweb.org) ===


### Define a Moderation Field ###

* Add a second "short answer" question in your Google Form and call it "moderated", following the tutorial on https://drawbox.nekoweb.org

* Add a constant for the moderation field in your script. This will be used to mark whether an image is approved or not.

const MODERATION_ENTRY_ID = "entry.xxx"; // Added for moderation field

* Place this line near the other constants at the top of your script:

const GOOGLE_FORM_ID = "xxxx";
const ENTRY_ID = "entry.xxxx";
const MODERATION_ENTRY_ID = "entry.xxx"; // Added for moderation field
const GOOGLE_SHEET_ID = "xxxx";
const DISPLAY_IMAGES = true;


### Include Moderation Status in Form Submission ###

* When submitting the form, include a default value (false) for the moderation status. This ensures all submissions are initially unapproved.

googleFormData.append(MODERATION_ENTRY_ID, "false"); // Added moderation field with default value of "false"

* Locate the section where googleFormData is being prepared for submission (inside the try block of the submit button's event listener). Add this line after appending the image URL (ENTRY_ID):

    const googleFormData = new FormData();
    googleFormData.append(ENTRY_ID, imageUrl);
    googleFormData.append(MODERATION_ENTRY_ID, "false"); // Added moderation field with default value of "false" 


### Fetch and Display Only Approved Images ###

* Modify the function that fetches images from the Google Sheet to display only those marked as approved (moderated).

const isModerated = columns[2].trim().toLowerCase() === "true"; // Check if the image is moderated

if (imgUrl.startsWith("http") && isModerated) { // Only display moderated images
  const div = document.createElement("div");
  div.classList.add("image-container");

  div.innerHTML = `
    <img src="${imgUrl}" alt="drawing">
    <p>${columns[0].trim()}</p>
  `;
  gallery.appendChild(div);
}

* In the fetchImages() function, locate the loop that processes rows from the Google Sheet. Replace or enhance the logic to include this snippet, ensuring only images with a moderation status of "true" are displayed.

* Replace the following part with the code above:

 const gallery = document.getElementById("gallery");
    gallery.innerHTML = "";
    rows.reverse().forEach((row) => {
      const columns = row.split(",");
      if (columns.length < 2) return;

      const timestamp = columns[0].trim();
      const imgUrl = columns[1].trim().replace(/"/g, "");

      if (imgUrl.startsWith("http")) {
        const div = document.createElement("div");
        div.classList.add("image-container");

        div.innerHTML = `
                    <img src="${imgUrl}" alt="drawing">
                    <p>${timestamp}</p>
                `;
        gallery.appendChild(div);
      }