Eds new frontend

themes/eds/i18n/da.json

@@ -77,7 +77,7 @@
 	"E.g. environment": "F.eks. environment",
 	"Search through the Energinet DataStore datasets": "Søg i Energinet Data Service datasæt",
 	"Search": "Søg",
-	"What are Organizations?": "Hvad er en organisation",
+	"What are Organizations?": "Hvad er en organisation?",
 	"All datasets are attached to an organization/company. The organization is responsible for publishing and maintaining data and for data quality in general. The organization is also responsible for providing data support and to support data usage.": "Alle datasæt er tilknyttet én organisation/selskab. Organisationen er ansvarlig for at udgive og vedligeholde data og for datakvaliteten generelt. Organisationen er også ansvarlig for at yde support på datasættet og understøtte, at data bringes i anvendelse.",
 	"View {organization_name}": "Se {organization_name}",
 	"Unsubscribe": "Følg ikke",
@@ -160,5 +160,14 @@
 	"Transmission Lines": "Transmission",
 	"CO2 Emissions": "CO2 Emissioner",
 	"Gas": "Gas",
-	"Highlighted data": "Highlighted data"
-}
+	"Highlighted data": "Highlighted data",
+	"Tags": "Tags",
+	"Formats": "Formater",
+	"Licenses": "Licenser",
+	"Organization": "Organisationer",
+	"Relevance": "Relevans",
+	"Last Modified": "Sidst modificeret",
+	"What are Dataset Collections?": "Hvad er grupper?",
+	"Dataset Collections": "Grupper",
+	"Show More Groups": "Show More Groups"
+}

themes/eds/i18n/en.json

@@ -28,5 +28,18 @@
 	"Subscribe to news and get notified when new data are released": "Subscribe to news and get notified when new data are released",
 	"Help Energinet to provide better service and support": "Help Energinet to provide better service and support",
 	"Register": "Register",
-	"Energinet has a lot of energy data and through Energi Data Service, we want to make these data available. The portal will be expanded regularly. We hope you will join us on the journey, and will contribute with advice and feedback.": "Energinet has a lot of energy data and through Energi Data Service, we want to make these data available. The portal will be expanded regularly. We hope you will join us on the journey, and will contribute with advice and feedback."
-}
+	"Energinet has a lot of energy data and through Energi Data Service, we want to make these data available. The portal will be expanded regularly. We hope you will join us on the journey, and will contribute with advice and feedback.": "Energinet has a lot of energy data and through Energi Data Service, we want to make these data available. The portal will be expanded regularly. We hope you will join us on the journey, and will contribute with advice and feedback.",
+	"Tags": "Tags",
+	"Formats": "Formats",
+	"Licenses": "Licenses",
+	"Organization": "Organization",
+	"Name Ascending": "Name Ascending",
+	"Name Descending": "Name Descending",
+	"What are Organizations?": "What are Organizations?",
+	"Order by": "Order by",
+	"Dataset Collections": "Dataset Collections",
+	"What are Dataset Collections?": "What are Dataset Collections?",
+	"Show More Groups": "Show More Groups",
+	"Relevance": "Relevance",
+	"Last Modified": "Last Modified"
+}

themes/eds/routes.js

@@ -0,0 +1,150 @@
+const fetch = require('node-fetch')
+const moment = require('moment')
+const config = require('../../config')
+const dms = require('../../lib/dms')
+const utils = require('../../utils')
+
+
+module.exports = function (app) {
+  app.get('/:owner/:name', async (req, res, next) => {
+    const Model = new dms.DmsModel(config)
+    let datapackage = null
+
+    try {
+      datapackage = await Model.getPackage(req.params.name)
+    } catch (err) {
+      next(err)
+      return
+    }
+
+    // Convert timestamps into human readable format:
+    datapackage.resources[0].created = moment(datapackage.resources[0].created).format('MMMM Do, YYYY')
+    datapackage.resources[0].last_modified = moment(datapackage.resources[0].last_modified).format('MMMM Do, YYYY')
+
+    // Prep downloads property with various formats
+    datapackage.downloads = [
+      {
+        format: 'CSV',
+        path: datapackage.resources[0].path
+      },
+      {
+        format: 'TSV',
+        path: datapackage.resources[0].path + '?format=tsv'
+      },
+      {
+        format: 'XLSX - Excel',
+        path: datapackage.resources[0].path + '?bom=true'
+      },
+      {
+        format: 'JSON',
+        path: datapackage.resources[0].path + '?format=json'
+      },
+      {
+        format: 'XML',
+        path: datapackage.resources[0].path + '?format=xml'
+      }
+    ]
+
+    // Prep resource e.g., make an inline datapackage and pass to renderer lib
+    datapackage.resources[0].path = config.get('API_URL') + `datastore_search?resource_id=${datapackage.resources[0].id}`
+    const response = await fetch(datapackage.resources[0].path)
+    if (response.ok) {
+      const result = await response.json()
+      datapackage.resources[0].rows = result.result.total
+      datapackage.resources[0].data = result.result.records.map(record => {
+        delete record._id
+        delete record._full_text
+        return record
+      })
+    } else {
+      // Data is unavailable
+      datapackage.resources[0].unavailable = true
+    }
+    delete datapackage.resources[0].path
+    // Resource format should be known tabular format for data previews to work
+    // in EDS, all resources are in 'data' format which isn't valid for previewing
+    datapackage.resources[0].format = 'csv'
+
+    const schema = {
+      fields: [
+        {
+          name: 'GasDay',
+          title: 'Gas Day',
+          type: 'date',
+          description: 'Gas Day is a period commencing at 06:00 CET on any day and ending at 06:00 CET on the following day. The Gas Day is reduced to 23 Hours at the transition to summer time and is increased to 25 Hours at the transition to winter time.',
+          example: '2017-12-24',
+          unit: 'Days'
+        },
+        {
+          name: 'KWhFromBiogas',
+          type: 'number'
+        },
+        {
+          name: 'KWhToDenmark',
+          type: 'number'
+        },
+        {
+          name: 'KWhFromNorthSea',
+          type: 'number'
+        },
+        {
+          name: 'KWhToOrFromStorage',
+          type: 'number'
+        },
+        {
+          name: 'KWhToOrFromGermany',
+          type: 'number'
+        },
+        {
+          name: 'KWhToSweden',
+          type: 'number'
+        }
+      ]
+    }
+    datapackage.resources[0].schema = schema
+
+    // Since "datapackage-views-js" library renders views according to
+    // descriptor's "views" property, we need to generate view objects:
+    datapackage.views = datapackage.views || []
+    datapackage.resources.forEach((resource, index) => {
+      // Convert bytes into human-readable format:
+      resource.size = resource.size ? bytes(resource.size, {decimalPlaces: 0}) : resource.size
+      const view = {
+        id: index,
+        title: resource.title || resource.name,
+        resources: [
+           resource.name
+        ],
+        specType: null
+      }
+      resource.format = resource.format.toLowerCase()
+      // Add 'table' views for each tabular resource:
+      const tabularFormats = ['csv', 'tsv', 'dsv', 'xls', 'xlsx']
+      if (tabularFormats.includes(resource.format)) {
+        view.specType = 'table'
+      } else if (resource.format.includes('json')) {
+        // Add 'map' views for each geo resource:
+        view.specType = 'map'
+      } else if (resource.format === 'pdf') {
+        view.specType = 'document'
+      }
+
+      datapackage.views.push(view)
+    })
+
+    const profile = await Model.getProfile(req.params.owner)
+
+    res.render('showcase.html', {
+      title: req.params.owner + ' | ' + req.params.name,
+      dataset: datapackage,
+      owner: {
+        name: profile.name,
+        title: profile.title,
+        description: utils.processMarkdown.render(profile.description),
+        avatar: profile.image_display_url || profile.image_url
+      },
+      thisPageFullUrl: req.protocol + '://' + req.get('host') + req.originalUrl,
+      dpId: JSON.stringify(datapackage).replace(/'/g, "'")
+    })
+  })
+}

themes/eds/views/base.html

@@ -40,11 +40,12 @@
   <link rel="shortcut icon" href="/static/img/energi-data-service-favicon-512.png" type="image/png" sizes="512x512">
 
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i" rel="stylesheet">
-  <link rel="stylesheet" media="screen" href="/static/stylesheets/app.css">
-  <link rel="stylesheet" media="screen" href="/static/stylesheets/main.css">
   {% if dataset %}
+  <link rel="stylesheet" media="screen" href="https://raw.githack.com/datopian/datapackage-views-js/master/dist/css/main.css">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css">
   {% endif %}
+  <link rel="stylesheet" media="screen" href="/static/stylesheets/app.css">
+  <link rel="stylesheet" media="screen" href="/static/stylesheets/main.css">
   <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>

themes/eds/views/collection.html

@@ -0,0 +1,69 @@
+{% extends "base.html" %}
+{% import '_snippets.html' as snippets %}
+
+{% block title %}
+{{ item.title }}
+{% endblock %}
+
+{% block bodyclass %}search{% endblock %}
+
+{% block content %}
+<!-- collection page test placeholder -->
+<div role="main">
+  <div id="content" class="container-fluid">
+    <div class="toolbar">
+      <ol class="breadcrumb">
+        <li class="home"><a href="/"><i class="fa fa-home"></i><span> Home</span></a></li>
+        <li><a href="/collections">{{__('Groups')}}</a></li>
+        <li class="active"><a class=" active" href="/collections/{{ item.name }}">{{ item.title }}</a></li>
+      </ol>
+    </div>
+    <div class="row wrapper">
+      <div class=" col-md-12 ">
+        <div class="flash-messages">
+        </div>
+      </div>
+      <div class="col-md-10 col-md-offset-1">
+      </div>
+      <aside class="col-md-3">
+        <div class="module context-info">
+          <section class="module-content">
+            <div class="image">
+              <a href="">
+                <img src="{{ item.image }}" width="190" height="118" alt="{{ item.name }}" />
+              </a>
+            </div>
+            <h1 class="heading">
+              {{ title }}
+            </h1>
+            <p>
+              {{ item.summary|truncate(95) }}
+            </p>
+            <div class="nums">
+              <dl>
+                <dt>{{__('Datasets')}}</dt>
+                <dd><span>{{ item.count }}</span></dd>
+              </dl>
+            </div>
+            <div class="follow_button">
+            </div>
+          </section>
+        </div>
+        <div class="filters">
+          {% include "./partials/search-filter.njk" %}
+          <a class="close no-text hide-filters"><i class="fa fa-times-circle"></i><span class="text">close</span></a>
+        </div>
+      </aside>
+      <div class="col-md-9 ">
+        <article class="module">
+          <div class="module-content">
+            {% include "./partials/data-search-form.njk" %}
+            {% include "./partials/data-search-results.njk" %}
+          </div>
+          {% include "./partials/data-search-pagination.njk" %}
+        </article>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}

themes/eds/views/collections-home.html

@@ -0,0 +1,84 @@
+{% extends "base.html" %}
+
+{% block title%}{{title}}{% endblock %}
+
+{% block bodyclass %}awesome{% endblock %}
+
+{% block content %}
+
+<!-- collections list page test placeholder -->
+<div role="main">
+  <div id="content" class="container-fluid">
+    <div class="toolbar">
+      <ol class="breadcrumb">
+        <li class="home"><a href="/"><i class="fa fa-home"></i><span> Home</span></a></li>
+        <li class="active"><a class=" active" href="{{ slug }}">{{__(title)}}</a></li>
+      </ol>
+    </div>
+    <div class="row wrapper">
+      <div class=" col-md-12 ">
+        <div class="flash-messages">
+        </div>
+      </div>
+      <div class="col-md-10 col-md-offset-1">
+      </div>
+      <aside class="col-md-3">
+        <div class="module module-narrow module-shallow">
+          <h2 class="module-heading">
+            <i class="fa fa-info-circle"></i>
+            {{__('What are '+title+'?')}}
+          </h2>
+          <div class="module-content">
+            <p>
+              {{ description }}
+            </p>
+          </div>
+        </div>
+      </aside>
+      <div class="col-md-9 ">
+        <article class="module">
+          <div class="module-content">
+            <h1 class="hide-heading">{{ title }}</h1>
+            <form id="{{ slug }}-search-form" class="search-form no-bottom-border" method="get" data-module="select-switch">
+              <div class="order-by-wrapper">
+                <div class="form-select">
+                  <ul class="list-inline">
+                    <li><label for="field-order-by">{{__('Order by')}}</label></li>
+                    <li>
+                      <select id="field-order-by" name="sort" class="form-control" onchange="this.form.submit()">
+                        <option value="title asc">{{__('Name Ascending')}}</option>
+                        <option value="title desc">{{__('Name Descending')}}</option>
+                      </select>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-md-7">
+                  <h3>{{ collections|length }} {{ "organization" if slug=="organization" else "collection" }}{{ "s" if collections|length != 1 else ""}} found</h3>
+                </div>
+              </div>
+            </form>
+            <ul class="media-grid" data-module="media-grid">
+              {% for collection in collections %}
+                <li class="media-item">
+                  <img src="{{ collection.image if collection.image else 'static/img/placeholder-organization.png'}}" alt="{{ collection.name }}" class="media-image">
+                  <h3 class="media-heading">{{ collection.title }}</h3>
+                  {% if slug=="organization" %}
+                    <strong class="count">{{ collection.count }} Dataset{{ 's' if collection.count != 1 else '' }}</strong>
+                  {% endif %}
+                  <a href="/{{slug}}/{{ collection.name }}" title="{{ collection.title }}" class="media-view">
+                    <span>View {{ collection.title }}</span>
+                  </a>
+                </li>
+              {% endfor %}
+              <li class="clearfix js-hide"></li>
+            </ul>
+          </div>
+        </article>
+      </div>
+    </div>
+  </div>
+</div>
+
+{% endblock %}