From b2f576ec53534aea870685a9d705232d06544e7f Mon Sep 17 00:00:00 2001
From: James Graham <J.Graham@software.ac.uk>
Date: Thu, 25 Apr 2019 16:32:00 +0100
Subject: [PATCH] Use same star rating JS function in all places - #70
---
datasources/static/js/metadata.js | 17 +++++++++++---
.../datasources/datasource/detail.html | 19 ++++++---------
.../datasources/datasource/list.html | 23 ++++++++-----------
profiles/templates/index.html | 20 +++++++++++++++-
4 files changed, 50 insertions(+), 29 deletions(-)
diff --git a/datasources/static/js/metadata.js b/datasources/static/js/metadata.js
index 887c4a3..89a3ec7 100644
--- a/datasources/static/js/metadata.js
+++ b/datasources/static/js/metadata.js
@@ -118,15 +118,26 @@ function deleteMetadataForm(event) {
/**
* Update the star rating display.
+ *
+ * @param url Url to get quality level for a data source - defaults to global setting 'ratingUrl'
+ * @param badgeId Id of badge element to populate with stars - defaults to 'qualityLevelBadge'
*/
-function updateLevelBadge() {
+function updateLevelBadge(url, badgeId) {
"use strict";
- fetch(ratingUrl).then(
+ if (!url) {
+ url = ratingUrl;
+ }
+
+ if (!badgeId) {
+ badgeId = "qualityLevelBadge";
+ }
+
+ fetch(url).then(
(response) => response.json()
).then(function (data) {
- const levelBadge = document.getElementById("qualityLevelBadge");
+ const levelBadge = document.getElementById(badgeId);
// Clear existing rating
while (levelBadge.hasChildNodes()) {
diff --git a/datasources/templates/datasources/datasource/detail.html b/datasources/templates/datasources/datasource/detail.html
index 64d16d5..ab1c44a 100644
--- a/datasources/templates/datasources/datasource/detail.html
+++ b/datasources/templates/datasources/datasource/detail.html
@@ -1,6 +1,12 @@
{% extends "base.html" %}
{% load bootstrap4 %}
+{% block extra_head %}
+ {% load static %}
+
+ <script type="application/javascript" src="{% static 'js/metadata.js' %}"></script>
+{% endblock %}
+
{% block content %}
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
@@ -38,18 +44,7 @@
<script type="application/javascript">
document.addEventListener("DOMContentLoaded", function () {
- fetch("{% url 'api:datasource-quality' pk=datasource.pk %}").then(
- response => response.json()
-
- ).then(function (data) {
- const levelBadge = document.getElementById("qualityLevelBadge");
-
- for (let i = 0; i < data.quality; i++) {
- const star = document.createElement("i");
- star.classList.add("fas", "fa-star");
- levelBadge.appendChild(star);
- }
- });
+ updateLevelBadge("{% url 'api:datasource-quality' pk=datasource.pk %}");
});
</script>
</small>
diff --git a/datasources/templates/datasources/datasource/list.html b/datasources/templates/datasources/datasource/list.html
index 460e461..f06cac0 100644
--- a/datasources/templates/datasources/datasource/list.html
+++ b/datasources/templates/datasources/datasource/list.html
@@ -1,6 +1,12 @@
{% extends "base.html" %}
{% load bootstrap4 %}
+{% block extra_head %}
+ {% load static %}
+
+ <script type="application/javascript" src="{% static 'js/metadata.js' %}"></script>
+{% endblock %}
+
{% block content %}
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
@@ -60,20 +66,11 @@
<script type="application/javascript">
// TODO Should this be a single function to loop over all data sources?
-
document.addEventListener("DOMContentLoaded", function () {
- fetch("{% url 'api:datasource-quality' pk=datasource.pk %}").then(
- response => response.json()
-
- ).then(function (data) {
- levelBadge = document.getElementById("qualityLevelBadge{{ datasource.pk }}");
-
- for (let i = 0; i < data.quality; i++) {
- const star = document.createElement("i");
- star.classList.add("fas", "fa-star");
- levelBadge.appendChild(star);
- }
- });
+ updateLevelBadge(
+ "{% url 'api:datasource-quality' pk=datasource.pk %}",
+ "qualityLevelBadge{{ datasource.pk }}"
+ );
});
</script>
</p>
diff --git a/profiles/templates/index.html b/profiles/templates/index.html
index 732e933..152b53d 100644
--- a/profiles/templates/index.html
+++ b/profiles/templates/index.html
@@ -3,7 +3,10 @@
{% block extra_head %}
{% load static %}
+
<link rel="stylesheet" href="{% static 'css/masthead.css' %}">
+
+ <script type="application/javascript" src="{% static 'js/metadata.js' %}"></script>
{% endblock %}
{% block pre_content %}
@@ -148,7 +151,22 @@
style="width: 150px;">
<div class="card-body d-flex flex-column pb-2">
- <h5 class="card-title">{{ datasource.name }}</h5>
+ <h5 class="card-title">
+ {{ datasource.name }}
+
+ <span id="qualityLevelBadge{{ datasource.pk }}"
+ class="badge badge-primary float-right"></span>
+
+ <script type="application/javascript">
+ // TODO Should this be a single function to loop over all data sources?
+ document.addEventListener("DOMContentLoaded", function () {
+ updateLevelBadge(
+ "{% url 'api:datasource-quality' pk=datasource.pk %}",
+ "qualityLevelBadge{{ datasource.pk }}"
+ );
+ });
+ </script>
+ </h5>
<p class="card-text">{{ datasource.description|truncatechars:120 }}</p>
<p class="card-text text-right mt-auto">
--
GitLab