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

added cards

parent 7bb2b6d3
\ No newline at end of file
// See
// 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
module.exports = function(grunt) {
// Project configuration.
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"]
......@@ -13,8 +13,20 @@
"type": "git",
"url": ""
"dependencies": {},
"devDependencies": {},
"dependencies": {
"devDependencies": {
"jquery": "latest",
"uikit-stw": "",
"leaflet": "",
"reqwest": "latest",
"moment": "latest",
"ion.rangeSlider": "latest",
"leaflet-container-control": "",
"leaflet-coordinates-control": "",
"leaflet-forcing-boundary": "",
"intro.js": "^2.5.0"
"license": "MIT",
"ignore": [
<html lang="en" style="font-size: 100%">
<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/" />
<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 -->
<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/"></script>
<script src="../bower_components/"></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 -->
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;
} = false;
if (typeof open === 'boolean') { = 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);;
return this.container;
ready: function(name) { // this method is optional
if ( {
var evt = document.createEvent("CustomEvent");
evt.initCustomEvent('container:showComponent', false, false, {
'name': name,
'show' : true
show: function() {},
hide: function() {}
var map ='map').setView([ 58.5, 19.0 ], 5);
var osm = L.tileLayer('http://{s}{z}/{x}/{y}.png', {
maxZoom : 18,
attribution : '&copy; <a href="" target="_blank">OpenStreetMap</a> contributors</a>'
var containerControl = new L.Control.Container({
position: 'topright',
collapse: true
containerControl.addComponent("Component1", new L.Control.SimpleComponent());
\ No newline at end of file
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));
console.log('Server started on http://localhost:8080...');
\ No newline at end of file
"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"
.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 {
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 {
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;
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
// Type definitions for for Ion.RangeSlider 2.0.2
// Project:
// Definitions by: Sixin Li <>
// Definitions:
// API documentation:
interface JQuery {
destroy(): void;
ionRangeSlider(): JQuery;
ionRangeSlider(options: IonRangeSliderOptions): JQuery;
reset(): void;
update(option: IonRangeSliderOptions): void;
interface IonRangeSliderOptions {
decorate_both?: boolean;
disable?: boolean;
drag_interval?: boolean;
force_edges?: boolean;
from?: number;
from_fixed?: boolean;
from_max?: number;
from_min?: number;
from_shadow?: boolean;
grid?: boolean;
grid_margin?: boolean;
grid_num?: number;
grid_snap?: boolean;
hide_from_to?: boolean;
hide_min_max?: boolean;
keyboard?: boolean;
keyboard_step?: number;
max?: number;
max_interval?: number;
max_postfix?: string;
min?: number;
min_interval?: number;
onChange?: (obj: IonRangeSliderEvent) => void;
onFinish?: (obj: IonRangeSliderEvent) => void;
onStart?: (obj: IonRangeSliderEvent) => void;
onUpdate?: (obj: IonRangeSliderEvent) => void;
postfix?: string;
prefix?: string;
prettify?: (num: number) => string;
prettify_enabled?: boolean;
prettify_separator?: string;
step?: number;
to?: number;
to_fixed?: boolean;
to_max?: number;
to_min?: number;
to_shadowed?: boolean;
type?: string;
values?: any[];
values_separator?: string;
interface IonRangeSliderEvent {
from: number;
from_precent: number;
from_value: any;
input: JQuery;
max: number;
min: number;
slider: JQuery;
to: number;
to_precent: number;
to_value: any;
This diff is collapsed.
This diff is collapsed.
declare namespace Forcing {
export var Boundary: any;
// Type definitions for Leaflet.markercluster v0.4.0
// Project:
// Definitions by: Robert Imig <>
// Definitions:
declare namespace L {
export interface MarkerClusterGroupOptions {
* When you mouse over a cluster it shows the bounds of its markers.
showCoverageOnHover?: boolean;
* When you click a cluster we zoom to its bounds.
zoomToBoundsOnClick?: boolean;
* When you click a cluster at the bottom zoom level we spiderfy it
* so you can see all of its markers.
spiderfyOnMaxZoom?: boolean;
* Clusters and markers too far from the viewport are removed from the map
* for performance.
removeOutsideVisibleBounds?: boolean;
* Smoothly split / merge cluster children when zooming and spiderfying.
* If L.DomUtil.TRANSITION is false, this option has no effect (no animation is possible).
animate?: boolean;
* If set to true (and animate option is also true) then adding individual markers to the
* MarkerClusterGroup after it has been added to the map will add the marker and animate it
* into the cluster. Defaults to false as this gives better performance when bulk adding markers.
* addLayers does not support this, only addLayer with individual Markers.
animateAddingMarkers?: boolean;
* If set, at this zoom level and below markers will not be clustered. This defaults to disabled.
disableClusteringAtZoom?: number;
* The maximum radius that a cluster will cover from the central marker (in pixels). Default 80.
* Decreasing will make more, smaller clusters.
maxClusterRadius?: number;
* Options to pass when creating the L.Polygon(points, options) to show the bounds of a cluster.
* Defaults to empty
polygonOptions?: PolylineOptions;
* If set to true, overrides the icon for all added markers to make them appear as a 1 size cluster.
singleMarkerMode?: boolean;
* Allows you to specify PolylineOptions to style spider legs.
* By default, they are { weight: 1.5, color: '#222', opacity: 0.5 }.
spiderLegPolylineOptions?: PolylineOptions;
* Increase from 1 to increase the distance away from the center that spiderfied markers are placed.
* Use if you are using big marker icons (Default: 1).
spiderfyDistanceMultiplier?: number;
* Function used to create the cluster icon
iconCreateFunction?: any;
export class MarkerClusterGroup extends FeatureGroup<ILayer> {
initialize(): void;
initialize(options: MarkerClusterGroupOptions): void;
* Bulk methods for adding and removing markers and should be favoured over the
* single versions when doing bulk addition/removal of markers.
* If you have a marker in your MarkerClusterGroup and you want to get the visible
* parent of it
getVisibleParent(marker: Marker): Marker;
* If you have customized the clusters icon to use some data from the contained markers,
* and later that data changes, use this method to force a refresh of the cluster icons.
refreshClusters(marker: Marker):MarkerClusterGroup;
refreshClusters(markers: Marker[]):MarkerClusterGroup;
* Returns the total number of markers contained within that cluster.
getChildCount(): number;