Add observation metadata fields
and display them on observation_view pagemerge-requests/464/head
Pierros Papadeas
parent
b2a059806c
commit
64b222fd3c
|
|
@ -19,9 +19,9 @@ class ObservationSerializer(serializers.ModelSerializer):
|
|||
|
||||
class Meta:
|
||||
model = Observation
|
||||
fields = ('id', 'start', 'end', 'ground_station', 'transmitter',
|
||||
'norad_cat_id', 'payload', 'waterfall', 'demoddata', 'station_name',
|
||||
'station_lat', 'station_lng', 'vetted_status')
|
||||
fields = ('id', 'start', 'end', 'ground_station', 'transmitter', 'norad_cat_id',
|
||||
'payload', 'waterfall', 'demoddata', 'station_name', 'station_lat',
|
||||
'station_lng', 'vetted_status', 'client_version', 'client_metadata')
|
||||
read_only_fields = ['id', 'start', 'end', 'observation', 'ground_station',
|
||||
'transmitter', 'norad_cat_id', 'station_name',
|
||||
'station_lat', 'station_lng']
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
# -*- coding: utf-8 -*-
|
||||
# Generated by Django 1.11.7 on 2018-02-02 13:58
|
||||
from __future__ import unicode_literals
|
||||
|
||||
from django.db import migrations, models
|
||||
import network.base.models
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
dependencies = [
|
||||
('base', '0033_auto_20171228_1515'),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.AddField(
|
||||
model_name='observation',
|
||||
name='client_metadata',
|
||||
field=models.TextField(blank=True),
|
||||
),
|
||||
migrations.AddField(
|
||||
model_name='observation',
|
||||
name='client_version',
|
||||
field=models.CharField(blank=True, max_length=255),
|
||||
),
|
||||
migrations.AlterField(
|
||||
model_name='demoddata',
|
||||
name='payload_demod',
|
||||
field=models.FileField(blank=True, null=True, upload_to=network.base.models._name_obs_demoddata),
|
||||
),
|
||||
migrations.AlterField(
|
||||
model_name='observation',
|
||||
name='payload',
|
||||
field=models.FileField(blank=True, null=True, upload_to=network.base.models._name_obs_files),
|
||||
),
|
||||
migrations.AlterField(
|
||||
model_name='observation',
|
||||
name='waterfall',
|
||||
field=models.ImageField(blank=True, null=True, upload_to=network.base.models._name_obs_files),
|
||||
),
|
||||
]
|
||||
|
|
@ -351,6 +351,8 @@ class Observation(models.Model):
|
|||
end = models.DateTimeField()
|
||||
ground_station = models.ForeignKey(Station, related_name='observations',
|
||||
on_delete=models.SET_NULL, null=True, blank=True)
|
||||
client_version = models.CharField(max_length=255, blank=True)
|
||||
client_metadata = models.TextField(blank=True)
|
||||
payload = models.FileField(upload_to=_name_obs_files, blank=True, null=True)
|
||||
waterfall = models.ImageField(upload_to=_name_obs_files, blank=True, null=True)
|
||||
vetted_datetime = models.DateTimeField(null=True, blank=True)
|
||||
|
|
|
|||
|
|
@ -344,6 +344,12 @@ span.datetime-time {
|
|||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#json-renderer {
|
||||
padding-left: 18px;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.timezone {
|
||||
margin: -5px 0 15px 2px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -104,6 +104,10 @@ $(document).ready(function() {
|
|||
});
|
||||
}
|
||||
|
||||
//JSON pretty renderer
|
||||
var metadata = $('#json-renderer').data('json');
|
||||
$('#json-renderer').jsonViewer(metadata, {collapsed: true});
|
||||
|
||||
// Hotkeys bindings
|
||||
$(document).bind('keyup', function(event){
|
||||
if (event.which == 88) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
/* Syntax highlighting for JSON objects */
|
||||
ul.json-dict, ol.json-array {
|
||||
list-style-type: none;
|
||||
margin: 0 0 0 1px;
|
||||
border-left: 1px dotted #ccc;
|
||||
padding-left: 2em;
|
||||
}
|
||||
.json-string {
|
||||
color: #0B7500;
|
||||
}
|
||||
.json-literal {
|
||||
color: #1A01CC;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Toggle button */
|
||||
a.json-toggle {
|
||||
position: relative;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
a.json-toggle:focus {
|
||||
outline: none;
|
||||
}
|
||||
a.json-toggle:before {
|
||||
color: #aaa;
|
||||
content: "\25BC"; /* down arrow */
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
left: -1em;
|
||||
}
|
||||
a.json-toggle.collapsed:before {
|
||||
content: "\25B6"; /* left arrow */
|
||||
}
|
||||
|
||||
/* Collapsable placeholder links */
|
||||
a.json-placeholder {
|
||||
color: #aaa;
|
||||
padding: 0 1em;
|
||||
text-decoration: none;
|
||||
}
|
||||
a.json-placeholder:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
/**
|
||||
* jQuery json-viewer
|
||||
* @author: Alexandre Bodelot <alexandre.bodelot@gmail.com>
|
||||
*/
|
||||
(function($){
|
||||
|
||||
/**
|
||||
* Check if arg is either an array with at least 1 element, or a dict with at least 1 key
|
||||
* @return boolean
|
||||
*/
|
||||
function isCollapsable(arg) {
|
||||
return arg instanceof Object && Object.keys(arg).length > 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a string represents a valid url
|
||||
* @return boolean
|
||||
*/
|
||||
function isUrl(string) {
|
||||
var regexp = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
|
||||
return regexp.test(string);
|
||||
}
|
||||
|
||||
/**
|
||||
* Transform a json object into html representation
|
||||
* @return string
|
||||
*/
|
||||
function json2html(json) {
|
||||
html = '';
|
||||
if (typeof json === 'string') {
|
||||
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
if (isUrl(json))
|
||||
html += '<a href="' + json + '" class="json-string">' + json + '</a>';
|
||||
else
|
||||
html += '<span class="json-string">"' + json + '"</span>';
|
||||
}
|
||||
else if (typeof json === 'number') {
|
||||
html += '<span class="json-literal">' + json + '</span>';
|
||||
}
|
||||
else if (typeof json === 'boolean') {
|
||||
html += '<span class="json-literal">' + json + '</span>';
|
||||
}
|
||||
else if (json === null) {
|
||||
html += '<span class="json-literal">null</span>';
|
||||
}
|
||||
else if (json instanceof Array) {
|
||||
if (json.length > 0) {
|
||||
html += '[<ol class="json-array">';
|
||||
for (var i = 0; i < json.length; ++i) {
|
||||
html += '<li>'
|
||||
// Add toggle button if item is collapsable
|
||||
if (isCollapsable(json[i]))
|
||||
html += '<a href class="json-toggle"></a>';
|
||||
|
||||
html += json2html(json[i]);
|
||||
// Add comma if item is not last
|
||||
if (i < json.length - 1)
|
||||
html += ',';
|
||||
html += '</li>';
|
||||
}
|
||||
html += '</ol>]';
|
||||
}
|
||||
else {
|
||||
html += '[]';
|
||||
}
|
||||
}
|
||||
else if (typeof json === 'object') {
|
||||
var key_count = Object.keys(json).length;
|
||||
if (key_count > 0) {
|
||||
html += '{<ul class="json-dict">';
|
||||
for (var i in json) {
|
||||
if (json.hasOwnProperty(i)) {
|
||||
html += '<li>';
|
||||
// Add toggle button if item is collapsable
|
||||
if (isCollapsable(json[i]))
|
||||
html += '<a href class="json-toggle">' + i + '</a>';
|
||||
else
|
||||
html += i;
|
||||
|
||||
html += ': ' + json2html(json[i]);
|
||||
// Add comma if item is not last
|
||||
if (--key_count > 0)
|
||||
html += ',';
|
||||
html += '</li>';
|
||||
}
|
||||
}
|
||||
html += '</ul>}';
|
||||
}
|
||||
else {
|
||||
html += '{}';
|
||||
}
|
||||
}
|
||||
return html;
|
||||
}
|
||||
|
||||
/**
|
||||
* jQuery plugin method
|
||||
*/
|
||||
$.fn.jsonViewer = function(json, options) {
|
||||
// jQuery chaining
|
||||
return this.each(function() {
|
||||
|
||||
// Transform to HTML
|
||||
var html = json2html(json)
|
||||
if (isCollapsable(json))
|
||||
html = '<a href class="json-toggle"></a>' + html;
|
||||
|
||||
// Insert HTML in target DOM element
|
||||
$(this).html(html);
|
||||
|
||||
// Bind click on toggle buttons
|
||||
$(this).off('click');
|
||||
$(this).on('click', 'a.json-toggle', function() {
|
||||
var target = $(this).toggleClass('collapsed').siblings('ul.json-dict, ol.json-array');
|
||||
target.toggle();
|
||||
if (target.is(':visible')) {
|
||||
target.siblings('.json-placeholder').remove();
|
||||
}
|
||||
else {
|
||||
var count = target.children('li').length;
|
||||
var placeholder = count + (count > 1 ? ' items' : ' item');
|
||||
target.after('<a href class="json-placeholder">' + placeholder + '</a>');
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
// Simulate click on toggle button when placeholder is clicked
|
||||
$(this).on('click', 'a.json-placeholder', function() {
|
||||
$(this).siblings('a.json-toggle').click();
|
||||
return false;
|
||||
});
|
||||
|
||||
if (typeof options == "object" && options.collapsed == true) {
|
||||
// Trigger click to collapse all nodes
|
||||
$(this).find('a.json-toggle').click();
|
||||
}
|
||||
});
|
||||
};
|
||||
})(jQuery);
|
||||
|
|
@ -5,6 +5,10 @@
|
|||
|
||||
{% block title %} - Observation {{ observation.id }}{% endblock %}
|
||||
|
||||
{% block css %}
|
||||
<link rel="stylesheet" href="{% static 'lib/jquery.json-viewer/json-viewer/jquery.json-viewer.css' %}">
|
||||
{% endblock css %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-sm-6">
|
||||
|
|
@ -159,6 +163,22 @@
|
|||
{{ observation.set_azimuth }}°
|
||||
</span>
|
||||
</div>
|
||||
{% if observation.client_version %}
|
||||
<div class="front-line">
|
||||
<span class="label label-default">Client Version</span>
|
||||
<span class="front-data">
|
||||
{{ observation.client_version }}
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if observation.client_metadata %}
|
||||
<div class="front-line">
|
||||
<span class="label label-default">Metadata</span>
|
||||
<span class="front-data">
|
||||
<pre id="json-renderer" data-json="{{ observation.client_metadata }}"></pre>
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="front-line">
|
||||
{% if observation.has_audio or observation.waterfall %}
|
||||
<span class="label label-default">Downloads</span>
|
||||
|
|
@ -315,6 +335,7 @@
|
|||
<script src="{% static 'lib/wavesurfer.js/dist/plugin/wavesurfer.spectrogram.min.js' %}"></script>
|
||||
<script src="{% static 'lib/moment/min/moment.min.js' %}"></script>
|
||||
<script src="{% static 'lib/urijs/src/URI.min.js' %}"></script>
|
||||
<script src="{% static 'lib/jquery.json-viewer/json-viewer/jquery.json-viewer.js' %}"></script>
|
||||
<script src="{% static 'js/utc.js' %}"></script>
|
||||
<script src="{% static 'js/observation_view.js' %}"></script>
|
||||
<script src="{% static 'js/satellite.js' %}"></script>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
"dnt-helper": "schalkneethling/dnt-helper",
|
||||
"eonasdan-bootstrap-datetimepicker": "^4.17.47",
|
||||
"jquery": "^3.2.1",
|
||||
"jquery.json-viewer": "^1.1.0",
|
||||
"mapbox-gl": "^0.40.1",
|
||||
"moment": "^2.18.1",
|
||||
"urijs": "^1.18.12",
|
||||
|
|
@ -43,6 +44,8 @@
|
|||
"urijs/src/URI.min.js",
|
||||
"dnt-helper/js/dnt-helper.js",
|
||||
"bootstrap-slider/dist/bootstrap-slider.min.js",
|
||||
"bootstrap-slider/dist/css/bootstrap-slider.min.css"
|
||||
"bootstrap-slider/dist/css/bootstrap-slider.min.css",
|
||||
"jquery.json-viewer/json-viewer/jquery.json-viewer.js",
|
||||
"jquery.json-viewer/json-viewer/jquery.json-viewer.css"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1788,6 +1788,10 @@ isobject@^3.0.0, isobject@^3.0.1:
|
|||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
|
||||
|
||||
jquery.json-viewer@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/jquery.json-viewer/-/jquery.json-viewer-1.1.0.tgz#e97878cfa64c938a1eaf8d25cdf61f04d53df78d"
|
||||
|
||||
"jquery@^1.8.3 || ^2.0 || ^3.0", jquery@^3.2.1:
|
||||
version "3.2.1"
|
||||
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787"
|
||||
|
|
|
|||
Loading…
Reference in New Issue