Commit e147c5cf authored by Joern jkuensem's avatar Joern jkuensem Committed by Jorrit Schaap

TMSS-145: Add JSON editor widget to TaskDraft and Subtask DRF form view, some cleanup

parent 38b37529
<!-- EXTERNAL RESOURCES -->
<!--<link rel="stylesheet" id="theme" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script src="https://unpkg.com/react-jsonschema-form/dist/react-jsonschema-form.js"></script>
<!-- LOGIC -->
<script type="text/babel">
const { Component } = React;
const { render } = ReactDOM;
const {default: Form} = JSONSchemaForm;
const log = (type) => console.log.bind(console, type);
// Read current document provided by Django. Change 'null' default to {}
var formData = {{ field.value|safe }};
if (formData === "null" || formData === null){
var formData = {}
}
console.log("Initial data: " + JSON.stringify(formData));
// Updates the hidden input that Django will read the modified JSON from
function set_return_doc(doc){
document.getElementById("helper_input").value = JSON.stringify(doc.formData);
// console.log(JSON.stringify(doc.formData));
}
// Default live validation looks pretty nice in the demo, does not show here for some reason.
// Custom validation function works as such:
function validate(formData, errors) {
// todo: check formData against schema by some external script or so
// if(valid) (
errors.relative_starttime.addError("The horror!");
// }
return errors;
}
// This let's you change the appearance of the individual fields.
// Haven't found a global switch for fields of certain type yet.
const uiSchema = {
relative_starttime: { "ui:widget": "range" }
};
// Read schema uri that was specified by Serializer
const template_schema_uri = "{{field.style.template_schema_uri}}";
console.log('Loading template from ' + template_schema_uri);
// Get the schema, then render the form with it
$.get(template_schema_uri, function( template ) {
const schema = template['schema'];
console.log('Schema is: ' + JSON.stringify(schema));
console.log('Rendering JSON form');
render((
<Form schema={schema}
uiSchema={uiSchema}
formData={formData}
liveValidate={true}
//validate={validate} // does not work?!
onChange={set_return_doc}
onSubmit={log("submitted")}
onError={log("errors")} />
), document.getElementById("app"));
});
console.log('Rendering done');
</script>
<!-- WIDGET HTML -->
<div class="form-group {% if field.errors %}has-error{% endif %}">
<label class="col-sm-2 control-label">
{% if field.label %}{{ field.label }}{% endif %}
</label>
<input id="helper_input" name="{{ field.name }}" type="hidden" class="form-control" {% if field.value != None %} value="{{ field.value|safe }}"{% endif %}">
<div class="col-sm-10">
<div id="app"></div>
</div>
<!--<pre> {% debug %} </pre>-->
</div>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor/dist/jsoneditor.min.js"></script>
</head>
<body>
<div id='app'></div>
<script>
var element = document.getElementById('app');
var schema = {
"type": "array",
"title": "Numbers",
"items": {
"type": "number",
"format": "number",
"title": "Number"
}
};
var editor = new JSONEditor(element, {
schema: schema
});
document.querySelector('.get-value').addEventListener('click', function () {
debug.value = JSON.stringify(editor.getValue());
});
</script>
</body>
</html>
<!-- EXTERNAL RESOURCES -->
<!--<link rel="stylesheet" id="theme" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">-->
<!--<script src="https://unpkg.com/react@16/umd/react.development.js"></script>-->
<!--<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>-->
<!--<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor/dist/jsoneditor.min.js"></script>
<!-- WIDGET HTML -->
<div class="form-group {% if field.errors %}has-error{% endif %}">
<label class="col-sm-2 control-label">
{% if field.label %}{{ field.label }}{% endif %}
</label>
<input id="helper_input" name="{{ field.name }}" type="hidden" class="form-control" {% if field.value != None %} value="{{ field.value|safe }}"{% endif %}">
<div class="col-sm-10">
<div id="app"></div>
</div>
<!--<pre> {% debug %} </pre>-->
</div>
<!-- LOGIC -->
<script type="text/javascript">
// Read current document provided by Django. Change 'null' default to {}
var formData = {{ field.value|safe }};
if (formData === "null" || formData === null){
var formData = {}
}
console.log("Initial data: " + JSON.stringify(formData));
// Read schema (added to widget style by Serializer)
var schema = {{ field.style.schema|safe }};
console.log('Schema is: ' + JSON.stringify(schema));
// render the widget
console.log('Rendering JSON form');
JSONEditor.defaults.options.theme = 'bootstrap3';
JSONEditor.defaults.options.iconlib = "bootstrap3";
var element = document.getElementById('app');
var editor = new JSONEditor(element,{
schema: schema
});
editor.setValue(formData);
console.log('Rendering done');
// Updates the hidden input that Django will read the modified JSON from
editor.on('change',function() {
var value = editor.getValue();
document.getElementById("helper_input").value = JSON.stringify(value);
//console.log(JSON.stringify(value));
});
console.log(value)
</script>
<html>
<head>
<title>TMSS JSON EDITOR TEST</title>
<meta charset="utf-8">
<link rel="stylesheet" id="theme" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script src="https://unpkg.com/react-jsonschema-form/dist/react-jsonschema-form.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
const schema = {
"$id": "http://example.com/example.json",
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"definitions": {
"pointing": {
"type": "object",
"additionalProperties": false,
"format": "grid",
"properties": {
"direction_type": {
"type": "string",
"title": "Reference frame",
"description": "",
"default": "J2000",
"enum": [
"J2000",
"SUN",
"MOON",
"MERCURY",
"VENUS",
"MARS",
"JUPITER",
"SATURN",
"URANUS",
"NEPTUNE",
"PLUTO"
]
},
"angle1": {
"type": "number",
"title": "Angle 1",
"description": "First angle (f.e. RA)",
"default": 0
},
"angle2": {
"type": "number",
"title": "Angle 2",
"description": "Second angle (f.e. DEC)",
"default": 0
},
"distance": {
"type": "number",
"title": "Distance",
"description": "",
"default": 0,
"minimum": 0,
"required": false
}
}
},
"beamformer_settings": {
"oneOf": [
{
"type": "object",
"title": "Disabled",
"additionalProperties": false,
"format": "grid",
"properties": {}
},
{
"type": "object",
"title": "Enabled",
"additionalProperties": false,
"format": "grid",
"properties": {
"enabled": {
"type": "boolean",
"format": "checkbox",
"title": "Enabled",
"description": "",
"default": true,
"options": {
"hidden": true
},
"enum": [
true
]
},
"storage_cluster": {
"type": "string",
"title": "Storage cluster",
"description": "Which cluster to write the data to",
"default": "CEP4",
"enum": [
"CEP4",
"DragNet"
]
},
"channels_per_subband": {
"type": "integer",
"title": "Channels/subband",
"description": "Number of frequency bands per subband",
"default": 1,
"enum": [
1,
16,
32,
64,
128
]
},
"stokes": {
"type": "string",
"title": "Stokes parameters",
"description": "Which stokes to produce",
"default": "I",
"enum": [
"I",
"IQUV",
"XXYY"
]
},
"integration_factor": {
"type": "integer",
"title": "Integration factor (samples)",
"description": "Number of samples to integrate",
"default": 1,
"minimum": 1
},
"subbands_per_file": {
"type": "integer",
"title": "Subbands/file",
"description": "Fewer creates more but smaller files",
"default": 512,
"minimum": 1,
"maximum": 512
}
}
}
]
}
},
"format": "grid",
"additionalProperties": false,
"properties": {
"relative_starttime": {
"type": "number",
"title": "Relative starttime (seconds)",
"description": "Starttime with respect to other observations in this scheduling unit",
"default": 0,
"minimum": 0
},
"duration": {
"type": "number",
"title": "Duration (seconds)",
"description": "Duration of this observation",
"default": 60,
"minimum": 0
},
"station_mode": {
"type": "object",
"title": "Station mode",
"format": "grid",
"additionalProperties": false,
"properties": {
"bitmode": {
"type": "integer",
"title": "Bits/sample",
"description": "Sample sensitivity. Fewer bits allow more subbands.",
"default": 8,
"enum": [
4,
8,
16
]
},
"clockMHz": {
"type": "integer",
"title": "Clock (MHz)",
"description": "Sample clock",
"default": 200,
"enum": [
160,
200
]
},
"antenna_type": {
"type": "string",
"title": "Antenna type",
"description": "Determines frequency range and offset of subbands",
"default": "HBA",
"enum": [
"LBA",
"HBA"
]
},
"filter": {
"type": "string",
"title": "Band-pass filter",
"description": "Must match antenna type and clock",
"default": "HBA_110_190",
"enum": [
"LBA_10_70",
"LBA_30_70",
"LBA_10_90",
"LBA_30_90",
"HBA_110_190",
"HBA_170_230",
"HBA_210_250"
]
}
}
},
"stations": {
"type": "object",
"title": "Station list",
"additionalProperties": false,
"properties": {
"station_list": {
"title": "Station list",
"oneOf": [
{
"type": "array",
"title": "Fixed list",
"format": "checkbox",
"additionalItems": false,
"additionalProperties": false,
"items": {
"type": "string",
"enum": [
"CS001",
"CS002",
"CS003",
"CS004",
"CS005",
"CS006",
"CS007",
"CS011",
"CS013",
"CS017",
"CS021",
"CS024",
"CS026",
"CS028",
"CS030",
"CS031",
"CS032",
"CS101",
"CS103",
"CS201",
"CS301",
"CS302",
"CS401",
"CS501",
"RS104",
"RS106",
"RS205",
"RS208",
"RS210",
"RS305",
"RS306",
"RS307",
"RS310",
"RS406",
"RS407",
"RS409",
"RS410",
"RS503",
"RS508",
"RS509",
"DE601",
"DE602",
"DE603",
"DE604",
"DE605",
"FR606",
"SE607",
"UK608",
"DE609",
"PL610",
"PL611",
"PL612",
"IE613"
],
"title": "Station",
"description": ""
},
"minItems": 1,
"uniqueItems": true
},
{
"title": "Dynamic list",
"type": "array",
"format": "tabs",
"additionalItems": false,
"items": {
"type": "object",
"format": "grid",
"title": "Station set",
"headerTemplate": "{{ self.group }}",
"additionalProperties": false,
"properties": {
"group": {
"type": "string",
"title": "Group/station",
"description": "Which (group of) station(s) to search in",
"default": "LOFAR"
},
"min_stations": {
"type": "integer",
"title": "Minimum nr of stations",
"description": "Number of stations to use within group/station",
"default": 1,
"minimum": 0
}
}
}
}
]
},
"antenna_set": {
"type": "string",
"title": "Antenna set",
"description": "Must match antenna type",
"default": "HBA_DUAL",
"enum": [
"HBA_DUAL",
"HBA_DUAL_INNER",
"HBA_JOINED",
"HBA_JOINED_INNER",
"HBA_ONE",
"HBA_ONE_INNER",
"HBA_ZERO",
"HBA_ZERO_INNER",
"LBA_INNER",
"LBA_OUTER",
"LBA_SPARSE_EVEN",
"LBA_SPARSE_ODD"
]
},
"analog_pointing": {
"title": "Analog pointing",
"description": "HBA only",
"$ref": "#/definitions/pointing",
"required": []
}
}
},
"beams": {
"type": "array",
"title": "Beams",
"format": "tabs",
"additionalItems": false,
"items": {
"title": "Beam",
"headerTemplate": "{{ i0 }} - {{ self.name }}",
"type": "object",
"additionalProperties": false,
"properties": {
"name": {
"type": "string",
"title": "Name/target",
"description": "Identifier for this beam",
"default": ""
},
"digital_pointing": {
"title": "Digital pointing",
"$ref": "#/definitions/pointing"
},
"subbands": {
"type": "array",
"title": "Subband list",
"format": "table",
"additionalItems": false,
"items": {
"type": "integer",
"title": "Subband",
"minimum": 0
}
},
"correlator": {
"type": "object",
"title": "Correlator",
"additionalProperties": false,
"required": [],
"properties": {
"pointing": {
"$ref": "#/definitions/pointing"
}
}
},
"coherent_beamformer": {
"type": "object",
"title": "Coherent Beamformer",
"additionalProperties": false,
"properties": {
"pointings": {
"type": "array",
"format": "tabs",
"title": "Pointings",
"additionalItems": false,