Added Docker stuff.

components/about/about.component.js

@@ -0,0 +1,26 @@
+'use strict';
+
+angular
+    .module('sloDialectsApp')
+    .component('aboutComponent', {
+        templateUrl: 'components/about/about.template.html',
+        bindings: {
+            resolve: '<',
+            close: '&',
+            dismiss: '&',
+            modalInstance: '<'
+        },
+        controller: [function aboutController() {
+            var vm = this;
+
+            vm.$onInit = function () {
+                // injected result
+                vm.modalInstance.result.then(function(){
+                    
+                }, function(){
+                    
+                });
+            };
+
+        }]
+    });

components/about/about.template.html

@@ -0,0 +1,38 @@
+<div class="modal-header">
+    <button type="button" class="close" ng-click="$ctrl.close();"><span aria-hidden="true">&times;</span></button>
+    <h4 class="modal-title" id="myModalLabel">O spletni aplikaciji</h4>
+</div>
+<div class="modal-body">
+
+        <h3>Avtor</h3>
+        <p>Avtor spletne aplikacije je Ivan Lovrić, študent Fakultete za računalništvo in informatiko Univerze v Ljubljani. Aplikacijo je izdelal v okviru diplomske naloge v letu 2018 pod mentorstvom viš. pred. dr. Alenke Kavčič (UL FRI) in somentorstvom prof. dr. Vere Smole (UL FF).</p>
+		<p>Izdelano spletno aplikacijo je z dodatnimi funkcionalnostmi nadgradil Nermin Jukan, študent Fakultete za računalništvo in informatiko Univerze v Ljubljani, v okviru predmeta Računalništvo v praksi I pod mentorstvom viš. pred. dr. Alenke Kavčič (junij 2018).</p>
+        
+        <h3>Aplikacija</h3>
+        <p><strong>Interaktivna karta slovenskih narečnih besedil / Interactive map of Slovenian dialectal texts</strong>
+        <br>Copyright © 2018 Ivan Lovrić (ivan@lovric.si)</p>
+        
+        <p>Ta program spada med prosto programje; lahko ga razširjate in/ali spreminjate pod pogoji Splošnega dovoljenja GNU (GNU General Public License), različice 3, kot ga je objavila ustanova Free Software Foundation.</p>
+        <p>Ta program se razširja v upanju, da bo uporaben, vendar BREZ VSAKRŠNEGA JAMSTVA; tudi brez posredne zagotovitve CENOVNE VREDNOSTI ali PRIMERNOSTI ZA DOLOČEN NAMEN. Za podrobnosti glejte besedilo GNU General Public License.</p>
+        <p>Skupaj s tem programom bi morali prejeti izvod Splošnega dovoljenja GNU (GNU General Public License). Podrobnosti licence so dostopne tudi na spletni strani <a href="http://www.gnu.org/licenses" target="_blank">http://www.gnu.org/licenses</a>.</p>
+                
+        <p>Izvorna koda aplikacije je dosegljiva v repozitoriju Bitbucket: <a href="https://bitbucket.org/ul-fri-lgm/iknb" target="_blank">https://bitbucket.org/ul-fri-lgm/iknb</a>.</p>
+        
+        <h3>Vsebina (posnetki, transkripcije, poknjižitve in analize)</h3>
+        <p>Vsebino za Interaktivno karto slovenskih narečnih besedil (IKNB) za temo Stare kmečke hiše so zbrali in pripravili študenti Oddelka za slovenistiko Filozofske fakultete Univerze v Ljubljani. Zvočne posnetke, transkripcije in poknjižitve besedil so prispevali študentje izbirnega predmeta Slovenska narečja pod vodstvom prof. dr. Vere Smole in asist. dr. Mojce Kumin Horvat, analize pa študentje izbirnega predmeta Poglavja iz zgodovine slovenskega glasoslovja in seminarja pri predmetu Slovenska dialektologija pod vodstvom prof. dr. Vere Smole.</p>
+        <p>Vsem študentom, preteklim in bodočim, in njihovim informatorjem se zahvaljujemo za sodelovanje in njihov prispevek.</p>
+        
+        <h3>Karta slovenskih narečij</h3>
+        <p>Interaktivna karta slovenskih narečnih besedil (IKNB) temelji na Karti slovenskih narečij. Karto sta priredila Tine Logar in Jakob Rigler (1983) na osnovi Dialektološke karte slovenskega jezika Frana Ramovša (1931), novejših raziskav in gradiva Inštituta za slovenski jezik ZRC SAZU, jo dopolnili Vera Smole in Jožica Škofic (2011) in nato še sodelavci Dialektološke sekcije ISJFR ZRC SAZU (2016).</p>
+        
+        <p>© Inštitut za slovenski jezik Frana Ramovša ZRC SAZU, Geografski inštitut Antona Melika ZRC SAZU ter Inštitut za antropološke in prostorske študije ZRC SAZU, 2016 </p>
+        
+        <h3>Pisava ZRCola</h3>
+        <p>Besedilo je bilo pripravljeno z vnašalnim sistemom ZRCola (<a href="http://zrcola.zrc-sazu.si" target="_blank">http://zrcola.zrc-sazu.si</a>), ki ga je na Znanstvenoraziskovalnem centru SAZU v Ljubljani (<a href="http://www.zrc-sazu.si" target="_blank">http://www.zrc-sazu.si</a>) razvil Peter Weiss.</p>
+        
+        <small>Zadnja sprememba: julij 2018, Nermin Jukan</small>
+
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="$ctrl.close();">Zapri</button>
+</div>

components/dialect/dialect.component.js

@@ -0,0 +1,111 @@
+'use strict';
+
+angular
+    .module('sloDialectsApp')
+    .component('dialectComponent', {
+        templateUrl: 'components/dialect/dialect.template.html',
+        bindings: {
+            resolve: '<',
+            close: '&',
+            dismiss: '&',
+            modalInstance: '<'
+        },
+        controller: ['$scope', '$rootScope', 'Config', function dialectController($scope, $rootScope, Config) {
+            var vm = this;
+
+            vm.$onInit = function () {
+                // injected resolve
+                vm.dialectData = vm.resolve.dialectData;
+		vm.dialectData.audio = Config.APP_PATH + vm.dialectData.audio;
+                vm.analysisData = prepareAnalysisData(vm.resolve.analysisData);
+
+                // prepare print view
+                $rootScope.printData = $rootScope.printData || {};
+                $rootScope.printData.dialectData = vm.dialectData;
+                $rootScope.printData.analysisData = vm.analysisData;
+
+                // injected modal result
+                vm.modalInstance.result.then(function(){
+                    if(vm.wavesurfer){
+                        vm.wavesurfer.destroy(); // close button clicked (success)
+                    }
+                }, function(){
+                    if(vm.wavesurfer){
+                        vm.wavesurfer.destroy(); // ESC key or backdrop click (fail)
+                    }
+                });
+            };
+
+            function prepareAnalysisData(analysis){
+                var _analysisData = [];
+                analysis.forEach(function(a){
+                    _analysisData[a.section] = _analysisData[a.section] || [];
+                    _analysisData[a.section].push({
+                        maintext: a.maintext,
+                        examples: a.examples
+                    });
+                });
+                return _analysisData;
+            }
+
+            vm.ok = function(){
+                vm.close();
+            }
+
+            // wafesurfer //
+            var activeUrl = null;
+
+            vm.paused = true;
+
+            $scope.$on('wavesurferInit', function (e, wavesurfer) {
+
+                vm.wavesurfer = vm.wavesurfer || wavesurfer;
+
+                /*
+                wavesurfer.on('loading', function (percents) {
+                    document.getElementById('progress').value = percents;
+                    $scope.$apply();
+                  });
+              
+                wavesurfer.on('ready', function (percents) {
+                document.getElementById('progress').style.display = 'none';
+                $scope.$apply();
+                });
+                */
+
+                vm.wavesurfer.on('play', function () {
+                    vm.paused = false;
+                });
+
+                vm.wavesurfer.on('pause', function () {
+                    vm.paused = true;
+                });
+
+                vm.wavesurfer.on('finish', function () {
+                    vm.paused = true;
+                    vm.wavesurfer.seekTo(0);
+                    $scope.$apply();
+                });
+            });
+
+            vm.play = function (url) {
+                if (!vm.wavesurfer) {
+                    return;
+                }
+
+                activeUrl = url;
+
+                vm.wavesurfer.once('ready', function () {
+                    vm.wavesurfer.play();
+                    $scope.$apply();
+                });
+
+                vm.wavesurfer.load(activeUrl);
+            };
+
+            vm.isPlaying = function (url) {
+                return url == activeUrl;
+            };
+
+        }]
+    });

components/dialect/dialect.template.html

@@ -0,0 +1,49 @@
+<div class="modal-header">
+    
+    <button type="button" class="close" ng-click="$ctrl.ok();" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+    <button type="button" class="btn btn-primary" onclick="window.print();" style="float:right; margin-right:25px;">Natisni</button>
+    <h4 class="modal-title">{{ $ctrl.dialectData.location_name }} ({{ $ctrl.dialectData.location_label }}) - {{ $ctrl.dialectData.dialect_key | nameDialect }}, {{ $ctrl.dialectData.dialect_key | nameDialectGroup }}</h4>
+    <pre class="location-metadata">{{ $ctrl.dialectData.metadata }}</pre>
+</div>
+<div class="modal-body">
+    <div class="row">
+        <div class="col-xs-12">
+            <div id="play-pause" ng-click="$ctrl.wavesurfer.playPause()"></div>
+            <ng-wavesurfer url="{{$ctrl.dialectData.audio}}" wave-color="#337ab7" progress-color="#23527c" height="128" scroll-parent="true" style="height:128px;">
+                <!--<progress id="progress" class="progress progress-striped" value="0" max="100" style="width:100%;"></progress>-->
+            </ng-wavesurfer>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-xs-12 col-md-6">
+            <h4>Transkripcija</h4>
+            <div id="transkripcija">{{ $ctrl.dialectData.transcription }}</div>
+        </div>
+        <div class="col-xs-12 col-md-6">
+            <h4>Poknjižitev</h4>
+            <div id="poknjizitev">{{ $ctrl.dialectData.standard_slovene }}</div>
+        </div>
+        <div class="col-xs-12" ng-if="$ctrl.dialectData['analysis1']">
+            <h4>Analiza</h4>
+            
+            <table class="table table-bordered" id="analiza">
+                <tbody ng-repeat="i in [1,2,3,4,5,6,7]">
+                    <tr class="tr-head">
+                        <td>{{i}}</td>
+                        <td colspan="2">{{ $ctrl.dialectData["analysis"+i] }}</td>
+                    </tr>
+                    <tr ng-repeat="a in $ctrl.analysisData[i]" class="analysis-items">
+                        <td>{{i}}.{{$index+1}}</td>
+                        <td>{{a.maintext}}</td>
+                        <td>{{a.examples}}</td>
+                    </tr>
+                </tbody>
+            </table>
+
+        </div>
+    </div>
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-primary" onclick="window.print();">Natisni</button>
+    <button type="button" class="btn btn-default" ng-click="$ctrl.ok();">Zapri</button>
+</div>

components/legend/legend.component.js

@@ -0,0 +1,40 @@
+'use strict';
+
+angular
+  .module('sloDialectsApp')
+  .component('dialectLegend', {
+    templateUrl: 'components/legend/legend.template.html',
+    controller: ['geojsonService', '$scope', '$rootScope', 'dialects', function LegendController(geojsonService, $scope, $rootScope, dialects) {
+
+      var vm = this;
+      vm.dialectGroups = dialects;
+      vm.mouseEnter = mouseEnter;
+      vm.mouseLeave = mouseLeave;
+
+      function mouseEnter(id, type){
+        var hoverWeight = 5;
+        if(id.indexOf('narecna_skupina') > -1){
+          $rootScope.layersArr[id].bringToFront();
+        }
+        $rootScope.layersArr[id].setStyle({
+          weight: hoverWeight,
+          color: "#b23636"
+        });
+      }
+
+      function mouseLeave(elem, type){
+        var id = elem.id;
+        var resetWeight = 1;
+				if(id.indexOf('narecna_skupina') > -1){
+          $rootScope.layersArr[id].bringToBack();
+					resetWeight = 3;
+        }
+        $rootScope.layersArr[id].setStyle({
+          weight: resetWeight,
+          color: "#000000"
+        });
+        
+      }
+
+    }]
+  });

components/legend/legend.template.html

@@ -0,0 +1,18 @@
+<div id="legenda" class="hidden-mobile">
+
+    <div ng-repeat="(id, dialectGroup) in $ctrl.dialectGroups" id="{{id}}">
+        <strong ng-mouseover="$ctrl.mouseEnter(id, 'group')" ng-mouseleave="$ctrl.mouseLeave(this)" class="pointer">{{ dialectGroup.name }}</strong>
+        <div class="legenda-box"></div>
+        <div class="legenda-dialects">
+            <div ng-repeat="(id, dialect) in dialectGroup.dialects" class="legenda-dialect" >
+                <span ng-mouseover="$ctrl.mouseEnter(id, 'dialect')" ng-mouseleave="$ctrl.mouseLeave(this)" class="pointer">{{ dialect.name }}</span>
+                <div class="legenda-subdialects">
+                    <div ng-repeat="(id, subdialect) in dialect.subdialects" class="legenda-subdialect">
+                        <i ng-mouseover="$ctrl.mouseEnter(id, 'subdialect')" ng-mouseleave="$ctrl.mouseLeave(this)" class="pointer">{{ subdialect.name }}</i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>

components/main/main.component.js

@@ -0,0 +1,220 @@
+'use strict';
+
+angular
+	.module('sloDialectsApp')
+	.component('app', {
+		templateUrl: 'components/main/main.template.html',
+		controller: ['$filter', 'geojsonService', '$q', '$scope', '$rootScope', '$timeout', '$uibModal', '$http', 'leafletData', function MainController($filter, geojsonService, $q, $scope, $rootScope, $timeout, $uibModal, $http, leafletData) {
+
+			var vm = this;
+			var colorDialect = $filter('colorDialect');
+			var patternDialect = $filter('patternDialect');
+			var nameDialect = $filter('nameDialect');
+			var nameDialectGroup = $filter('nameDialectGroup');
+
+			var leafletMap;
+
+			leafletData.getMap('karta').then(function(_map) {
+                vm.info = "Karta slovenskih narečnih besedil se nalaga ...";
+                leafletMap = _map;
+			});
+
+			vm.center = {
+				lat: 46.05,
+				lng: 14.53,
+				zoom: 9
+			};
+
+			vm.maxBounds = {
+				northEast: {
+					lat: 47.2,
+					lng: 17
+				},
+				southWest: {
+					lat: 45,
+					lng: 13
+				}
+			}
+
+			function style(feature) {
+				var id = feature.properties.id;
+				var pattern = patternDialect(id);
+				var fillPattern = false;
+				if( pattern.type == 'stripes' ){
+					fillPattern = new L.StripePattern( pattern.config )
+					fillPattern.addTo(leafletMap);
+				} else if( pattern.type == 'circles' ){
+					var shape = new L.PatternCircle( pattern.config );
+					fillPattern = new L.Pattern({width:20, height:20});
+					fillPattern.addShape(shape);
+					fillPattern.addTo(leafletMap);
+				}
+
+				var dashArray = 'none';
+				var weight = 1;
+				if(id.indexOf('podnarecje') > -1){
+					dashArray = '5';
+				}
+				if(id.indexOf('narecna_skupina') > -1){
+					weight = 3;
+				}
+
+                return {
+					fillColor: colorDialect(id),
+					fillPattern: fillPattern,
+                    weight: weight,
+                    opacity: 1,
+                    color: '#000000',
+                    dashArray: dashArray,
+					fillOpacity: 0.8
+                };
+            }
+
+			geojsonService.getAllSorted().then(function (response) {
+				vm.geojson = {
+					data: response.data,
+					style: style,
+					resetStyleOnMouseout: true,
+					onEachFeature: onEachFeature,
+					resetStyleOnMouseout: true
+				}
+			});
+
+			$rootScope.layersArr = [];
+
+			function onEachFeature(feature, layer) {
+
+				$rootScope.layersArr[feature.properties.id] = layer;
+
+				layer.on({
+					mouseover: highlightFeature,
+					mouseout: resetHighlight
+				});
+			}
+
+			function highlightFeature(e) {
+				var id = e.target.feature.properties.id;
+				vm.info = id;
+
+				if( id.indexOf('narecna_skupina') === -1){ // do not highlight dialect groups
+					var layer = e.target;
+					layer.setStyle({
+						weight: 5,
+						color: "#b23636"
+					});
+				}
+			}
+
+			function resetHighlight(e) {
+				var layer = e.target;
+				var resetWeight = 1;
+				if(layer.feature.properties.id.indexOf('narecna_skupina') > -1){
+					resetWeight = 3;
+				}
+				layer.setStyle({
+					weight: resetWeight,
+					color: "#000000"
+				});
+			}
+
+			vm.features = [];
+
+			vm.info = "Premaknite miško na željeno območje za prikaz imena narečja";
+
+			getMarkers();
+
+			function getMarkers() {
+				$http.get('api/dialects').then(function (response) {
+					//console.log(response.data)
+					vm.markers = {};
+					var i;
+					for(i=0; i < response.data.length; i++){
+						vm.markers[ response.data[i]['location_label'] ] = {
+							lat: parseFloat(response.data[i]['location_latitude']),
+							lng:  parseFloat(response.data[i]['location_longitude']),
+							icon: getIconConfig( response.data[i]  ),
+							title: response.data[i]['location_name']
+						}
+					}
+				});
+			}
+
+			$scope.$on('leafletDirectiveMarker.karta.mouseover', function(event, args){
+				var id = args.model.icon.dialectKey; 
+				vm.info = args.model.title + " - " + nameDialect(id) + ", " + nameDialectGroup(id);
+			});
+
+			$scope.$on('leafletDirectiveMarker.karta.mouseout', function(event, args){
+				resetInfoBox();
+			});
+
+			$scope.$on('leafletDirectiveMarker.karta.click', function(event, args){
+				var id = args.model.icon.dialectId;
+				openDialectModal(id);
+			});
+
+			$scope.$on("leafletDirectiveGeoJson.karta.mouseover", function(event, args) {
+				var id = args.model.properties.id
+				vm.info = id;
+			});
+
+			$scope.$on("leafletDirectiveGeoJson.karta.mouseout", function(event, args) {
+				resetInfoBox();
+			});
+			
+			function resetInfoBox(){
+				vm.info = "Premaknite miško na željeno območje za prikaz imena narečja";
+			}
+
+			function getIconConfig(data){
+
+				var label = data['location_label'];
+				var dialect_key = data['dialect_key'];
+				var id = data['id'];
+				 
+				return {
+					type: 'div',
+					iconAnchor: [18, 55],
+					iconSize: [0, 0],
+					html: '<svg x="0px" y="0px" viewBox="0 0 365 560" style="width:36px; cursor:pointer;"><g><path fill="'+colorDialect(dialect_key)+'" stroke="#000000" stroke-width="20" d="M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9 C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,175.3,357.4S182.9,551.7,182.9,551.7z"/></g></svg>\
+						   <div style="font-size:1.5em; color:#000000; position: absolute; top: 10px; text-align: center; width:36px;">'+label+'</div>',
+					dialectKey: dialect_key,
+					dialectId: id
+				};
+			}
+
+			vm.openAboutModal = function () {
+				var modalInstance = $uibModal.open({
+					component: 'aboutComponent',
+					size: 'wide'
+				});
+				// handle modal dismiss
+				modalInstance.result.then(function () { }, function () { });
+			}
+
+			function openDialectModal (dialect_id) {
+				var modalInstance = $uibModal.open({
+					component: 'dialectComponent',
+					size: 'wide',
+					resolve: {
+						// will be injected into controller
+						dialectData: function () {
+							return $http.get('api/dialects/' + dialect_id).then(function (response) {
+								return response.data;
+							}, function (err) {
+								console.log('Error getting dialect', dialect_id, '-', err);
+							});
+						},
+						analysisData: function () {
+							return $http.get('api/dialects/' + dialect_id + '/analysis/').then(function (response) {
+								return response.data;
+							}, function (err) {
+								console.log('Error getting analysis for dialect', dialect_id, '-', err);
+							});
+						}
+					}
+				});
+			}
+
+		}]
+	});

components/main/main.template.html

@@ -0,0 +1,26 @@
+<!---
+* Edited by:     Nermin Jukan, 63150367
+* Date:          17. 05. 2018
+* Modifications: Added a new heading 'h2' tag with text 'Stara kmečka hiša'.
+
+--->
+
+<leaflet id="karta" width="100%" height="100%" center="$ctrl.center" geojson="$ctrl.geojson" markers="$ctrl.markers" maxbounds="$ctrl.maxBounds"></leaflet>
+
+<div id="main">
+
+    <div id="title" class="hidden-mobile">
+	    <h1>Interaktivna karta slovenskih narečnih besedil<br>Stara kmečka hiša</h1>
+    </div>
+
+    <div id="o-projektu" ng-click="$ctrl.openAboutModal()">O spletni aplikaciji</div>
+
+    <dialect-legend></dialect-legend>
+
+    <div id="info-box-wrap">
+        <div id="info-box">{{ $ctrl.info | nameDialect }}<span ng-if="$ctrl.info | nameDialectGroup">, {{ $ctrl.info | nameDialectGroup }}</span></div>
+    </div>
+
+</div>
+
+<print></print>

components/print/print.component.js

@@ -0,0 +1,30 @@
+'use strict';
+
+angular
+    .module('sloDialectsApp')
+    .component('print', {
+        templateUrl: 'components/print/print.template.html',
+        controller: ['$scope', '$rootScope', function printController($scope, $rootScope) {
+
+            var vm = this;
+
+            $scope.$watch(
+                function() { return ($rootScope.printData && $rootScope.printData.dialectData) ? $rootScope.printData.dialectData : '' },
+                function(dialectData) {
+                    if(dialectData){
+                        vm.dialectData = dialectData;
+                    }
+                }
+            );
+
+            $scope.$watch(
+                function() { return ($rootScope.printData && $rootScope.printData.analysisData) ? $rootScope.printData.analysisData : '' },
+                function(analysisData) {
+                    if(analysisData){
+                        vm.analysisData = analysisData;
+                    }
+                }
+            );
+
+        }]
+    });

components/print/print.template.html

@@ -0,0 +1,44 @@
+<div class="container printable">
+    <div class="row">
+
+        <div class="col-xs-12">
+            <h4 class="print-title">
+                Interaktivna karta slovenskih narečnih besedil, Stara kmečka hiša:<br>
+                {{ $ctrl.dialectData.location_name }} ({{ $ctrl.dialectData.location_label }}) - {{ $ctrl.dialectData.dialect_key | nameDialect }}, {{ $ctrl.dialectData.dialect_key | nameDialectGroup }}</h4>
+        </div>
+
+        <div class="col-xs-12">
+            <h4>Komentar</h4>
+            <div id="print_meta"><pre>{{ $ctrl.dialectData.metadata }}</pre></div>
+        </div>
+
+        <div class="col-xs-12">
+            <h4>Transkripcija</h4>
+            <div id="print_transkripcija">{{ $ctrl.dialectData.transcription }}</div>
+        </div>
+
+        <div class="col-xs-12">
+            <h4>Poknjižitev</h4>
+            <div id="print_poknjizitev">{{ $ctrl.dialectData.standard_slovene }}</div>
+        </div>
+
+        <div class="col-xs-12">
+            <h4>Analiza</h4>
+            <table class="table table-bordered" id="print_analiza">
+                <tbody ng-repeat="i in [1,2,3,4,5,6,7]">
+                    <tr class="tr-head">
+                        <td>{{i}}</td>
+                        <td colspan="2">{{ $ctrl.dialectData["analysis"+i] }}</td>
+                    </tr>
+                    <tr ng-repeat="a in $ctrl.analysisData[i]" class="analysis-items">
+                        <td>{{i}}.{{$index+1}}</td>
+                        <td>{{a.maintext}}</td>
+                        <td>{{a.examples}}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+    </div>
+
+</div>