Skip to content

GitLab

Commit 8756550e authored by Tomas Pettersson's avatar Tomas Pettersson 🏸
Browse files

added cards

parent 7bb2b6d3
Hide whitespace changes
Inline Side-by-side
.gitignore 0 → 100644
View file @ 8756550e
**/node_modules/
/bower_components/
\ No newline at end of file
.vscode/tasks.json
View file @ 8756550e
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "echo",
"command": "tsc",
"isShellCommand": true,
"args": ["Hello World"],
"showOutput": "never"
"args": ["-p", "."],
"showOutput": "silent",
"problemMatcher": "$tsc"
}
\ No newline at end of file
Gruntfile.js 0 → 100644
View file @ 8756550e
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
wiredep: {
demo: {
includeSelf: true,
devDependencies: true,
src: ['demo/index.html'],
overrides : {
"stwkit" : {
"main" : [
"src/stwkit.js", "src/components/cards.js", "src/components/cards.css"
]
},
"uikit-stw": {
"main" : [
"js/uikit.js", "js/components/notify.min.js",'js/components/datepicker.min.js','js/components/timepicker.min.js','js/components/autocomplete.min.js','js/components/accordion.min.js',
"css/uikit.almost-flat.min.css", "css/components/notify.almost-flat.min.css",'css/components/datepicker.almost-flat.min.css', 'css/components/autocomplete.almost-flat.min.css', 'css/components/accordion.almost-flat.min.css'
]
},
"ion.rangeSlider": {
"main" : ["js/ion.rangeSlider.min.js", "css/ion.rangeSlider.css", "css/ion.rangeSlider.skinNice.css" ]
},
"jquery-file-upload": {
"main" : ["js/vendor/jquery.ui.widget.js", "js/jquery.iframe-transport.js", "js/jquery.fileupload.js" ]
},
"DataTables" : {
"main" : ["media/js/jquery.dataTables.min.js", "media/js/dataTables.uikit.min.js", "media/css/jquery.dataTables.min.css", "media/css/dataTables.uikit.min.css"]
},
"jquery.inputmask" : {
"main" : "dist/jquery.inputmask.bundle.js"
},
"leaflet.label" : {
"main" : ["dist/leaflet.label-src.js","dist/leaflet.label.css"]
}
}
}
}
});
grunt.loadNpmTasks('grunt-wiredep');
};
bower.json
View file @ 8756550e
......@@ -13,8 +13,20 @@
"type": "git",
"url": "git@git.smhi.se:stw/stwkit.git"
},
"dependencies": {},
"devDependencies": {},
"dependencies": {
},
"devDependencies": {
"jquery": "latest",
"uikit-stw": "https://git.smhi.se/stw/uikit-stw.git",
"leaflet": "https://github.com/Leaflet/Leaflet.git#v1.0.3",
"reqwest": "latest",
"moment": "latest",
"ion.rangeSlider": "latest",
"leaflet-container-control": "https://git.smhi.se/stw/leaflet-container-control.git",
"leaflet-coordinates-control": "https://git.smhi.se/stw/leaflet-coordinates-control.git",
"leaflet-forcing-boundary": "https://git.smhi.se/stw/leaflet-forcing-boundary.git",
"intro.js": "^2.5.0"
},
"license": "MIT",
"ignore": [
"**/.*",
......
demo/index.html 0 → 100644
View file @ 8756550e
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" style="font-size: 100%">
<head>
<title>stwkit - Demo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv='x-dns-prefetch-control' content='on'>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name='copyright' content='STW'>
<meta name='owner' content='STW'>
<!-- bower:css -->
<link rel="stylesheet" href="../bower_components/uikit-stw/css/uikit.almost-flat.min.css" />
<link rel="stylesheet" href="../bower_components/uikit-stw/css/components/notify.almost-flat.min.css" />
<link rel="stylesheet" href="../bower_components/uikit-stw/css/components/datepicker.almost-flat.min.css" />
<link rel="stylesheet" href="../bower_components/uikit-stw/css/components/autocomplete.almost-flat.min.css" />
<link rel="stylesheet" href="../bower_components/uikit-stw/css/components/accordion.almost-flat.min.css" />
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="../bower_components/ion.rangeSlider/css/ion.rangeSlider.css" />
<link rel="stylesheet" href="../bower_components/ion.rangeSlider/css/ion.rangeSlider.skinNice.css" />
<link rel="stylesheet" href="../bower_components/leaflet-container-control/dist/leaflet-container-control.css" />
<link rel="stylesheet" href="../bower_components/DataTables/media/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="../bower_components/DataTables/media/css/dataTables.uikit.min.css" />
<link rel="stylesheet" href="../bower_components/datatables.net-select-dt/css/select.dataTables.css" />
<link rel="stylesheet" href="../bower_components/leaflet.draw/dist/leaflet.draw.css" />
<link rel="stylesheet" href="../bower_components/leaflet-coordinates-control/dist/leaflet-coordinates-control.css" />
<link rel="stylesheet" href="../bower_components/leaflet-forcing-boundary/dist/leaflet-forcing-boundary.css" />
<link rel="stylesheet" href="../bower_components/intro.js/introjs.css" />
<link rel="stylesheet" href="../src/components/cards.css" />
<!-- endbower -->
</head>
<body>
<div id="map" style="position:absolute; top:0; bottom:0; left:0;right:0"></div>
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/uikit-stw/js/uikit.js"></script>
<script src="../bower_components/uikit-stw/js/components/notify.min.js"></script>
<script src="../bower_components/uikit-stw/js/components/datepicker.min.js"></script>
<script src="../bower_components/uikit-stw/js/components/timepicker.min.js"></script>
<script src="../bower_components/uikit-stw/js/components/autocomplete.min.js"></script>
<script src="../bower_components/uikit-stw/js/components/accordion.min.js"></script>
<script src="../bower_components/leaflet/dist/leaflet-src.js"></script>
<script src="../bower_components/reqwest/reqwest.js"></script>
<script src="../bower_components/moment/moment.js"></script>
<script src="../bower_components/ion.rangeSlider/js/ion.rangeSlider.min.js"></script>
<script src="../bower_components/leaflet-container-control/dist/leaflet-container-control.js"></script>
<script src="../bower_components/jquery.inputmask/dist/jquery.inputmask.bundle.js"></script>
<script src="../bower_components/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
<script src="../bower_components/jquery-file-upload/js/jquery.iframe-transport.js"></script>
<script src="../bower_components/jquery-file-upload/js/jquery.fileupload.js"></script>
<script src="../bower_components/DataTables/media/js/jquery.dataTables.min.js"></script>
<script src="../bower_components/DataTables/media/js/dataTables.uikit.min.js"></script>
<script src="../bower_components/datatables.net/js/jquery.dataTables.js"></script>
<script src="../bower_components/datatables.net-select/js/dataTables.select.js"></script>
<script src="../bower_components/leaflet.draw/dist/leaflet.draw.js"></script>
<script src="../bower_components/leaflet-coordinates-control/dist/leaflet-coordinates-control.js"></script>
<script src="../bower_components/leaflet-forcing-boundary/dist/leaflet-forcing-boundary.js"></script>
<script src="../bower_components/intro.js/intro.js"></script>
<script src="../src/stwkit.js"></script>
<script src="../src/components/cards.js"></script>
<!-- endbower -->
<script>
var language = 'en';
var coordinatesLangData = {
"tMarkerstart": "Click map to place point.",
"tPolygonstart": "Hold left mouse button to draw polygon on map.",
"tPolygoncont": "Hold left mouse button to draw polygon on map. Release button to finnish drawing.",
"tPolygonend": "Release button to finnish drawing.",
"tPolylinestart": "Hold left mouse button to draw line on map.",
"tPolylinecont": "Hold left mouse button to draw line on map. Release button to finnish drawing.",
"tPolylineend": "Release button to finnish drawing.",
"tDraw": "Draw outlet on map. Use LEFT mouse button while drawing.",
"tEdit": "Edit outlet shape",
"tManual": "Enter coordinates manually",
"tImport": "Import outlet as geojson file",
"tClear": "Clear drawn shapes from map",
"bManual": "Enter coordinates manually",
"bDraw": "Free hand draw on map",
"bImport": "Import GeoJson file",
"bClear": "Clear map",
"btClear": "Clear",
"sAreaPoint": "Point",
"sAreaPolyline": "Polyline",
"sAreaPolygon": "Polygon",
"sAreaMultiPoint": "MultiPoint",
"sAreaMultiPolyline": "MultiPolyline",
"sAreaMultiPolygon": "MultiPolygon",
"tArea": "Select outlet type",
"tLatitude": "Latitude",
"tLatituderange": "range",
"tLongitude": "Longitude",
"tLongituderange": "rang",
"rDDM": "Degrees Decimal Minutes ",
"rDD": "Decimal Degrees",
"bAdd": "Add",
"bDel": "Del",
"bCreate": "Create",
"bEdit": "Edit",
"bCancel": "Cancel",
"cCoordinates": "Coordinates"
};
var langData = {
"coordinates": coordinatesLangData
};
L.Control.SimpleComponent = L.Control.extend({
initialize: function (height, open) {
this._height = '500px';
if (height) {
this._height = height;
}
this.open = false;
if (typeof open === 'boolean') {
this.open = open;
}
},
onAdd: function (map) {
this.container = L.DomUtil.create('div', 'simple-component-control');
var accordionDiv = STWkit.DomUtil.create('div', 'uk-accordion', this.container);
var cardid = 'cardid1';
var forcing = {};
var forcing = false;
var obs = false;
var card = new LocationCard(cardid, accordionDiv, language, langData, map, forcing, obs);
card.show();
L.DomEvent.disableClickPropagation(this.container);
return this.container;
},
ready: function(name) { // this method is optional
if (this.open) {
var evt = document.createEvent("CustomEvent");
evt.initCustomEvent('container:showComponent', false, false, {
'name': name,
'show' : true
});
window.dispatchEvent(evt);
}
},
show: function() {},
hide: function() {}
});
var map = L.map('map').setView([ 58.5, 19.0 ], 5);
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom : 18,
attribution : '&copy; <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors</a>'
});
map.addLayer(osm);
var containerControl = new L.Control.Container({
position: 'topright',
collapse: true
});
map.addControl(containerControl);
containerControl.addComponent("Component1", new L.Control.SimpleComponent());
</script>
</body>
</html>
\ No newline at end of file
demo/server.js 0 → 100644
View file @ 8756550e
var express = require('express');
var path = require('path');
var app = express();
app.use('/bower_components', express.static(path.join(__dirname, '../bower_components')));
app.use('/src', express.static(path.join(__dirname, '../src')));
app.use('/demo', express.static(__dirname));
app.listen(8080);
console.log('Server started on http://localhost:8080...');
\ No newline at end of file
package.json 0 → 100644
View file @ 8756550e
{
"name": "stwkit",
"description": "Used for demo folder.",
"version": "0.0.1",
"private": true,
"dependencies": {
"express": "4.x",
"path": "latest"
},
"devDependencies": {
"grunt": "^1.0.1",
"grunt-wiredep": "^3.0.1"
}
}
src/components/cards.css 0 → 100644
View file @ 8756550e
.accordion-card .chevron-title {
border: 1px solid #ddd;
border-radius: 0px;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 10px;
padding-right: 10px;
font-size: 12px;
margin-bottom: 2px;
}
.accordion-card .uk-button.uk-active {
box-shadow: inset 0 0 5px rgba(0,0,0,.05);
background-color: #ddd;
font-weight: 600;
}
.accordion-card .irs-from {
background-color: #ddd;
color: black;
}
.accordion-card .irs-to {
background-color: #ddd;
color: black;
}
.accordion-card .irs-slider.from {
display: none;
}
.accordion-card .irs-slider.to {
display: none;
}
.accordion-card .next-enabled {
box-shadow: inset 0 0 5px rgba(0,0,0,.05);
text-shadow: 0 -1px 0 rgba(0,0,0,.1);
background-color: #8cc14c;
color: #fff;
}
.accordion-card .irs-disabled {
opacity: 1;
}
.accordion-card .uk-dropdown-small {
min-width: 100px
}
.accordion-card .uk-autocomplete {
width: 100px
}
.accordion-card .form-label {
display: inline-block;
padding-right: 5px;
}
.accordion-card .badge-neutral {
background: lightgray;
}
.accordion-card .percentage {
width: 65px;
}
.accordion-card .title {
padding-left: 5px;
}
.accordion-card .chevron-icon {
float: right;
margin-top: 4px;
margin-right: 3px;
}
.accordion-card .select {
display: inline-block;
margin-left: 3px;
}
.accordion-card .acc-content {
padding-top: 0px;
padding-bottom: 15px;
}
.introjs-helperLayer {
background-color: rgba(255,255,255,0);
}
.introjs-prevbutton {
display: none;
}
.accordion-card .legend-text {
display: inline-block;
position: relative;
left: 5px;
}
.accordion-card .legend-box {
display: inline-block;
top: 1px;
position: relative;
}
src/components/cards.js 0 → 100644
View file @ 8756550e
/// <reference path="../def/stwkit.d.ts" />
/// <reference path="../def/uikit.d.ts" />
/// <reference path="../def/leaflet.d.ts" />
/// <reference path="../def/leaflet-forcing-boundary.d.ts" />
/// <reference path="../def/moment.d.ts" />
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var AccordionCard = (function () {
function AccordionCard(id, label, parent, content) {
this.status = false;
var container = STWkit.DomUtil.create('div', 'accordion-card', parent);
this.title = STWkit.DomUtil.create('h5', 'uk-accordion-title uk-width-1-1 chevron-title', container);
this.title.id = id;
this.badgeSpan = STWkit.DomUtil.create('span', 'uk-badge', this.title);
var titleSpan = STWkit.DomUtil.create('span', 'title', this.title);
titleSpan.textContent = ' ' + label;
this.titleIcon = STWkit.DomUtil.create('span', 'uk-icon-chevron-down chevron-icon', this.title);
var accContent = STWkit.DomUtil.create('div', 'uk-accordion-content uk-padding-remove', container);
accContent.appendChild(content);
this.content = content;
this.hide();
this.changeListeners = [];
}
AccordionCard.prototype.addChangeFnListener = function (listener) {
this.changeListeners.push(listener);
};
AccordionCard.prototype.fireChangeFn = function (changeCard) {
for (var i = 0; i < this.changeListeners.length; i++) {
var listener = this.changeListeners[i];
listener.changeFn(changeCard);
}
};
AccordionCard.prototype.addLabelDiv = function (parentDiv, labelTxt, labelInfo) {
var self = this;
var label = STWkit.DomUtil.create('label', 'uk-form-label form-label', parentDiv);
label.textContent = labelTxt;
var addPositionInfo = STWkit.DomUtil.create('span', 'uk-icon-hover uk-icon-info-circle', parentDiv);
addPositionInfo.onclick = function () {
AccordionCard.infoMsg(labelTxt, labelInfo);
};
};
;
AccordionCard.infoMsg = function (title, msg) {
return UIkit.notify("<span class='uk-icon-small uk-icon-info-circle'></span> <b>" + title + "</b><p>" + msg, { status: 'info', timeout: 10000 });
};
AccordionCard.warningMsg = function (title, msg) {
return UIkit.notify("<span class='uk-icon-small uk-icon-info-circle'></span> <b>" + title + "</b><p>" + msg, { status: 'warning', timeout: 10000 });
};
AccordionCard.enableNext = function (button, enable) {
var isEnabled = button.classList.contains('next-enabled');
if (enable && !isEnabled) {
button.classList.add('next-enabled');
}
if (!enable && isEnabled) {
button.classList.remove('next-enabled');
}
};
AccordionCard.isEnabled = function (button) {
return button.classList.contains('next-enabled');
};
AccordionCard.prototype.clear = function () {
this.status = false;
};
AccordionCard.prototype.hide = function () {
this.title.style.display = 'none';
this.content.style.display = 'none';
};
AccordionCard.prototype.show = function () {
this.title.style.display = 'block';
this.content.style.display = 'block';
};
AccordionCard.prototype.visible = function () {
return (this.title.style.display == 'block');
};
return AccordionCard;
}());
var LocationCard = (function (_super) {
__extends(LocationCard, _super);
function LocationCard(id, parentDiv, lang, langData, map, forcing, obs) {
var _this = this;
var locationDiv = STWkit.DomUtil.create('div', 'uk-width-1-1 uk-margin-top', parentDiv);
_this = _super.call(this, id, 'Specify time and location', parentDiv, locationDiv) || this;
var self = _this;
if (forcing)
self.forcingBoundary = new Forcing.Boundary(locationDiv, map, forcing);
var satCallbackFn = function (latlngs, geojsonfeature, timestamp, id) {
self.clear();
var geojson = {};
geojson["type"] = "FeatureCollection";
geojson["features"] = [];
geojson["features"].push(geojsonfeature);
var observation = {
"id": id,
"provider": "EMSA",
"providerDataRef": null,
"providerImgRef": null,
"providerType": null,
"type": "SAT",
"date": moment.utc(timestamp).valueOf()
};
geojson.features[0].properties["observation"] = [];
geojson.features[0].properties["observation"].push(observation);
geojson.features[0].properties["simulation"] = {};
self.populateCard(geojson);
};
function legendBox(fieldset, color, text, size) {
var rowDiv = L.DomUtil.create('div', 'uk-form-row uk-margin-remove', fieldset);
var legendBox = L.DomUtil.create('div', 'legend-box', rowDiv);
legendBox.style.backgroundColor = color;
legendBox.style.width = size;
legendBox.style.height = size;
legendBox.title = text;
var legendText = L.DomUtil.create('div', 'legend-text', rowDiv);
legendText.textContent = text;
}
if (obs && obs.sat) {
self.satObs = new Observation.Sat(map, satCallbackFn, 'observation/oo');
var satDetectionDiv = L.DomUtil.create('div', '', locationDiv);
var satDetectionList = L.DomUtil.create('dl', 'uk-description-list-line', satDetectionDiv);
var satDetectionItem = L.DomUtil.create('dt', '', satDetectionList);
var satDetectionHeading = L.DomUtil.create('h5', 'uk-width-1-1 chevron-title', satDetectionItem);
satDetectionHeading.textContent = "Satellite oil detections";
self.satDetectionChevronIcon = L.DomUtil.create('span', 'uk-icon-chevron-down chevron-icon', satDetectionHeading);
self.satDetectionContent = L.DomUtil.create('div', 'uk-animation-fade', satDetectionItem);
self.satDetectionContent.style.display = 'none';
satDetectionHeading.onclick = function (evt) {
if (self.satDetectionChevronIcon.classList.contains('uk-icon-chevron-down')) {
self.satDetectionChevronIcon.classList.remove('uk-icon-chevron-down');
self.satDetectionChevronIcon.classList.add('uk-icon-chevron-up');
self.satDetectionContent.style.display = "";
self.satObs.show();
}
else {
self.satDetectionChevronIcon.classList.remove('uk-icon-chevron-up');
self.satDetectionChevronIcon.classList.add('uk-icon-chevron-down');
self.satDetectionContent.style.display = 'none';
self.satObs.hide();
}
};
var satDetectionform = L.DomUtil.create('form', 'uk-form uk-form-stacked', self.satDetectionContent);
satDetectionform.onsubmit = function (e) {
e.preventDefault();
e.stopPropagation();
return false;
};
var satDetectionfieldset = L.DomUtil.create('fieldset', '', satDetectionform);
var satDetectionRowDiv = L.DomUtil.create('div', 'uk-form-row uk-margin-top', satDetectionfieldset);
_super.prototype.addLabelDiv.call(_this, satDetectionRowDiv, "Detection frequency", "See more information <a style='color:#faa732;' href='help/classic/#oil-oo-satdetection' target='_blank'>here</a>");
legendBox(satDetectionfieldset, 'rgb(255, 0, 0)', 'Past day', '10px');
legendBox(satDetectionfieldset, 'rgb(255, 153, 0)', 'Past week', '10px');
legendBox(satDetectionfieldset, 'rgb(255, 255, 0)', 'Two weeks', '10px');
legendBox(satDetectionfieldset, 'rgb(255, 255, 204)', 'Older', '10px');
}
var obsform = L.DomUtil.create('form', 'uk-form uk-form-stacked', locationDiv);
obsform.onsubmit = function (e) {
e.preventDefault();
e.stopPropagation();
return false;
};
self.datetimeFormat = 'YYYY-MM-DD HH:mm';
self.datetimeTFormat = 'YYYY-MM-DDTHH:mm:ss.000';
self.dateFormat = 'YYYY-MM-DD';
self.timeFormat = 'HH:mm';
var obsdateLabelGrid = L.DomUtil.create('div', 'uk-grid', obsform);
var obsfieldset = L.DomUtil.create('fieldset', '', obsform);
var obsdateRowDiv = L.DomUtil.create('div', 'uk-form-row', obsfieldset);
_super.prototype.addLabelDiv.call(_this, obsdateRowDiv, "Observation time (UTC)", "See more information <a style='color:#faa732;' href='help/classic/#oil-oo-time' target='_blank'>here</a>");
var obsdateDiv = L.DomUtil.create('div', 'uk-form-controls uk-form-icon uk-width-1-1', obsdateRowDiv);
obsdateDiv.id = 'guideoo1';
var obsdateIcon = L.DomUtil.create('span', 'uk-icon-calendar', obsdateDiv);
self.obsDateInput = L.DomUtil.create('input', 'uk-width-1-2', obsdateDiv);
self.obsDateInput.type = 'text';
self.obsDateInput.placeholder = self.dateFormat;
self.obsTimeInput = L.DomUtil.create('input', 'uk-width-1-2', obsdateDiv);
self.obsTimeInput.type = 'text';
var typeLabelGrid = L.DomUtil.create('