From 5e0b1b9413e9d0686e2e9bb03f93def3cc85d9fe Mon Sep 17 00:00:00 2001
From: Lova ANDRIARIMALALA <43842786+Xpirix@users.noreply.github.com>
Date: Thu, 4 Jan 2024 05:48:38 +0300
Subject: [PATCH] Show a raw version of the feeds (#60)

* Show a raw version of the feeds

* Intent JSON data for the frontend
---
 docker-compose.dev.yml                        |   2 +
 package.json                                  |   1 +
 qgisfeedproject/qgisfeed/views.py             |   7 +-
 qgisfeedproject/static/js/index.js            |   5 +-
 qgisfeedproject/static/style/style.scss       |   1 +
 .../templates/feeds/feed_home_page.html       | 142 +++++++++++-------
 6 files changed, 103 insertions(+), 55 deletions(-)

diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
index 6cb4bf1..f59ca79 100644
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@@ -7,6 +7,8 @@ services:
       POSTGRES_USER: docker
       POSTGRES_PASS: docker
       POSTGRES_DBNAME: qgisfeed
+    # ports:
+    # - "5436:5432"
 
   qgisfeed:
     # Note you cannot scale if you use container_name
diff --git a/package.json b/package.json
index 47a2e37..4bd7200 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   "devDependencies": {
     "bulma": "^0.9.4",
     "css-loader": "^6.8.1",
+    "highlight.js": "^11.9.0",
     "mini-css-extract-plugin": "^2.7.6",
     "node-sass": "^9.0.0",
     "sass-loader": "^13.3.2",
diff --git a/qgisfeedproject/qgisfeed/views.py b/qgisfeedproject/qgisfeed/views.py
index c217250..b421d98 100644
--- a/qgisfeedproject/qgisfeed/views.py
+++ b/qgisfeedproject/qgisfeed/views.py
@@ -154,13 +154,14 @@ def get(self, request):
                 record['image'] = request.build_absolute_uri(settings.MEDIA_URL + record['image'])
             data.append(record)
 
-
+        data_json = json.dumps(data, indent=(2 if settings.DEBUG else 0))
         if "qgis" in str(user_agent).lower() or request.GET.get('json', '') == '1':
-            return HttpResponse(json.dumps(data, indent=(2 if settings.DEBUG else 0)),content_type='application/json')
+            return HttpResponse(data_json,content_type='application/json')
         else:
             args = {
                 "data": data,
-                "form": form
+                "form": form,
+                "data_json": json.dumps(data, indent=2)
             }
             return render(request, self.template_name, args)
 
diff --git a/qgisfeedproject/static/js/index.js b/qgisfeedproject/static/js/index.js
index f7aadf3..9a512d1 100644
--- a/qgisfeedproject/static/js/index.js
+++ b/qgisfeedproject/static/js/index.js
@@ -1,7 +1,10 @@
+const hljs = require('highlight.js/lib/core');
+hljs.registerLanguage('json', require('highlight.js/lib/languages/json'));
+hljs.highlightAll();
+
 require('../style/custom.bulma.scss');
 require('../style/style.scss');
 
-
 document.addEventListener('DOMContentLoaded', () => {
 
     // Get all "navbar-burger" elements
diff --git a/qgisfeedproject/static/style/style.scss b/qgisfeedproject/static/style/style.scss
index 42d708c..33e9e9a 100644
--- a/qgisfeedproject/static/style/style.scss
+++ b/qgisfeedproject/static/style/style.scss
@@ -1,4 +1,5 @@
 @charset "utf-8";
+@import "../../../node_modules/highlight.js/scss/atom-one-dark.scss";
 
 mark {
   background: linear-gradient(-100deg, #93b023, #f0e64a 95%);
diff --git a/qgisfeedproject/templates/feeds/feed_home_page.html b/qgisfeedproject/templates/feeds/feed_home_page.html
index 920bc56..ba486a8 100644
--- a/qgisfeedproject/templates/feeds/feed_home_page.html
+++ b/qgisfeedproject/templates/feeds/feed_home_page.html
@@ -10,7 +10,20 @@
 
     .hoverable-preview:hover {
         cursor: pointer;
-        background: #d4d4d4  !important;
+        background: #d4d4d4 !important;
+    }
+
+    #tab-content div.is-active {
+        display: block;
+    }
+
+    #tab-content div.is-inactive {
+        display: none;
+    }
+
+    code {
+        border-radius: 5px;
+        white-space: pre-wrap;
     }
 </style>
 {% endblock stylesheets %}
@@ -20,7 +33,7 @@
        background-position: center;
        background-size: cover;">
 
-       <div class="hero-body">
+    <div class="hero-body">
         <div class="columns is-justify-content-space-between">
             <div class="column is-6 is-align-items-center" style="display: flex">
                 <div class="container has-text-left">
@@ -49,67 +62,78 @@ <h5 class="title is-5">Filter by</h5>
                             {{form.lang}}
                         </div>
                     </div>
-    
+
                     <div class="field">
                         <label class="label">Date published from:</label>
                         <div class="control has-icons-left">
-                          {{form.publish_from}}
-                          <span class="icon is-small is-left">
-                            <i class="fas fa-calendar"></i>
-                          </span>
+                            {{form.publish_from}}
+                            <span class="icon is-small is-left">
+                                <i class="fas fa-calendar"></i>
+                            </span>
                         </div>
-                      </div>
-                      <button 
-                          class="button is-block is-info is-fullwidth"
-                          type="submit" 
-                          value="filter" 
-                          id="submit-button"
-                      >
-                          Filter <i class="fa fa-filter" aria-hidden="true"></i>
-                      </button>
-                      <button 
-                          type="button"
-                          class="button is-block is-danger is-fullwidth mt-2"
-                          value="clear" 
-                          onclick="window.location.href='?';"
-                      >
-                          Clear filter <i class="fa fa-delete-left" aria-hidden="true"></i>
-                      </button>
+                    </div>
+                    <button class="button is-block is-info is-fullwidth" type="submit" value="filter"
+                        id="submit-button">
+                        Filter <i class="fa fa-filter" aria-hidden="true"></i>
+                    </button>
+                    <button type="button" class="button is-block is-danger is-fullwidth mt-2" value="clear"
+                        onclick="window.location.href='?';">
+                        Clear filter <i class="fa fa-delete-left" aria-hidden="true"></i>
+                    </button>
                 </form>
             </div>
         </div>
         <div class="column is-9">
-            {% if data|length > 0 %}
-                {% for feed in data %}
-
-                {% if feed.url %}
-                <div class="box-container hoverable-preview form-preview columns has-background-light p-2 has-text-dark mt-5"
-                    onclick="window.open('{{feed.url}}');">
-                {% else %}
-                <div class="box-container form-preview columns has-background-light p-2 has-text-dark mt-5">
-                {% endif %}
-                
-                    <div class="column is-4 is-flex is-flex-direction-column is-align-items-center" name="imagePreview">
-                        {% if feed.image %}
-                        <img src="{{ feed.image }}" style="border-radius:20px;">
-                        {% else %}
-                        {% endif %}
-                    </div>
-                    <div class="column is-8">
-                        <h5 name="titlePreview" class="title is-5">
-                            {{feed.title | default:""}}
-                        </h5>
-                        <div name="contentPreview">
-                            {{feed.content | default:"" | safe }}
+            <div class="tabs is-centered is-boxed" id="tabs">
+                <ul>
+                    <li class="is-active" data-tab="1">
+                        <a>
+                            <span class="icon is-small"><i class="fa fa-image"></i></span>
+                            <span>Preview</span>
+                        </a>
+                    </li>
+                    <li data-tab="2">
+                        <a>
+                            <span class="icon is-small"><i class="fa fa-code"></i></span>
+                            <span>Raw</span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+            <div id="tab-content">
+                <div class="tab-content-element is-active" style="padding:0 10px;" data-content="1">
+                    {% if data|length > 0 %}
+                    {% for feed in data %}
+                    <div class="box-container {% if feed.url %} hoverable-preview {% endif %} form-preview columns has-background-light p-2 has-text-dark mt-5"
+                        onclick="{% if feed.url %}window.open('{{feed.url}}');{% endif %}">
+                        <div class="column is-4 is-flex is-flex-direction-column is-align-items-center"
+                            name="imagePreview">
+                            {% if feed.image %}
+                            <img src="{{ feed.image }}" style="border-radius:20px;">
+                            {% endif %}
                         </div>
+                        <div class="column is-8">
+                            <h5 name="titlePreview" class="title is-5">
+                                {{feed.title | default:""}}
+                            </h5>
+                            <div name="contentPreview">
+                                {{feed.content | default:"" | safe }}
+                            </div>
+                        </div>
+                    </div>
+                    {% endfor %}
+                    {% else %}
+                    <div style="width: 100%; text-align: center;" class="m-5">
+                        No data found
                     </div>
+                    {% endif %}
                 </div>
-                {% endfor %}
-            {% else %}
-                <div style="width: 100%; text-align: center;" class="m-5">
-                    No data found
+                <div class="tab-content-element is-inactive" data-content="2">
+                    <pre style="background-color:unset; padding:0;">
+                        <code class="language-json">{{data_json}}</code>
+                    </pre>
                 </div>
-            {% endif %}
+            </div>
         </div>
     </div>
 </section>
@@ -117,4 +141,20 @@ <h5 name="titlePreview" class="title is-5">
 
 <!-- Specific JS goes HERE -->
 {% block javascripts %}
+<script>
+    $(document).ready(function () {
+        $('#tabs li').on('click', function () {
+            var tab = $(this).data('tab');
+
+            $('#tabs li').removeClass('is-active');
+            $(this).addClass('is-active');
+
+            $('.tab-content-element').removeClass('is-active');
+            $('.tab-content-element').addClass('is-inactive');
+            $('div[data-content="' + tab + '"]').removeClass('is-inactive');
+            $('div[data-content="' + tab + '"]').addClass('is-active');
+        });
+
+    });
+</script>
 {% endblock javascripts %}
\ No newline at end of file