From d9e7b354d3d0a4d50d87ffe4c7c627966ed97e44 Mon Sep 17 00:00:00 2001
From: bernardhanna <bernard@matrixinternet.ie>
Date: Fri, 30 Aug 2024 07:51:39 +0100
Subject: [PATCH] readded changes to youtube.blade.php, containers.scss,
 ModerateEvent.vue, and Pagination.vue

---
 .../assets/sass/components/containers.scss    |  65 ++++++++
 resources/js/components/ModerateEvent.vue     |  32 +++-
 resources/js/components/Pagination.vue        | 142 +++++++++---------
 resources/views/static/youtube.blade.php      | 104 ++++++++++++-
 4 files changed, 264 insertions(+), 79 deletions(-)

diff --git a/resources/assets/sass/components/containers.scss b/resources/assets/sass/components/containers.scss
index 790969019..39b5cfe26 100644
--- a/resources/assets/sass/components/containers.scss
+++ b/resources/assets/sass/components/containers.scss
@@ -219,6 +219,71 @@
     flex-direction: row;
   }
 }
+
+.codeweek-youtube-container {
+  width: 100%;
+  border: none;
+  height: 500px;
+  margin: auto;
+  background-color: #000; // Black background as a placeholder
+  position: relative;
+  overflow: hidden;
+
+  .background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: black;
+    color: white;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+    .container {
+      .content {
+        max-width: 90%;
+      }
+    }
+
+    .info {
+      width: 90%;
+      margin: auto;
+
+      .button {
+        button {
+          background-color: #40B5D1;
+          color: white;
+          border: none;
+          padding: 10px 20px;
+          cursor: pointer;
+          font-size: 16px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin: auto;
+
+          &:hover {
+            background: #FE6824;
+          }
+
+          svg {
+            margin-right: 0.5rem;
+          }
+        }
+      }
+    }
+  }
+
+  .remember {
+    input {
+      margin-right: 0.5rem;
+    }
+  }
+}
+
 /* big landscape tablets, laptops, and desktops */
 @media (min-width:1025px) {
   .codeweek-content-grid {
diff --git a/resources/js/components/ModerateEvent.vue b/resources/js/components/ModerateEvent.vue
index d22b3ef28..dbda71b7d 100644
--- a/resources/js/components/ModerateEvent.vue
+++ b/resources/js/components/ModerateEvent.vue
@@ -31,7 +31,7 @@
           </div>
           <div class="modal-body">
             <p class="text-gray-800 text-lg leading-relaxed">This will help the activity organizer to improve their submission.</p>
-            <multiselect v-model="rejectionOption" :options="rejectionOptions" track-by="title" label="title" :close-on-select="true" :preserve-search="false" placeholder="Select a rejection reason" :searchable="false" :allow-empty="false" @input="prefillRejectionText">
+            <multiselect v-model="rejectionOption" :options="displayRejectionOptions" track-by="title" label="title" :close-on-select="true" :preserve-search="false" placeholder="Select a rejection reason" :searchable="false" :allow-empty="false" @input="prefillRejectionText">
               <template #singleLabel="{ option }">{{ option.title }}</template>
             </multiselect>
             <textarea v-model="rejectionText" class="reason-textarea" rows="4" cols="40" placeholder="Reason for rejection"></textarea>
@@ -100,6 +100,36 @@ export default {
       ]
     };
   },
+  computed: {
+    displayRejectionOptions() {
+      return this.rejectionOptions.map(option => {
+        switch (option.title) {
+          case 'moderation.description.title':
+            return {
+              title: "Missing proper descriptions",
+              text: "Please improve the description and describe in more detail what you will do and how your activity relates to coding and computational thinking. Thanks!"
+            };
+          case 'moderation.missing-details.title':
+            return {
+              title: "Missing important details",
+              text: "Provide more details on the activity objectives and goals and how it makes use of technology, coding and critical thinking. Thanks!"
+            };
+          case 'moderation.duplicate.title':
+            return {
+              title: "Duplicate",
+              text: "This seems to be a duplication of another activity taking place at the same time. If it is not please change the description and change the title so that it is clear that the activities are separate. Thanks!"
+            };
+          case 'moderation.not-related.title':
+            return {
+              title: "Not programming related",
+              text: "Provide more information on the activity objectives and goals and how it makes use of technology, coding and critical thinking. Thanks!"
+            };
+          default:
+            return option; // Fallback to the original if no match
+        }
+      });
+    }
+  },
   methods: {
     reRender() {
       if (this.refresh) {
diff --git a/resources/js/components/Pagination.vue b/resources/js/components/Pagination.vue
index a72d1edce..292dd4c4a 100644
--- a/resources/js/components/Pagination.vue
+++ b/resources/js/components/Pagination.vue
@@ -1,87 +1,89 @@
 <template>
-  <nav class="codeweek-pagination" role="navigation" aria-label="pagination">
-    <ul>
-      <li>
-        <a
-          class="back"
-          @click.prevent="changePage(pagination.current_page - 1)"
-          :disabled="pagination.current_page <= 1"
-        >
-          {{ $t('pagination.previous') }}
-        </a>
-      </li>
-      <li v-for="page in pages">
-        <a
-          v-if="pagination.current_page != page"
-          class="page"
-          @click.prevent="changePage(page)"
-        >
-          {{ page }}
-        </a>
-        <a v-else class="page current">
-          {{ page }}
-        </a>
-      </li>
-      <li>
-        <a
-          class="next"
-          @click.prevent="changePage(pagination.current_page + 1)"
-          :disabled="pagination.current_page >= pagination.last_page"
-        >
-          {{ $t('pagination.next') }}
-        </a>
-      </li>
-    </ul>
-  </nav>
+
+        <nav class="codeweek-pagination" role="navigation" aria-label="pagination">
+                <ul>
+                        <li>
+                                <a class="back"
+                                   @click.prevent="changePage(pagination.current_page - 1)"
+                                   :disabled="pagination.current_page <= 1">
+                                        {{$t('pagination.previous')}}
+                                </a>
+                        </li>
+                        <li v-for="page in pages">
+                                <a v-if="pagination.current_page != page"
+                                   class="page"
+                                   @click.prevent="changePage(page)">
+                                        {{ page }}
+                                </a>
+                                <a v-else
+                                   class="page current">
+                                        {{ page }}
+                                </a>
+                        </li>
+                        <li>
+                                <a class="next"
+                                   @click.prevent="changePage(pagination.current_page + 1)"
+                                   :disabled="pagination.current_page >= pagination.last_page">
+                                        {{$t('pagination.next')}}
+                                </a>
+                        </li>
+                </ul>
+        </nav>
+
 </template>
 
 <style>
-.pagination {
-  margin-top: 40px;
-}
+        .pagination {
+                margin-top: 40px;
+        }
 </style>
 
 <script>
-export default {
-  props: ['pagination', 'offset'],
+    export default {
+        props: ['pagination', 'offset'],
 
-  methods: {
-    isCurrentPage(page) {
-      return this.pagination.current_page === page;
-    },
+        methods: {
+            isCurrentPage(page) {
+                return this.pagination.current_page === page;
+            },
 
-    changePage(page) {
-      if (page < 1 || page > this.pagination.last_page) {
-        return;
-      }
-      this.pagination.current_page = page;
-      this.$emit('paginate', page); // Emit the event with the new page number
-    }
-  },
+            changePage(page) {
+                if (page === 0 || (page > this.pagination.last_page)){
+                        return;
+                }
+
+                if (page > this.pagination.last_page) {
+                    page = this.pagination.last_page;
+                }
+
+                this.pagination.current_page = page;
+                this.$dispatch('paginate');
+            }
+        },
 
-  computed: {
-    pages() {
-      let pages = [];
+        computed: {
+            pages() {
+                let pages = [];
 
-      let from = this.pagination.current_page - Math.floor(this.offset / 2);
+                let from = this.pagination.current_page - Math.floor(this.offset / 2);
 
-      if (from < 1) {
-        from = 1;
-      }
+                if (from < 1) {
+                    from = 1;
+                }
 
-      let to = from + this.offset - 1;
+                let to = from + this.offset - 1;
 
-      if (to > this.pagination.last_page) {
-        to = this.pagination.last_page;
-      }
+                if (to > this.pagination.last_page) {
+                    to = this.pagination.last_page;
+                }
 
-      while (from <= to) {
-        pages.push(from);
-        from++;
-      }
+                while (from <= to) {
+                    pages.push(from);
+                    from++;
+                }
 
-      return pages;
+                return pages;
+            }
+        }
     }
-  }
-};
-</script>
+</script>
\ No newline at end of file
diff --git a/resources/views/static/youtube.blade.php b/resources/views/static/youtube.blade.php
index 49bfd6dd7..12a0fba3b 100644
--- a/resources/views/static/youtube.blade.php
+++ b/resources/views/static/youtube.blade.php
@@ -1,9 +1,97 @@
+<!-- YouTube Video Embed with Conditional Locale -->
 <div class="codeweek-youtube-container">
-        @if(App::getLocale() == 'en')
-                <iframe
-                src="https://www.youtube.com/embed/{{$video_id}}"></iframe>
-        @else
-                <iframe
-                src="https://www.youtube.com/embed/{{$video_id}}?cc_load_policy=1&cc_lang_pref={{App::getLocale()}}"></iframe>
-        @endif
-</div>
\ No newline at end of file
+    @if(App::getLocale() == 'en')
+        <iframe
+        src="https://www.youtube.com/embed/{{$video_id}}" style="display:none;"></iframe>
+    @else
+        <iframe
+        src="https://www.youtube.com/embed/{{$video_id}}?cc_load_policy=1&cc_lang_pref={{App::getLocale()}}" style="display:none;"></iframe>
+    @endif
+
+    <!-- Custom Banner to Display Over the Video -->
+    <div class="background" data-nosnippet="">
+        <div class="container">
+            <div class="content">
+                <div class="info">
+                    <p>This content is hosted by a third party. By showing the external content you accept the 
+                    <a href="https://www.youtube.com/t/terms" title="Terms and conditions" target="_blank">terms and conditions</a> of youtube.com.</p>
+                    
+                    <p class="remember">
+                        <input type="checkbox" id="remember" name="rememberMe">
+                        <label for="remember">Remember my choice.
+                            <span>Your choice will be saved in a cookie managed by europa.eu until you've closed your browser.</span>
+                        </label>
+                    </p>
+                    
+                    <p class="button">
+                        <button type="button" title="Show external content" class="show-content">
+                            <svg fill="currentColor" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                                <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3 17v-10l9 5.146-9 4.854z"></path>
+                            </svg>
+                            <span>Show external content</span>
+                        </button>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+    // Check if cookies are already consented for third-party content
+    if (!getCookie('third_party_content_accepted')) {
+        showBanner(); // Show the banner if consent has not been given
+    } else {
+        showYoutubeVideos(); // Show the videos immediately if consent has been given
+    }
+
+    // Function to show the YouTube video and hide the banner
+    function showYoutubeVideos() {
+        var videoContainers = document.querySelectorAll('.codeweek-youtube-container');
+        videoContainers.forEach(function(container) {
+            container.querySelector('iframe').style.display = 'block'; // Show the iframe
+            container.querySelector('.background').style.display = 'none'; // Hide the banner
+        });
+    }
+
+    // Function to show the banner
+    function showBanner() {
+        var banners = document.querySelectorAll('.codeweek-youtube-container .background');
+        banners.forEach(function(banner) {
+            banner.style.display = 'flex'; // Display the banner
+        });
+    }
+
+    // Event listener for the "Show external content" button
+    document.querySelectorAll('.show-content').forEach(function(button) {
+        button.addEventListener('click', function() {
+            if (document.getElementById('remember').checked) {
+                // If "Remember my choice" is checked, save in a cookie
+                setCookie('third_party_content_accepted', 'true', 365);
+            }
+            showYoutubeVideos(); // Show video and hide banner
+        });
+    });
+
+    function setCookie(name, value, days) {
+        var expires = "";
+        if (days) {
+            var date = new Date();
+            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+            expires = "; expires=" + date.toUTCString();
+        }
+        document.cookie = name + "=" + (value || "") + expires + "; path=/";
+    }
+
+    function getCookie(name) {
+        var nameEQ = name + "=";
+        var ca = document.cookie.split(';');
+        for (var i = 0; i < ca.length; i++) {
+            var c = ca[i];
+            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+        }
+        return null;
+    }
+});
+</script>