Changeset 249 for binary-improvements/webserver

Timestamp:

Aug 7, 2015, 10:18:37 AM (9 years ago)

Author:

alloc

Message:

Fixes: Web v8

Location:

binary-improvements/webserver

Files:

• ThirdParty-Libs.txt (modified) (1 diff)
• css/style.css (modified) (13 diffs)
• img/background.jpg (added)
• index.html (modified) (3 diffs)
• js/inventory_dialog.js (modified) (1 diff)
• js/leaflet.control.gametime.js (added)
• js/leaflet.control.login.js (added)
• js/leaflet.control.reloadtiles.js (modified) (3 diffs)
• js/leaflet.layer.sdtdtiles.js (added)
• js/map.js (modified) (7 diffs)
• js/permissions.js (modified) (2 diffs)
• js/tabs.js (modified) (1 diff)
• leaflet/measure (added)
• leaflet/measure/images (added)
• leaflet/measure/images/cancel.png (added)
• leaflet/measure/images/cancel_@2X.png (added)
• leaflet/measure/images/check.png (added)
• leaflet/measure/images/check_@2X.png (added)
• leaflet/measure/images/focus.png (added)
• leaflet/measure/images/focus_@2X.png (added)
• leaflet/measure/images/rulers.png (added)
• leaflet/measure/images/rulers_@2X.png (added)
• leaflet/measure/images/start.png (added)
• leaflet/measure/images/start_@2X.png (added)
• leaflet/measure/images/trash.png (added)
• leaflet/measure/images/trash_@2X.png (added)
• leaflet/measure/leaflet-measure.css (added)
• leaflet/measure/leaflet-measure.js (added)
• leaflet/measure/leaflet-measure.min.js (added)

binary-improvements/webserver/ThirdParty-Libs.txt

@@ -6 +6 @@
         - Zoomslider: http://kartena.github.io/Leaflet.zoomslider/
         - Leaflet MiniMap: https://github.com/Norkart/Leaflet-MiniMap
+        - Leaflet Measure: https://github.com/ljagis/leaflet-measure
 

binary-improvements/webserver/css/style.css

@@ -6 +6 @@
         margin: 0;
         padding: 0;
+        background-image: url('/static/img/background.jpg');
+        background-repeat: no-repeat;
+        background-attachment: fixed;
+        background-position: center; 
+        color: orange;
+}
+
+a {
+        color: #ff6000;
+        text-decoration: none;
+}
+
+a:visited {
+        color: #ff6000;
+        text-decoration: none;
 }
 
@@ -11 +26 @@
         width: 100%;
         height: 100vh;
-        background-color: #408040;
+        /*background-color: #408040;*/
 }
 
@@ -19 +34 @@
         top: 0;
         bottom: 0;
+}
+
+.invalidinput {
+        background-color: #f00;
 }
 
@@ -29 +48 @@
         width: 200px;
         left: 0;
-        background-color: #408040;
+        border-right: 1px solid rgba(0,0,0,0.3);
+        box-shadow: 3px 0px 14px rgba(0,0,0,0.9);
 }
 
@@ -53 +73 @@
 
 .adminnavbar #adminmenu .menu_button a {
-        color: #000;
+        color: orange;
         text-decoration: none;
 }
@@ -69 +89 @@
         margin-bottom: 20px;
         display: none;
-        color: #000;
+        /* color: orange; */
         text-decoration: none;
 }
@@ -86 +106 @@
         left: 0px;
         right: 0px;
-        background-color: #408040;
+        /*background-color: #408040;*/
 }
 
@@ -106 +126 @@
         right: 0;
         left: 200px;
-        background-color: #408040;
+        /*background-color: #408040;*/
 }
 
@@ -125 +145 @@
 }
 
-/* Individual tabs */
-
-.adminmap {
-        background-color: #408040;
-        bottom: 0;
-}
-
 
 
@@ -144 +157 @@
         left: 10px;
 }
+
+.inventoryButton {
+        cursor: pointer;
+}
+#playerInventoryDialog {
+        display:none;
+}
+.playerInventoryDialog {
+        text-shadow:
+                -1px -1px 0 black,  
+                1px -1px 0 black,
+                -1px 1px 0 black,
+                1px 1px 0 black;
+        box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+        color: orange;
+        background: rgba(100,100,100,0.6);
+        border: none;
+}
+.playerInventoryDialog .ui-dialog-buttonpane {
+        display: none;
+}
+.playerInventoryDialog.ui-dialog {
+        z-index:1011 !important;
+}
+.ui-widget-overlay {
+        z-index:1010 !important;
+        opacity: 0.4 !important;
+}
+.playerInventoryDialog .ui-widget-content {
+        background: transparent;
+        color: orange;
+}
+.playerInventoryDialog td {
+        vertical-align: top;
+}
+
 .invTable {
         table-layout: fixed;
@@ -150 +199 @@
         border-collapse: collapse;
 }
-.invField {
+#equipmentTable .invFieldText {
+        display: none;
+}
+.playerInventoryDialog td.invField {
         width: 58px;
         height: 40px;
@@ -156 +208 @@
         margin: 0px;
         border: 1px solid gray;
-        background-color: #303030;
+        background-color: black;
         background-size: 58px;
         background-repeat: no-repeat;
@@ -163 +215 @@
         text-align: right;
         font-size: 14pt;
-        color: #ffffff;
         text-shadow:
-                -1px -1px 0 #000,  
-                1px -1px 0 #000,
-                -1px 1px 0 #000,
-                1px 1px 0 #000;
-}
-
-#equipmentTable .invFieldText {
-        display: none;
-}
-
-.inventoryButton {
-        color: #00ff00;
-        cursor: pointer;
-}
-#playerInventoryDialog {
-        display:none;
-}
-
-.ui-dialog {
-        z-index:1011 !important;
-}
-.ui-widget-overlay {
-        z-index:1010 !important;
-}
-
-
-
-/* Map controls */
-
-
-.webmap-control a,
-.webmap-control a:hover {
-        text-decoration: none;
+                -1px -1px 0 black,  
+                1px -1px 0 black,
+                -1px 1px 0 black,
+                1px 1px 0 black;
+}
+
+
+
+
+/*========================================
+-   Map
+*/
+
+.adminmap {
+        /*background-color: #408040;*/
+        background-color: transparent;
+        bottom: 0;
+}
+
+.adminmap .leaflet-control {
+        background-color: rgba(50,50,50,0.6);
+        color: orange;
+        box-shadow: 0 3px 14px rgba(0,0,0,0.5);
+}
+
+.adminmap a,
+.adminmap a:hover,
+.adminmap .leaflet-container a,
+.adminmap .leaflet-container a:hover {
+        text-decoration: none;
+        color: #ff6000;
 }
 
 .webmap-control {
-        box-shadow: 0 1px 5px rgba(0,0,0,0.4);
-        background: #fff;
         border-radius: 5px;
         padding: 6px 10px 6px 6px;
-        color: #333;
         white-space: nowrap;
 }
 
+.adminmap .leaflet-popup-tip,
+.adminmap .leaflet-popup-content-wrapper {
+        background-color: rgba(50,50,50,0.8);
+        color: orange;
+}
+

binary-improvements/webserver/index.html

@@ -29 +29 @@
         <script type="text/javascript" src="leaflet/minimap/Control.MiniMap.js"></script>
         
+        <!-- Leaflet Measure -->
+        <link rel="stylesheet" href="leaflet/measure/leaflet-measure.css" />
+        <script type="text/javascript" src="leaflet/measure/leaflet-measure.min.js"></script>
+        
         <!-- Own JS stuff -->
+        <script type="text/javascript" src="js/leaflet.layer.sdtdtiles.js"></script>
         <script type="text/javascript" src="js/leaflet.regionlayer.js"></script>
+        <script type="text/javascript" src="js/leaflet.layer.landclaims.js"></script>
         <script type="text/javascript" src="js/leaflet.control.coordinates.js"></script>
         <script type="text/javascript" src="js/leaflet.control.reloadtiles.js"></script>
-        <script type="text/javascript" src="js/leaflet.layer.landclaims.js"></script>
+        <script type="text/javascript" src="js/leaflet.control.gametime.js"></script>
         <script type="text/javascript" src="js/inventory_dialog.js"></script>
         <script type="text/javascript" src="js/util.js"></script>
@@ -89 +95 @@
         <div id="playerInventoryDialog" title="Player inventory">
                 Player: <span id="invPlayerName"></span><br/>
+                <br/>
                 <table>
                         <tr>
@@ -95 +102 @@
                                         <table class="invTable" id="bagTable">
                                         </table>
+                                        <br/>
                                 </td>
                                 <td rowspan="2">

binary-improvements/webserver/js/inventory_dialog.js

@@ -57 +57 @@
 
                 $( "#playerInventoryDialog" ).css("z-index", "1010").dialog({
+                        dialogClass: "playerInventoryDialog",
                         modal: true,
                         width: BAG_COLS*(INV_ITEM_WIDTH+14) + 3*(INV_ITEM_WIDTH+14) + 20,

binary-improvements/webserver/js/leaflet.control.reloadtiles.js

@@ -2 +2 @@
         options: {
                 position: 'bottomleft',
+                autoreload_enable: true,
+                autoreload_minInterval: 30,
+                autoreload_interval: 120,
+                autoreload_defaultOn: false,
                 layers: []
         },
@@ -9 +13 @@
                     container = L.DomUtil.create('div', name + ' webmap-control');
 
-                L.DomEvent.on (container, 'mousemove', L.DomEvent.stopPropagation);
+                var stop = L.DomEvent.stopPropagation;
+                L.DomEvent
+                    .on (container, 'mousemove', stop)
+                    .on (container, 'click', stop)
+                    .on (container, 'mousedown', stop)
+                    .on (container, 'dblclick', stop);
 
                 this._map = map;
+                
+                this._reloadbutton = $("<a>")
+                        .addClass (name+"-btn")
+                        .text ("Reload tiles now")
+                        .attr ("href", "#")
+                        .attr ("title", "Reload tiles now")
+                        .on ("click.action", null, this, this._reload);
+                $(container).append (this._reloadbutton);
 
-                this._reloadbutton = this._createButton(
-                        "Reload tiles", "Reload tiles",
-                        name + "-btn", container, this._reload, this);
+                if (this.options.autoreload_enable) {
+                        $(container).append ("<br>");
+                
+                        this._autocheck = $("<input>")
+                                .addClass (name + "-chk")
+                                .attr ("type", "checkbox")
+                                .attr ("name", "map_reloadtiles_autoreload")
+                                .attr ("id", "map_reloadtiles_autoreload")
+                                .attr ("value", "1")
+                                .on ("change", null, this, this._selectreload);
+                        if (this.options.autoreload_defaultOn) {
+                                this._autocheck.attr ("checked", "checked");
+                                this._timeout = window.setTimeout ($.proxy (this._reloadTilesEvent, this), this.options.autoreload_interval*1000);
+                        }
+                        $(container).append (this._autocheck);
+                
+                        var label1 = $("<label>")
+                                .attr ("for", "map_reloadtiles_autoreload");
+                        label1.append ("Reload every ");
+                        $(container).append (label1);
+                
+                        this._reloadinterval = $("<input>")
+                                .addClass (name + "-txt")
+                                .attr ("name", "map_reloadtiles_autoreload_time")
+                                .attr ("type", "text")
+                                .attr ("size", "4")
+                                .attr ("maxlength", "5")
+                                .attr ("value", this.options.autoreload_interval)
+                                .on ("input", null, this, this._verifyinterval);
+                        $(container).append (this._reloadinterval);
 
+                        var label2 = $("<label>")
+                                .attr ("for", "map_reloadtiles_autoreload");
+                        label2.append (" seconds");
+                        $(container).append (label2);
+                }
+                
                 return container;
         },
@@ -22 +72 @@
         onRemove: function (map) {
         },
+        
+        _selectreload: function (e) {
+                if (e.data._autocheck.prop ("checked")) {
+                        e.data._timeout = window.setTimeout ($.proxy (e.data._reloadTilesEvent, e.data), e.data.options.autoreload_interval*1000);
+                } else {
+                        window.clearTimeout (e.data._timeout);
+                }
+        },
+        
+        _verifyinterval: function (e) {
+                var val = e.data._reloadinterval.val ();
+                if (/^[\d]+$/.test (val)) {
+                        if (val >= e.data.options.autoreload_minInterval) {
+                                e.data._reloadinterval.removeClass ("invalidinput");
+                                e.data.options.autoreload_interval = val;
+                                if (e.data._autocheck.prop ("checked")) {
+                                        window.clearTimeout (e.data._timeout);
+                                        e.data._timeout = window.setTimeout ($.proxy (e.data._reloadTilesEvent, e.data), e.data.options.autoreload_interval*1000);
+                                }
+                        } else {
+                                e.data._reloadinterval.addClass ("invalidinput");
+                        }
+                } else {
+                        e.data._reloadinterval.addClass ("invalidinput");
+                }
+        },
 
         _reload: function (e) {
                 var newTileTime = new Date().getTime();
                 
-                for (var i = 0; i < this.options.layers.length; i++) {
-                        this.options.layers [i].options.time = newTileTime;
-                        this.options.layers [i].redraw ();
+                for (var i = 0; i < e.data.options.layers.length; i++) {
+                        e.data.options.layers [i].options.time = newTileTime;
+                        e.data.options.layers [i].redraw ();
                 }
         },
 
-        _createButton: function (html, title, className, container, fn, context) {
-                var link = L.DomUtil.create('a', className, container);
-                link.innerHTML = html;
-                link.href = '#';
-                link.title = title;
-
-                var stop = L.DomEvent.stopPropagation;
-
-                L.DomEvent
-                    .on(link, 'click', stop)
-                    .on(link, 'mousedown', stop)
-                    .on(link, 'dblclick', stop)
-                    .on(link, 'click', L.DomEvent.preventDefault)
-                    .on(link, 'click', fn, context)
-                    .on(link, 'click', this._refocusOnMap, context);
-                   
-                return link;
-        }
+        _reloadTilesEvent: function() {
+                var div = this._div;
+                this._reload ({data: this});
+                this._timeout = window.setTimeout ($.proxy (this._reloadTilesEvent, this), this.options.autoreload_interval*1000);
+        },
 
 });

binary-improvements/webserver/js/map.js

@@ -33 +33 @@
         });
 
-
-
-
         // ===============================================================================================
         // Map and basic tile layers
-
-        var initTime = new Date().getTime();
 
         map = L.map('tab_map', {
@@ -48 +43 @@
         }).setView([0, 0], Math.max(0, mapinfo.maxzoom - 5));
 
-        var tileLayer = L.tileLayer('../map/{z}/{x}/{y}.png?t={time}', {
-                maxZoom: mapinfo.maxzoom + 1,
-                minZoom: Math.max(0, mapinfo.maxzoom - 5),
-                maxNativeZoom: mapinfo.maxzoom,
-                tileSize: mapinfo.tilesize,
-                continuousWorld: true,
-                tms: true,
-                unloadInvisibleTiles: false,
-                time: initTime
-        });
-        
-        // TileLayer w/ TMS=true fix for zoomlevel >= 8
-        tileLayer._getWrapTileNum = function () {
-                return L.point(0, 0);
-        };
-
-        var tileLayerMiniMap = L.tileLayer('../map/{z}/{x}/{y}.png?t={time}', {
-                maxZoom: mapinfo.maxzoom,
-                minZoom: 0,
-                maxNativeZoom: mapinfo.maxzoom,
-                tileSize: mapinfo.tilesize,
-                continuousWorld: true,
-                tms: true,
-                unloadInvisibleTiles: false,
-                time: initTime
-        });
-
-
-
+
+        var initTime = new Date().getTime();
+        var tileLayer = GetSdtdTileLayer (mapinfo, initTime);
+        var tileLayerMiniMap = GetSdtdTileLayer (mapinfo, initTime, true);
 
 
@@ -92 +62 @@
 
 
-
-        var baseLayers = {
-                //"Map": tileLayer
-        };
-
-        var layerControl = L.control.layers(baseLayers, null, {
-                collapsed: false
-        });
+        var layerControl = L.control.layers({
+                        //"Map": tileLayer
+                }, null, {
+                        collapsed: false
+                }
+        );
         
         var layerCount = 0;
@@ -105 +73 @@
 
         tileLayer.addTo(map);
+
         new L.Control.Coordinates({}).addTo(map);
-        new L.Control.ReloadTiles({layers: [tileLayer, tileLayerMiniMap]}).addTo(map);
+        
+        new L.Control.ReloadTiles({
+                autoreload_enable: true,
+                autoreload_minInterval: 30,
+                autoreload_interval: 120,
+                autoreload_defaultOn: false,
+                layers: [tileLayer, tileLayerMiniMap]
+        }).addTo(map);
+        
         layerControl.addOverlay (GetRegionLayer (mapinfo), "Region files");
+        
         var miniMap = new L.Control.MiniMap(tileLayerMiniMap, {
                 zoomLevelOffset: -6,
@@ -113 +91 @@
         }).addTo(map);
 
+        var measure = L.control.measure({
+                //primaryLengthUnit: "meters",
+                //primaryAreaUnit: "sqmeters",
+                //activeColor: "#ABE67E",
+                //completedColor: "#C8F2BE",
+                position: "bottomleft"
+        });
+        //measure.addTo(map);
+
+        //new L.Control.GameTime({}).addTo(map);
+        
         if (HasPermission ("webapi.getlandclaims")) {
                 layerControl.addOverlay (GetLandClaimsLayer (map, mapinfo), "Land claims");
                 layerCount++;
         }
+        
         if (HasPermission ("webapi.getplayerslocation")) {
                 layerControl.addOverlay (playersOfflineMarkerGroup, "Players (offline) (<span id='mapControlOfflineCount'>0</span>)");
@@ -148 +138 @@
                         if (playersMappingList.hasOwnProperty(val.steamid)) {
                                 marker = playersMappingList[val.steamid].currentPosMarker;
-                                marker.setLatLng([val.position.x, val.position.z]);
                         } else {
                                 marker = L.marker([val.position.x, val.position.z]).bindPopup(
@@ -158 +147 @@
                                 playersMappingList[val.steamid] = { online: !val.online };
                         }
-                        if (playersMappingList[val.steamid].online != val.online) {
-                                if (val.online) {
+                        if (playersMappingList[val.steamid].online) {
+                                playersOnlineMarkerGroup.removeLayer(marker);
+                        } else {
+                                playersOfflineMarkerGroup.removeLayer(marker);
+                        }
+                        marker.setLatLng([val.position.x, val.position.z]);
+                        if (val.online) {
                                         marker.setOpacity(1.0);
-                                        playersOfflineMarkerGroup.removeLayer(marker);
                                         playersOnlineMarkerGroup.addLayer(marker);
-                                } else {
+                        } else {
                                         marker.setOpacity(0.5);
-                                        playersOnlineMarkerGroup.removeLayer(marker);
                                         playersOfflineMarkerGroup.addLayer(marker);
-                                }
                         }
+
                         val.currentPosMarker = marker;
                         playersMappingList[val.steamid] = val;

binary-improvements/webserver/js/permissions.js

@@ -36 +36 @@
         })
         .always(function () {
-                $("#nopermissionwarning").attr ("style", "display: block");
+                if (PermissionCount () == 0) {
+                        $("#nopermissionwarning").attr ("style", "display: block");
+                }
         })
 }
@@ -49 +51 @@
 }
 
+function PermissionCount () {
+        var cnt = 0;
+        for (var i = 0; i < userdata.permissions.length; i++) {
+                if (userdata.permissions [i].allowed) cnt++;
+        }
+        return cnt;
+}
+

binary-improvements/webserver/js/tabs.js

@@ +1 @@
+var tabElements = {};
+var currentTabClass = "current_tab";
+
+function OpenTab () {
+        var menuElement = $(this);
+        var linkElement = menuElement.children ("a");
+        var linkName = linkElement.attr ("href");
+
+        $("*").removeClass (currentTabClass);
+        menuElement.addClass (currentTabClass);
+        $(linkName).addClass (currentTabClass);
+}
+
 function InitializeTabs () {
         $("#adminmenu > ul > li").addClass ("menu_button");