Show a raw version of the feeds (#60)

* Show a raw version of the feeds * Intent JSON data for the frontend
qgis · Jan 4, 2024 · 5e0b1b9 · 5e0b1b9
1 parent 4ef0269
commit 5e0b1b9
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 55 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,72 +62,99 @@ <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>
 {% endblock content %}
 
 <!-- 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 %}