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

added cards

parent 7bb2b6d3
**/node_modules/
/bower_components/
\ No newline at end of file
{
// 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
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');
};
......@@ -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": [
"**/.*",
......
<!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
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
{
"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 .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;
}
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
// Type definitions for for Ion.RangeSlider 2.0.2
// Project: https://github.com/IonDen/ion.rangeSlider/
// Definitions by: Sixin Li <https://github.com/sixinli>
// Definitions: https://github.com/borisyankov/DefinitelyTyped
// API documentation: http://ionden.com/a/plugins/ion.rangeSlider/en.html
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: https://github.com/Leaflet/Leaflet.markercluster
// Definitions by: Robert Imig <https://github.com/rimig>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
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.
*/
addLayers(layers:ILayer[]):MarkerClusterGroup;
removeLayers(layers:ILayer[]):MarkerClusterGroup;
clearLayers():MarkerClusterGroup;
/*
* 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():MarkerClusterGroup;
refreshClusters(layerGroup:LayerGroup<ILayer>):MarkerClusterGroup;
refreshClusters(marker: Marker):MarkerClusterGroup;
refreshClusters(markers: Marker[]):MarkerClusterGroup;
/*
* Returns the total number of markers contained within that cluster.
*/
getChildCount(): number;
/*
* Returns the array of total markers contained within that cluster.
*/
getAllChildMarkers(): Marker[];
}
}
This diff is collapsed.
This diff is collapsed.
// Type definitions for Moment.js 2.8.0
// Project: https://github.com/timrwood/moment
// Definitions by: Michael Lakerveld <https://github.com/Lakerfield>, Aaron King <https://github.com/kingdango>, Hiroki Horiuchi <https://github.com/horiuchi>, Dick van den Brink <https://github.com/DickvdBrink>, Adi Dahiya <https://github.com/adidahiya>, Matt Brooks <https://github.com/EnableSoftware>
// Definitions: https://github.com/borisyankov/DefinitelyTyped
/// <reference path="moment-node.d.ts" />
declare var moment: moment.MomentStatic;
declare function reqwest(json: any) : void;
\ No newline at end of file
declare var STWkit : any;
\ No newline at end of file
This diff is collapsed.
......@@ -208,4 +208,17 @@ var STWkit = {
return { left: p.x, right: p.x + 210, top: p.y, bottom: p.y + 20 };
}
};
\ No newline at end of file