From 5fb35f85ad7147759249538bbb78e8380ae52d71 Mon Sep 17 00:00:00 2001 From: exodus4d Date: Sat, 22 Nov 2014 18:19:54 +0100 Subject: [PATCH] update system-info module --- config.rb | 3 +- img/icons/dotlan_logo.png | Bin 0 -> 3551 bytes img/overlay-pattern.png | Bin 0 -> 107 bytes index.htm | 2 +- js/app.js | 57 ++- js/app/counter.js | 6 +- js/app/init.js | 110 +++- js/app/main.js | 29 +- js/app/map/map.js | 141 +++--- js/app/module_map.js | 588 +++++++++++++++++----- js/app/util.js | 66 +++ js/lib/bootbox.min.js | 6 + sass/_colors.scss | 17 +- sass/_variables.scss | 34 +- sass/bootstrap/_close.scss | 2 - sass/bootstrap/_mixins.scss | 8 +- sass/bootstrap/_modals.scss | 10 +- sass/bootstrap/_tables.scss | 2 +- sass/bootstrap/_variables.scss | 4 +- sass/layout/_all.scss | 3 +- sass/layout/_images.scss | 11 + sass/layout/_main.scss | 134 ++++- sass/layout/_map.scss | 72 +-- sass/layout/_system-info.scss | 100 ++-- sass/library/data-tables/_dataTables.scss | 2 +- sass/smartadmin/_main.scss | 19 +- templates/form/progress.html | 18 +- templates/modules/system_info.html | 61 +++ 28 files changed, 1113 insertions(+), 392 deletions(-) create mode 100644 img/icons/dotlan_logo.png create mode 100644 img/overlay-pattern.png create mode 100644 js/app/util.js create mode 100644 js/lib/bootbox.min.js create mode 100644 sass/layout/_images.scss create mode 100644 templates/modules/system_info.html diff --git a/config.rb b/config.rb index 63b43d67..fc55a7c7 100644 --- a/config.rb +++ b/config.rb @@ -8,7 +8,8 @@ require 'compass/import-once/activate' http_path = "/" css_dir = "css" sass_dir = "sass" -images_dir = "images" +images_dir = "img" +generated_images_path = "img_cache" javascripts_dir = "javascripts" # You can select your preferred output style here (can be overridden via the command line): diff --git a/img/icons/dotlan_logo.png b/img/icons/dotlan_logo.png new file mode 100644 index 0000000000000000000000000000000000000000..fa0e94b2f536926bd983935349ee8f6ace1ecbc4 GIT binary patch literal 3551 zcmV<54IuJ~P)KLZ*U+IBfRsybQWXdwQbLP>6pAqfylh#{fb6;Z(vMMVS~$e@S=j*ftg6;Uhf59&ghTmgWD0l;*T zI709Y^p6lP1rIRMx#05C~cW=H_Aw*bJ-5DT&Z2n+x)QHX^p z00esgV8|mQcmRZ%02D^@S3L16t`O%c004NIvOKvYIYoh62rY33S640`D9%Y2D-rV&neh&#Q1i z007~1e$oCcFS8neI|hJl{-P!B1ZZ9hpmq0)X0i`JwE&>$+E?>%_LC6RbVIkUx0b+_+BaR3cnT7Zv!AJxW zizFb)h!jyGOOZ85F;a?DAXP{m@;!0_IfqH8(HlgRxt7s3}k3K`kFu>>-2Q$QMFfPW!La{h336o>X zu_CMttHv6zR;&ZNiS=X8v3CR#fknUxHUxJ0uoBa_M6WNWeqIg~6QE69c9o#eyhGvpiOA@W-aonk<7r1(?fC{oI5N*U!4 zfg=2N-7=cNnjjOr{yriy6mMFgG#l znCF=fnQv8CDz++o6_Lscl}eQ+l^ZHARH>?_s@|##Rr6KLRFA1%Q+=*RRWnoLsR`7U zt5vFIcfW3@?wFpwUVxrVZ>QdQz32KIeJ}k~{cZZE^+ya? z2D1z#2HOnI7(B%_ac?{wFUQ;QQA1tBKtrWrm0_3Rgps+?Jfqb{jYbcQX~taRB;#$y zZN{S}1|}gUOHJxc?wV3fxuz+mJ4`!F$IZ;mqRrNsHJd##*D~ju=bP7?-?v~|cv>vB zsJ6IeNwVZxrdjT`yl#bBIa#GxRa#xMMy;K#CDyyGyQdMSxlWT#tDe?p!?5wT$+oGt z8L;Kp2HUQ-ZMJ=3XJQv;x5ci*?vuTfeY$;({XGW_huIFR9a(?@3)XSs8O^N5RyOM=TTmp(3=8^+zpz2r)C z^>JO{deZfso3oq3?Wo(Y?l$ge?uXo;%ru`Vo>?<<(8I_>;8Eq#KMS9gFl*neeosSB zfoHYnBQIkwkyowPu(zdms`p{<7e4kra-ZWq<2*OsGTvEV%s0Td$hXT+!*8Bnh2KMe zBmZRodjHV?r+_5^X9J0WL4jKW`}lf%A-|44I@@LTvf1rHjG(ze6+w@Jt%Bvjts!X0 z?2xS?_ve_-kiKB_KiJlZ$9G`c^=E@oNG)mWWaNo-3TIW8)$Hg0Ub-~8?KhvJ>$ z3*&nim@mj(aCxE5!t{lw7O5^0EIO7zOo&c6l<+|iDySBWCGrz@C5{St!X3hAA}`T4 z(TLbXTq+(;@<=L8dXnssyft|w#WSTW<++3>sgS%(4NTpeI-VAqb|7ssJvzNHgOZVu zaYCvgO_R1~>SyL=cFU|~g|hy|Zi}}s9+d~lYqOB71z9Z$wnC=pR9Yz4DhIM>Wmjgu z&56o6maCpC&F##y%G;1PobR9i?GnNg;gYtchD%p19a!eQtZF&3JaKv33gZ<8D~47E ztUS1iwkmDaPpj=$m#%)jCVEY4fnLGNg2A-`YwHVD3gv};>)hAvT~AmqS>Lr``i7kw zJ{5_It`yrBmlc25DBO7E8;5VoznR>Ww5hAaxn$2~(q`%A-YuS64wkBy=9dm`4cXeX z4c}I@?e+FW+b@^RDBHV(wnMq2zdX3SWv9u`%{xC-q*U}&`cyXV(%rRT*Z6MH?i+i& z_B8C(+grT%{XWUQ+f@NoP1R=AW&26{v-dx)iK^-Nmiuj8txj!m?Z*Ss1N{dh4z}01 z)YTo*JycSU)+_5r4#yw9{+;i4Ee$peRgIj+;v;ZGdF1K$3E%e~4LaI(jC-u%2h$&R z9cLXcYC@Xwnns&bn)_Q~Te?roKGD|d-g^8;+aC{{G(1^(O7m37Y1-+6)01cN&y1aw zoqc{T`P^XJqPBbIW6s}d4{z_f5Om?vMgNQEJG?v2T=KYd^0M3I6IZxbny)%vZR&LD zJpPl@Psh8QyPB@KTx+@RdcC!KX7}kEo;S|j^u2lU7XQ}Oo;f|;z4Ll+_r>@1-xl3| zawq-H%e&ckC+@AhPrP6BKT#_XdT7&;F71j}Joy zkC~6lh7E@6o;W@^IpRNZ{ptLtL(gQ-CY~4mqW;US7Zxvm_|@yz&e53Bp_lTPlfP|z zrTyx_>lv@x#=^!PzR7qqF<$gm`|ZJZ+;<)Cqu&ot2z=0000WV@Og>004R=004l4008;_004mL004C`008P>0026e000+nl3&F} z0009DNkl8~4xD%^3NEdbC zs#b6z7I)%81jP!{O%Vy*R4~#Ov_V=SuCzu4i)p2W3fezuCevo}^5)%l{~Q;^iHq#? zY!BzhcMj+Kh?((UO98;bA5U!5dl0}&1Zpz44d5#Pvj9K@Y`edLsTVHd)E74)HW=Ol z;1@|^L6Llg!NZco*Pb}`pvT(k?9$o0zwZoa~{ux(jKWF;cvZYhItSJ)mTu`pvE>;60 zyzDF=l~O(2Q}XqhCH=_GzGFP>j%Thok;H1eyQJvul|*x()9mq6b<|D`HhIxFcWI@} zN4Chy!6a6)2Z=;H?>Nk_l*J~calmHs)jO9fiX;!KI1Dl4o$R`9MyWqg8xODN#vJTA z^FA@5x6by52px2g8#|$-K(KTQz;O}rMF!SD014h_bE%2wX8^mFiVg~2u0z_lfQU7u zq}w4dgyJy(-?5{95cUE9J6e!YC;>DA_?i|HlEgZsb<2$OiL^P8q}NOluIN7hVgE$& znJ?*>%_PcI`Fm}we5^ihpD_h*j!1nvoDQbJVyt(Q-IJTf<0@uimwa21@vg2ht=brW zM1(_TMIDklpx!V$gW&U_#9M=Dnmfzc<`KOYz;$9~+{t(2cH2(+5@&_LWXr6~cfD=t zguIkE#{mrGBgFznYvUn)i|zc5%KDpz1rBC>`7Cx{;@7DM?{Mr-v%_=sy2L*Tpf)hz=M4VRvVV<0FA9jK0Thn?j{v3sTp|LzUyl&_Kl0@7 Z0RZ$lY}mUZQyKsO002ovPDHLkV1hHIrVs!C literal 0 HcmV?d00001 diff --git a/img/overlay-pattern.png b/img/overlay-pattern.png new file mode 100644 index 0000000000000000000000000000000000000000..6ecc88d700563c1d0ff267093ce9141002b29cfc GIT binary patch literal 107 zcmeAS@N?(olHy`uVBq!ia0vp^tRT$D3?#QN+_DTvu?6^qxB_V)Sem}`Jdk243GxeO x;G3xZz#hmG@^o30H}Wx!_S#DA5Mexc)I$ztaD0e0sw>T8b1I4 literal 0 HcmV?d00001 diff --git a/index.htm b/index.htm index c91031bd..2bab4f80 100644 --- a/index.htm +++ b/index.htm @@ -22,7 +22,7 @@
- + diff --git a/js/app.js b/js/app.js index ae60561e..2ce381d1 100644 --- a/js/app.js +++ b/js/app.js @@ -2,39 +2,44 @@ requirejs.config({ "baseUrl": "js", // user build_js files, change to "js" for un-compressed source "paths": { - "layout": "layout", - "jquery": "lib/jquery-1.11.1.min", - //"jquery": "lib/jquery-2.1.1.min", - //"jqueryUI": "lib/jquery-ui.min", - "jqueryUI": "lib/jquery-ui-custom.min", // custom script (without tooltip -> conflict with bootstrap) - "bootstrap": "lib/bootstrap.min", - "text": "lib/requirejs/text", - "templates": "../templates", - "jsPlumb": "lib/jsPlumb-1.6.4-min", - "customScrollbar": "lib/jquery.mCustomScrollbar.concat.min", - "datatables": "lib/jquery.dataTables.min", - "datatablesBootstrap": "lib/dataTables.bootstrap", // not used (bootstrap style) - "xEditable": "lib/bootstrap-editable.min" + layout: "layout", + jquery: "lib/jquery-1.11.1.min", + //jquery: "lib/jquery-2.1.1.min", + //jqueryUI: "lib/jquery-ui.min", + jqueryUI: "lib/jquery-ui-custom.min", // custom script (without tooltip -> conflict with bootstrap) + bootstrap: "lib/bootstrap.min", + text: "lib/requirejs/text", + templates: "../templates", + jsPlumb: "lib/jsPlumb-1.6.4-min", // main map draw plugin + customScrollbar: "lib/jquery.mCustomScrollbar.concat.min", // custom scroll bars + datatables: "lib/jquery.dataTables.min", // tables + datatablesBootstrap: "lib/dataTables.bootstrap", // not used (bootstrap style) + xEditable: "lib/bootstrap-editable.min", // in placed editing + bootbox: "lib/bootbox.min" // custom dialogs }, shim: { - "jqueryUI": { - export:"$", - deps: ["jquery"] + jqueryUI: { + export: '$', + deps: ['jquery'] }, - "bootstrap": { - deps: ["jquery", "jqueryUI"] + bootstrap: { + deps: ['jquery', 'jqueryUI'] }, - "customScrollbar": { - deps: ["jquery"] + customScrollbar: { + deps: ['jquery'] }, - "datatables": { - deps: ["jquery"] + datatables: { + deps: ['jquery'] }, - "datatablesBootstrap": { - deps: ["datatables"] + datatablesBootstrap: { + deps: ['datatables'] }, - "xEditable": { - deps: ["bootstrap"] + xEditable: { + deps: ['bootstrap'] + }, + bootbox: { + deps: ['jquery', 'bootstrap'], + exports: 'bootbox' } } }); diff --git a/js/app/counter.js b/js/app/counter.js index 9140238c..b2e8dc7a 100644 --- a/js/app/counter.js +++ b/js/app/counter.js @@ -58,8 +58,10 @@ define(["jquery"], function($) { element.html(value.join(' ')); }; - - + /** + * inits a live counter based on a unix timestamp + * @returns {*} + */ $.fn.initSignatureCounter = function(){ return this.each(function(){ diff --git a/js/app/init.js b/js/app/init.js index 98d3e3e2..cc0d1fd5 100644 --- a/js/app/init.js +++ b/js/app/init.js @@ -7,7 +7,115 @@ define(["jquery"], function($) { "use strict"; var Config = { - baseUrl: "http://localhost/exodus4d/pathfinder/" // TODO: change baseURL + // baseUrl: "http://localhost/exodus4d/pathfinder/" // TODO: change baseURL + + classes: { + // system effects + systemEffects: { + + effect: { + class: 'pf-system-effect', + name: 'no effect' + }, + magnetar: { + class: 'pf-system-effect-magnetar', + name: 'magnetar' + }, + redGiant: { + class: 'pf-system-effect-redgiant', + name: 'red gaint' + }, + pulsar: { + class: 'pf-system-effect-pulsar', + name: 'pulsar' + }, + wolfRyet: { + class: 'pf-system-effect-wolfryet', + name: 'wolf ryet' + }, + cataclysmic: { + class: 'pf-system-effect-cataclysmic', + name: 'cytaclysmic' + }, + blackHole: { + class: 'pf-system-effect-blackhole', + name: 'black hole' + } + }, + systemSecurity: { + security: { + class: 'pf-system-sec' + }, + 'H': { + class: 'pf-system-sec-highSec' + }, + 'L': { + class: 'pf-system-sec-lowSec' + }, + '0.0': { + class: 'pf-system-sec-nullSec' + }, + 'C6': { + class: 'pf-system-sec-high' + }, + 'C5': { + class: 'pf-system-sec-high' + }, + 'C4': { + class: 'pf-system-sec-mid' + }, + 'C3': { + class: 'pf-system-sec-mid' + }, + 'C2': { + class: 'pf-system-sec-low' + }, + 'C1': { + class: 'pf-system-sec-low' + } + }, + trueSec: { + '0.0': { + class: 'pf-system-security-0-0' + }, + '0.1': { + class: 'pf-system-security-0-1' + }, + '0.2': { + class: 'pf-system-security-0-2' + }, + '0.3': { + class: 'pf-system-security-0-3' + }, + '0.4': { + class: 'pf-system-security-0-4' + }, + '0.5': { + class: 'pf-system-security-0-5' + }, + '0.6': { + class: 'pf-system-security-0-6' + }, + '0.7': { + class: 'pf-system-security-0-7' + }, + '0.8': { + class: 'pf-system-security-0-8' + }, + '0.9': { + class: 'pf-system-security-0-9' + }, + '1.0': { + class: 'pf-system-security-1-0' + } + } + + } + + + + + }; return Config; diff --git a/js/app/main.js b/js/app/main.js index 56ec3463..d87611a6 100644 --- a/js/app/main.js +++ b/js/app/main.js @@ -10,7 +10,6 @@ define(["jquery", "app/render", "app/ccp", "app/module_map"], function($, Render CCP.requestTrust(); - // Map init options var mapData =[{ map: {}, @@ -67,6 +66,27 @@ define(["jquery", "app/render", "app/ccp", "app/module_map"], function($, Render x: 110, y: 110 } + },{ + id: 30002979, + name: 'Tararan', + alias: '', + effect: '', + security: 'L', + trueSec: 0.3, + region: { + id: '10000036', + name: 'Devoid' + }, + constellation: { + id: '20000436', + name: 'Jayai' + }, + type: 'k-space', + status: '', + position: { + x: 300, + y: 250 + } } ], connections: [ @@ -74,6 +94,11 @@ define(["jquery", "app/render", "app/ccp", "app/module_map"], function($, Render source: 3, target: 4, type: 'wh' + }, + { + source: 4, + target: 30002979, + type: 'wh' } ] } @@ -196,7 +221,7 @@ define(["jquery", "app/render", "app/ccp", "app/module_map"], function($, Render $('#' + config.mapModuleId).updateMapModule(userData); console.log('update map done'); - }, 1000); + }, 500); diff --git a/js/app/map/map.js b/js/app/map/map.js index 8e9b209b..ba62b1d4 100644 --- a/js/app/map/map.js +++ b/js/app/map/map.js @@ -1,4 +1,4 @@ -define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, Render) { +define(['jquery', 'app/init', 'app/util', 'app/render', 'jsPlumb', 'app/map/contextmenu'], function($, Init, Util, Render) { "use strict"; @@ -43,13 +43,7 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R errorConnectDialogId: 'pf-error-dialog-loopback', // system effect classes - systemEffect: 'pf-system-effect', - systemEffectMagnetar: 'pf-system-effect-magnetar', - systemEffectRedGiant: 'pf-system-effect-redgiant', - systenEffectPular: 'pf-system-effect-pulsar', - systemEffectWolfRyet: 'pf-system-effect-wolfryet', - systemEffectCataclysmic: 'pf-system-effect-cataclysmic', - systemEffectBlackHole: 'pf-system-effect-blackhole', + // system security classes systemSec: 'pf-system-sec', @@ -205,69 +199,6 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R } }; - - - - - var getEffectClassForSystem = function(effect){ - - var effectClass = ''; - - switch(effect){ - case 'magnetar': - effectClass = config.systemEffectMagnetar; - break; - case 'redGiant': - effectClass = config.systemEffectRedGiant; - break; - case 'pulsar': - effectClass = config.systenEffectPular; - break; - case 'wolfRyet': - effectClass = config.systemEffectWolfRyet; - break; - case 'cataclysmic': - effectClass = config.systemEffectCataclysmic; - break; - case 'blackHole': - effectClass = config.systemEffectBlackHole; - break; - } - - return effectClass; - }; - - var getSecurityClassForSystem = function(sec){ - - var secClass = ''; - - switch(sec){ - case 'H': - secClass = config.systemSecHigh; - break; - case 'L': - secClass = config.systemSecLow; - break; - case '0.0': - secClass = config.systemSecNull; - break; - case 'C6': - case 'C5': - secClass = config.systemSecWHHeigh; - break; - case 'C4': - case 'C3': - secClass = config.systemSecWHMid; - break; - case 'C2': - case 'C1': - secClass = config.systemSecWHLow; - break; - } - - return secClass; - }; - /** * get status class for a system * @param status @@ -409,13 +340,16 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R * @param data * @returns {*|HTMLElement} */ - var getSystem = function(data){ + var getSystem = function(map, data){ var system; + // get map container for mapId information + var mapContainer = $(map.getContainer()); + // get system info classes - var effectClass = getEffectClassForSystem(data.effect); - var secClass = getSecurityClassForSystem(data.security); + var effectClass = Util.getEffectInfoForSystem(data.effect, 'class'); + var secClass = Util.getSecurityClassForSystem(data.security); var statusClass = getStatusClassForSystem(data.status); system = $('
', { @@ -427,15 +361,15 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R $('
', { class: config.systemHeadClass }).append( - // System effect color - $('', { - class: config.systemHeadNameClass, - text: data.name - }) + // System name is editable + $('', { + href: '#', + class: config.systemHeadNameClass + }).attr('data-value', data.name) ).append( // System effect color $('', { - class: ['fa fa-square ', config.systemEffect, effectClass].join(' ') + class: ['fa fa-square ', Util.getEffectInfoForSystem('effect', 'class'), effectClass].join(' ') }) ).append( // expand option @@ -457,6 +391,7 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R ).data('name', data.name).css({ "left": data.position.x + "px", 'top': data.position.y + 'px' }); system.attr('data-id', data.id); + system.attr('data-mapid', mapContainer.attr('data-mapid')); return $(system); }; @@ -548,12 +483,15 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R } // get System Element by data - var newSystem = getSystem(systemData); + var newSystem = getSystem(map, systemData); // add new system to map mapContainer.append(newSystem); - // make new System dragable + // make new system editable + makeEditable(newSystem); + + // make new system draggable makeDraggable(map, newSystem); // make target @@ -602,6 +540,20 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R }); }; + /** + * make a syste name editable by x-editable + * @param system + */ + var makeEditable = function(system){ + + $(system).find('.' + config.systemHeadNameClass).editable({ + mode: 'popup', + type: 'text', + title: 'system name', + placement: 'top' + }); + }; + /** * make one or multiple systems draggable * @param map @@ -621,13 +573,32 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R toggleSystemTooltip([e.target], 'hide'); }, stop: function(e, ui){ + + var system = $(e.target); + // drag stop + var mapContainer = $( system.parent() ); // update z-index for dragged system + connections updateZIndex(map, e.target); // rerender tooltip toggleSystemTooltip([e.target], 'show'); + + // set new position for popover edit field (system name) + var distanceTop = ui.position.top; + var distanceLeft = ui.position.left; + + var placement = 'top'; + if(distanceTop < 100){ + placement = 'bottom'; + } + if(distanceLeft < 100){ + placement = 'right'; + } + + $(e.target).find('.' + config.systemHeadNameClass).editable('option', 'placement', placement); + }, drag: function(e){ // while drag @@ -941,7 +912,11 @@ define(["jquery", "app/render", "jsPlumb", "app/map/contextmenu"], function($, R // get parent Tab Content and fire update event var tabContentElement = getTabContentElementByMapElement(currentSystem); - $(tabContentElement).trigger('pf:updateSystemData', [{system: currentSystem}]); + var data = { + system: currentSystem + }; + + $(tabContentElement).trigger('pf:updateSystemData', [data]); }); }; diff --git a/js/app/module_map.js b/js/app/module_map.js index f43d1273..6345e44b 100644 --- a/js/app/module_map.js +++ b/js/app/module_map.js @@ -1,4 +1,4 @@ -define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'customScrollbar', 'app/counter'], function($, Render) { +define(['jquery', 'app/util', 'app/render', 'bootbox', 'datatables', 'xEditable', 'app/map/map', 'customScrollbar', 'app/counter'], function($, Util, Render, bootbox) { "use strict"; @@ -19,14 +19,24 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo mapTabContentCellFirst: 'pf-map-content-col-first', // first column mapTabContentCellSecond: 'pf-map-content-col-second', // second column - // system info - systemInfoElementWrapperClass: 'pf-system-info-wrapper', // class for systeminfo Wrapper + // module info + moduleClass: 'pf-module', // class for each module + + // system info module + systemInfoModuleClass: 'pf-system-info-module', // module wrapper + systemInfoRoutesClass: 'pf-system-info-routes', // wrapper for trade hub routes + systemInfoRoutesTableClass: 'pf-system-route-table', // class for route tables + systemInfoRoutesTableRowPrefix: 'pf-system-info-routes-row-', // prefix class for a row in the route table + systemSecurityClassPrefix: 'pf-system-security-', // prefix class for system security level (color) + systemInfoProgressScannedClass: 'pf-system-progress-scanned', // progress bar scanned signatures - // sig table + // sig table module + sigTableModuleClass: 'pf-sig-table-module', // module wrapper sigTableToolsClass: 'pf-sig-table-tools', // table toolbar sigTableToolsActionClass: 'pf-sig-table-tools-action', // table toolbar action sigTableClass: 'pf-sig-table', // Table class for all Signature Tables + sigTableMainClass: 'pf-sig-table-main', // Table class for main sig table sigTableEditText: 'pf-sig-table-edit-text', // class for editable fields (text) sigTableEditSigNameInput: 'pf-sig-table-edit-name-input', // class for editable fields (input) sigTableEditSigTypeSelect: 'pf-sig-table-edit-type-select', // class for editable fields (select) @@ -271,18 +281,25 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo * set Tab Observer, events are triggered within map.js * @param mapContentModule */ - $.fn.setTabContenteObserver = function(){ + $.fn.setTabContentObserver = function(){ return this.each(function(){ // update Tab Content with system data information - $(this).on('pf:updateSystemData', function(e, data){ - updateSystemInfoElement($( e.target )); + $(this).on('pf:updateSystemData', function(e, mapData){ + + // collect all relevant data for SystemInfoElement + var systemInfoData = { + systemId: parseInt( $( mapData.system).attr('data-id') ), + mapId: parseInt( $( mapData.system).attr('data-mapid') ) + }; + + updateSystemInfoElement($( e.target ), systemInfoData); }); // highlite a mapTab $(this).on('pf:highlightTab', function(e, data){ // update Tab Content with system data information - highliteTab(e.target, data); + highlightTab(e.target, data); }); @@ -290,11 +307,11 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo }; /** - * highlite a Tab in this module e.g. when user has an active pilot in this map + * highlight a Tab in this module e.g. when user has an active pilot in this map * @param contentElement * @param data */ - var highliteTab = function(contentElement, data){ + var highlightTab = function(contentElement, data){ var tabElements = getTabElements(); contentElement = $(contentElement); @@ -327,8 +344,14 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo }; + /** + * draw signature table toolbar (add signature button, scan progress bar + * @param emptySignatureData + */ $.fn.drawSignatureTableToolbar = function(emptySignatureData){ + var systemCell = $(this); + // add toolbar buttons for table ------------------------------------- var tableToolbar = $('
', { class: config.sigTableToolsClass @@ -337,7 +360,9 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo class: ['btn', 'btn-primary', 'btn-sm'].join(' '), text: ' add signature' }).on('click', function(e){ - + // show "add sig" div + var toolsElement = $(e.target).parents('.' + config.moduleClass).find('.' + config.sigTableToolsActionClass); + toolsElement.slideToggle( 100 ); }).prepend( $('', { class: ['fa', 'fa-plus', 'fa-fw'].join(' ') @@ -345,30 +370,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo ) ); - $(this).append(tableToolbar); - - // scanned signatures progress bar -------------------------------------- - var moduleConfig = { - name: 'form/progress', - position: tableToolbar, - link: 'before', - functions: { - after: function(){ - - } - } - }; - - var moduleData = { - label: true, - class: config.systemInfoProgressScannedClass, - barClass: 'progress-bar-success', - percent: '70', - headline: 'System scanned', - headlineRight: '70%' // will be updated by js - }; - - Render.showModule(moduleConfig, moduleData); + systemCell.prepend(tableToolbar); // add toolbar action for table ------------------------------------- var tableToolbarAction = $('
', { @@ -382,8 +384,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo tableToolbarAction.append(table); - $(this).append(tableToolbarAction); - + tableToolbar.after(tableToolbarAction); table.dataTable( { data: emptySignatureData, @@ -394,36 +395,95 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo } ); table.makeEditable(); + + // scanned signatures progress bar -------------------------------------- + var moduleConfig = { + name: 'form/progress', + position: tableToolbar, + link: 'before', + functions: { + after: function(){ + systemCell.updateScannedSignaturesBar(); + } + } + }; + + var moduleData = { + label: true, + wrapperClass: config.systemInfoProgressScannedClass, + class: ['progress-bar-success'].join(' '), + percent: 0, + headline: 'System scanned', + headlineRight: ' ' // will be updated by js + }; + + Render.showModule(moduleConfig, moduleData); + + }; - // drawsignature table - $.fn.drawSignatureTable = function(signatureData){ + // draw signature table + $.fn.drawSignatureTable = function(signatureData, systemInfoData){ + var moduleElement = $(this); // create new signature table ------------------------------------------- var table = $('', { - class: ['display', 'compact', config.sigTableClass].join(' ') + class: ['display', 'compact', config.sigTableClass, config.sigTableMainClass].join(' ') }); - $(this).append(table); + moduleElement.append(table); + // set event listener + table.on( 'draw.dt', function () { + // TODO maybe needet :D + }); var signatureTable = table.dataTable( { data: signatureData } ); - $(this).show(); - // make Table editable - signatureTable.makeEditable(); - + signatureTable.makeEditable(systemInfoData); return signatureTable; }; - var updateSystemInfoElement = function(tabContentElement){ + /** + * collect all data of all editable fields in a signature table + * @returns {Array} + */ + $.fn.getSignatureTableData = function(){ + + var tableRows = $(this).find('.' + config.sigTableMainClass + ' tbody tr'); + + var tableData = []; + + $.each(tableRows, function(i, tableRow){ + // get all editable fields per row + var editableFields = $(tableRow).find('.editable'); + + if(editableFields.length > 0){ + var values = $(editableFields).editable('getValue'); + + // add pk for this row + values.id = $(editableFields[0]).data('pk'); + + tableData.push( values ); + } + }); + + return tableData; + }; + + /** + * clears and updates the system info element (signature table, system info,...) + * @param tabContentElement + * @param systemInfoData + */ + var updateSystemInfoElement = function(tabContentElement, systemInfoData){ // get Table cell for system Info var systemCell = $(tabContentElement).find('.' + config.mapTabContentCellFirst); @@ -431,15 +491,24 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo // clear systemCell systemCell.empty(); + // update signature table module + systemCell.updateSignatureTableModule(systemInfoData); + + // update system info module + systemCell.updateSystemInfo(systemInfoData); + }; + + $.fn.updateSignatureTableModule = function(systemInfoData){ + // TODO replace with backend ajax request - var systemData = tempFunctionGetSystemData(); + var systemData = tempFunctionGetSystemData(systemInfoData); var emptySystemData = $.extend({}, systemData); // copy object for manipulation // fake data for new signature table entry emptySystemData.signatures = [ { id: 0, - sig: '', + name: '', typeId: null, sigTypeId: null, created: null, @@ -461,10 +530,18 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo // check if signatures exist if(signatureData.length > 0){ + // create new module container + var moduleElement = $('
', { + class: [config.moduleClass, config.sigTableModuleClass].join(' ') + }); + + $(this).append(moduleElement); + // set default values for all signature "datatables" $.extend( $.fn.dataTable.defaults, { - pageLength: 100, - lengthMenu: [ 5, 10, 25, 50, 75, 100 ], + pageLength: -1, + lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, 'All']], + autoWidth: false, language: { zeroRecords: 'No signatures found', lengthMenu: 'Show _MENU_ signatures', @@ -500,53 +577,277 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo targets: 5, title: '', orderable: false, - width: '20px', - class: 'center' + width: '10px', + class: 'text-center' } ] } ); - // draw system info Element - systemCell.updateSystemInfo(); + // draw signature table + moduleElement.drawSignatureTable(signatureData, systemInfoData); // draw toolbar for signature table - systemCell.drawSignatureTableToolbar(emptySignatureData); + moduleElement.drawSignatureTableToolbar(emptySignatureData); - // draw signature table - systemCell.drawSignatureTable(signatureData); - }else{ - systemCell.hide(); } - }; /** * update systeminfo */ - $.fn.updateSystemInfo = function(){ - var systemInfoWrapper = $(this).find('.' + config.systemInfoElementWrapperClass); + $.fn.updateSystemInfo = function(systemInfoData){ - if(systemInfoWrapper.length === 0){ - // create system Info Wrapper - systemInfoWrapper = $('
', { - class: config.systemInfoElementWrapperClass, - text: 'ddd' - }); - $(this).prepend(systemInfoWrapper); + // TODO replace by AJAX + if(systemInfoData.systemId === 30002979){ + var system = { + id: 30002979, + //name: 'J150020', + name: 'Tararan', + alias: '', + effect: '', + security: 'L', + trueSec: 0.3, + region: { + id: '10000036', + name: 'Devoid' + }, + constellation: { + id: '20000436', + name: 'Jayai' + }, + type: 'k-space' + }; + }else{ + var system = { + id: 2, + name: 'J150020', + alias: 'Polaris', + effect: 'magnetar', + security: 'C6', + trueSec: -1, + region: { + id: '12345', + name: 'F-R00030' + }, + constellation: { + id: '678990', + name: 'F-C00298' + }, + static: [{ + security: 'C6', + name: ' W237', + lifetime: 24 + }], + //type: 'wh' + type: 'wh' + }; } + + + + // create new module container + var moduleElement = $('
', { + class: [config.moduleClass, config.systemInfoModuleClass].join(' ') + }); + + $(this).prepend(moduleElement); + + // confirm dialog + var moduleConfig = { + name: 'modules/system_info', + position: moduleElement, + link: 'append', + functions: { + after: function(){ + // init tooltips + var tooltipElements = $('.' + config.systemInfoModuleClass + ' [data-toggle="tooltip"]'); + tooltipElements.tooltip(); + + // load trade routes + if(system.type !== 'wh'){ + $(moduleElement).find('.' + config.systemInfoRoutesClass).updateSystemInfoRoutes(system.name, ['Jita', 'Amarr', 'Rens', 'Dodixie']); + } + + + } + } + }; + + + // add security class for statics + if(system.static){ + $.each(system.static, function(i, staticWH){ + system['static'][i]['class'] = Util.getSecurityClassForSystem( staticWH.security ); + }); + } + + + var moduleData = { + system: system, + securityClass: Util.getSecurityClassForSystem( system.security ), + trueSecClass: Util.getTrueSecClassForSystem( system.trueSec ), + effectName: Util.getEffectInfoForSystem(system.effect, 'name'), + effectClass: Util.getEffectInfoForSystem(system.effect, 'class') + }; + + Render.showModule(moduleConfig, moduleData); + }; + $.fn.updateSystemInfoRoutes = function(systemFrom, systemsTo){ + + // TODO get cached routes from backend + + var baseUrl = 'http://api.eve-central.com/api/route/from/'; + + var wrapperElement = $(this); + + // crate new route table + var table = $('
', { + class: ['compact', 'stripe', 'order-column', 'row-border', config.systemInfoRoutesTableClass].join(' ') + }); + + wrapperElement.append( $(table) ); + + // init empty table + var routesTable = table.DataTable( { + paging: false, + ordering: true, + info: false, + searching: false, + hover: false, + + //autoWidth: false, + columnDefs: [ + { + targets: 0, + //"orderData": 0, + orderable: true, + title: 'system' + },{ + targets: 1, + orderable: true, + title: 'jumps    ', + width: '40px', + class: 'text-right' + },{ + targets: 2, + orderable: false, + title: 'route' + } + ], + data: [] // will be added dynamic + } ); + + + $.each(systemsTo, function(i, systemTo){ + + if(systemFrom !== systemTo){ + var url = baseUrl + systemFrom + '/to/' + systemTo; + $.getJSON(url, function(routeData){ + + // row class + var rowClass = config.systemInfoRoutesTableRowPrefix + i; + + // add row Data + var rowData = [systemTo, routeData.length]; + + var jumpData = []; + // loop all systems on a rout + $.each(routeData, function(j, systemData){ + + var systemSecClass = config.systemSecurityClassPrefix; + var systemSec = systemData.to.security.toFixed(1).toString(); + systemSecClass += systemSec.replace('.', '-'); + var system = ''; + jumpData.push( system ); + + }); + + + rowData.push( jumpData.join(' ') ); + + // add new row + routesTable.row.add( rowData ).draw().nodes().to$().addClass( rowClass ); + + // init tooltips for each jump system + var tooltipElements = wrapperElement.find('.' + rowClass + ' [data-toggle="tooltip"]'); + + $(tooltipElements).tooltip(); + + }); + } + + + + }); + + + + }; + + + /** + * update Progressbar for all scanned signatures in a system + */ $.fn.updateScannedSignaturesBar = function(){ + var systemCell = $(this); + + // get progress bar + var progressBarWrapper = $(this).find('.' + config.systemInfoProgressScannedClass); + var progressBar = $(progressBarWrapper).find('.progress-bar'); + var progressBarLabel = $(progressBarWrapper).find('.progress-label-right'); + + var tableData = systemCell.getSignatureTableData(); + + var percent = 0; + var progressBarType = 'progress-bar-danger'; + + if(tableData){ + var sigCount = tableData.length; + var sigIncompleteCount = 0; + // check for signatures without "type" -> these are unscanned sigs + $.each(tableData, function(i, data){ + var typeId = parseInt(data.typeId); + if(typeId === 0){ + sigIncompleteCount++; + } + }); + + percent = 100 - Math.round( 100 / sigCount * sigIncompleteCount ); + + if(percent < 30){ + progressBarType = 'progress-bar-danger' ; + }else if(percent < 100){ + progressBarType = 'progress-bar-warning'; + }else{ + progressBarType = 'progress-bar-success'; + } + } + + setTimeout( + function() { + progressBarLabel.text(percent + '%'); + progressBar.removeClass().addClass('progress-bar').addClass(progressBarType); + progressBar.attr('aria-valuenow', percent); + progressBar.css({width: percent + '%'}); + }, 100); + + + }; /** * make a table editable (in-line-editor) + * @param systemInfoData */ - $.fn.makeEditable = function(options){ + $.fn.makeEditable = function(systemInfoData){ var table = $(this); @@ -563,13 +864,18 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo var sigNameFields = table.find('.' + config.sigTableEditSigNameSelect); // jump to "next" editable field on save - var openNextEditDialogOnSave = function(fields){ - fields.on('save', function(){ + var openNextEditDialogOnSave = function(fields, updateProgressBar){ + fields.on('save', {test: 1}, function(e, data){ var that = this; setTimeout(function() { var nextField = getNextEditableField(that); $(nextField).editable('show'); + + // update scanning progressbar if sig "type" has changed + if($(e.target).hasClass(config.sigTableEditSigTypeSelect)){ + $(that).parents('.' + config.moduleClass).updateScannedSignaturesBar(); + } }, 200); }); }; @@ -579,17 +885,32 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo return $(field).closest('td').next().find('.editable'); }; + /** + * add map/system specific data for each editable field in the sig-table + * @param params + * @returns {*} + */ + var modifyFieldParamsOnSend = function(params){ + + params.systemId = systemInfoData.systemId; + params.mapId = systemInfoData.mapId; + + return params; + }; + // sigTableEditSigNameInput sigIdFields.editable({ mode: 'popup', type: 'text', title: 'signature id', name: 'name', + emptytext: '? ? ?', validate: function(value) { if($.trim(value) === '') { return 'Signature id cant be empty'; } - } + }, + params: modifyFieldParamsOnSend }); @@ -602,6 +923,8 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo type: 'select', title: 'signature type', name: 'typeId', + emptytext: 'unknown', + params: modifyFieldParamsOnSend, source: function(){ var systemType = $(this).attr('data-systemtype'); @@ -646,6 +969,8 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo } } + // add empty option + availableTypes[0] = ''; availableTypes = sigTypeCache[cacheKey] = availableTypes; } @@ -666,6 +991,12 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo $(nameSelect).editable('option', 'source', newSelectOptions); $(nameSelect).editable('setValue', null); + + if(newValue > 0){ + $(nameSelect).editable('option', 'disabled', false); + }else{ + $(nameSelect).editable('option', 'disabled', true); + } } }); @@ -674,43 +1005,63 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo // Select sig name (slave: depends on sig type) sigNameFields.editable({ - mode: 'inline', + mode: 'popup', type: 'select', + title: 'signature name', name: 'sigTypeId', + emptytext: 'unknown', + params: modifyFieldParamsOnSend, source: function(){ var systemType = $(this).attr('data-systemtype'); var areaId = $(this).attr('data-areaid'); - var sigType = $(this).attr('data-sigtypeid'); + var typeId = $(this).attr('data-typeid'); - var cacheKey = [systemType, areaId, sigType].join('_'); + var cacheKey = [systemType, areaId, typeId].join('_'); // check for cached signature names if(sigNameCache.hasOwnProperty( cacheKey )){ return sigNameCache[cacheKey]; } + var signatureNames = getSignatureNames(systemType, areaId, typeId); + + // add empty option + signatureNames[0] = ''; + // get all available Signature Names - var availableSigs = sigNameCache[cacheKey] = getSignatureNames(systemType, areaId, sigType); + var availableSigs = sigNameCache[cacheKey] = signatureNames; return availableSigs; } }); // open next field dialog - openNextEditDialogOnSave(sigIdFields); - openNextEditDialogOnSave(sigTypeFields); + openNextEditDialogOnSave(sigIdFields, true); + openNextEditDialogOnSave(sigTypeFields, false); // set button observer (delete sig) $(this).find('.btn-danger').on('click', function(e){ e.preventDefault(); - // get clicked dataTable object - var currentTable = $(e.target).parents('.' + config.sigTableClass); + bootbox.confirm('Delete signature?', function(result) { + if(result){ + // get module + var moduleElement = $(e.target).parents('.' + config.moduleClass); - currentTable = $(currentTable).dataTable(); + // get clicked dataTable object + var currentTable = moduleElement.find('.' + config.sigTableMainClass); + + currentTable = $(currentTable).dataTable(); + + // delete signature row + currentTable.fnDeleteRow($(e.target).parents('tr')); + + // update signature bar + moduleElement.updateScannedSignaturesBar(); + } + }); - currentTable.fnDeleteRow($(e.target).parents('tr')); }); @@ -811,7 +1162,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo if(data.id > 0){ sigName += 'data-pk="' + data.id + '" '; } - sigName += '>' + data.sig + ''; + sigName += '>' + data.name + ''; tempData.push(sigName); @@ -821,7 +1172,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo } sigType += 'data-systemType="' + systemType + '" '; sigType += 'data-areaId="' + areaId + '" '; - sigType += 'data-value="' + data.sigTypeId + '" '; + sigType += 'data-value="' + data.typeId + '" '; sigType += '>'; // set Sig Id @@ -831,10 +1182,16 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo if(data.id > 0){ sigElement += 'data-pk="' + data.id + '" '; } + + // set disabled if sig type is not selected + if(data.typeId < 1){ + sigElement += 'data-disabled="1" '; + } + sigElement += 'data-systemType="' + systemType + '" '; sigElement += 'data-areaId="' + areaId + '" '; - sigElement += 'data-sigTypeId="' + data.sigTypeId + '" '; - sigElement += 'data-value="' + data.typeId + '" '; + sigElement += 'data-typeId="' + data.typeId + '" '; + sigElement += 'data-value="' + data.sigTypeId + '" '; sigElement += '>'; // set Sig Id @@ -855,7 +1212,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo } var deleteButton = ''; - deleteButton += ''; + deleteButton += ''; deleteButton += ''; tempData.push( deleteButton ); @@ -882,13 +1239,18 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo config: { id: 2, name: 'J150020', + alias: 'Polaris', + effect: 'magnetar', security: 'C6', + static: [{ + lifetime: 24 + }], type: 'wh' }, signatures: [ { id: 2, - sig: 'GDF', + name: 'GDF', typeId: 1, sigTypeId: 2, created: 1325376000, @@ -896,15 +1258,15 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo },{ id: 6, - sig: 'HFS', - typeId: 1, - sigTypeId: 3, + name: 'HFS', + typeId: 0, + sigTypeId: 1, created: 1415989953, updated: 1415215936 },{ id: 8, - sig: 'HFG', + name: 'HFG', typeId: 1, sigTypeId: 1, created: 1415215936, @@ -912,7 +1274,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo },{ id: 12, - sig: 'LLD', + name: 'LLD', typeId: 1, sigTypeId: 1, created: 1415215936, @@ -920,7 +1282,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo },{ id: 13, - sig: 'DGE', + name: 'DGE', typeId: 1, sigTypeId: 1, created: 1394613252, @@ -928,7 +1290,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo },{ id: 14, - sig: 'EXS', + name: 'EXS', typeId: 1, sigTypeId: 1, created: 1415215936, @@ -936,7 +1298,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo },{ id: 15, - sig: 'CVS', + name: 'CVS', typeId: 3, sigTypeId: 1, created: 1415215936, @@ -944,15 +1306,15 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo },{ id: 16, - sig: 'GGD', - typeId: 2, - sigTypeId: 1, + name: 'GGD', + typeId: 0, + sigTypeId: 0, created: 1415215936, updated: 1415215936 },{ id: 18, - sig: 'OKD', + name: 'OKD', typeId: 1, sigTypeId: 1, created: 1415215936, @@ -960,7 +1322,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo },{ id: 8, - sig: 'DBE', + name: 'DBE', typeId: 3, sigTypeId: 1, created: 1415215936, @@ -968,15 +1330,15 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo },{ id: 20, - sig: 'ASW', - typeId: 1, - sigTypeId: 1, + name: 'ASW', + typeId: 0, + sigTypeId: 3, created: 1415215936, updated: 1386934983 },{ id: 22, - sig: 'NFG', + name: 'NFG', typeId: 2, sigTypeId: 2, created: 1415215936, @@ -1041,11 +1403,11 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo class: ['row', config.mapTabContentRow].join(' ') }).append( $('
', { - class: ['col-xs-12', 'col-sm-8', config.mapTabContentCellFirst, config.mapTabContentCell].join(' ') + class: ['col-xs-12', 'col-md-8', config.mapTabContentCellFirst, config.mapTabContentCell].join(' ') }) ).append( $('
', { - class: ['col-xs-6', 'col-sm-4', config.mapTabContentCellSecond, config.mapTabContentCell].join(' ') + class: ['col-xs-6', 'col-md-4', config.mapTabContentCellSecond, config.mapTabContentCell].join(' ') }) ); @@ -1076,7 +1438,7 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo var tabContentElements = getTabContentElements(mapContentModule); // set observer for manually triggered map events - tabContentElements.setTabContenteObserver(); + tabContentElements.setTabContentObserver(); // load all the structure elements for ALL Tab Content Body tabContentElements.initContentStructure(); @@ -1193,7 +1555,6 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo enable:true } }); - console.log(scrollableElement) }; /** @@ -1201,10 +1562,9 @@ define(['jquery', 'app/render', 'datatables', 'xEditable', 'app/map/map', 'custo * @returns {*} // string or id */ $.fn.scrollTo = function(position){ - return this.each(function(i, mapElement){ - console.log(this) - - $(this).mCustomScrollbar('scrollTo', position); + return this.each(function(){ + // todo re-comment + //$(this).mCustomScrollbar('scrollTo', position); }); }; diff --git a/js/app/util.js b/js/app/util.js new file mode 100644 index 00000000..704fd9f2 --- /dev/null +++ b/js/app/util.js @@ -0,0 +1,66 @@ +/** + * Util + */ +define(['jquery', 'app/init'], function($, Init) { + + "use strict"; + + /** + * get a info for a given effect string + * @param effect + * @param option + * @returns {string} + */ + var getEffectInfoForSystem = function(effect, option){ + + var effectClass = ''; + + if( Init.classes.systemEffects.hasOwnProperty(effect) ){ + effectClass = Init.classes.systemEffects[effect][option]; + } + + return effectClass; + }; + + /** + * get a css class for the security level of a system + * @param sec + * @returns {string} + */ + var getSecurityClassForSystem = function(sec){ + var secClass = ''; + + if( Init.classes.systemSecurity.hasOwnProperty(sec) ){ + secClass = Init.classes.systemSecurity[sec]['class']; + } + + return secClass; + }; + + /** + * get a css class for the trueSec level of a system + * @param sec + * @returns {string} + */ + var getTrueSecClassForSystem = function(trueSec){ + var trueSecClass = ''; + + if(trueSec < 0){ + trueSec = 0; + } + + trueSec = trueSec.toFixed(1).toString(); + + if( Init.classes.trueSec.hasOwnProperty(trueSec) ){ + trueSecClass = Init.classes.trueSec[trueSec]['class']; + } + + return trueSecClass; + }; + + return { + getEffectInfoForSystem: getEffectInfoForSystem, + getSecurityClassForSystem: getSecurityClassForSystem, + getTrueSecClassForSystem: getTrueSecClassForSystem + }; +}); \ No newline at end of file diff --git a/js/lib/bootbox.min.js b/js/lib/bootbox.min.js new file mode 100644 index 00000000..a7ea24fe --- /dev/null +++ b/js/lib/bootbox.min.js @@ -0,0 +1,6 @@ +/** + * bootbox.js v4.3.0 + * + * http://bootboxjs.com/license.txt + */ +!function(a,b){"use strict";"function"==typeof define&&define.amd?define(["jquery"],b):"object"==typeof exports?module.exports=b(require("jquery")):a.bootbox=b(a.jQuery)}(this,function a(b,c){"use strict";function d(a){var b=q[o.locale];return b?b[a]:q.en[a]}function e(a,c,d){a.stopPropagation(),a.preventDefault();var e=b.isFunction(d)&&d(a)===!1;e||c.modal("hide")}function f(a){var b,c=0;for(b in a)c++;return c}function g(a,c){var d=0;b.each(a,function(a,b){c(a,b,d++)})}function h(a){var c,d;if("object"!=typeof a)throw new Error("Please supply an object of options");if(!a.message)throw new Error("Please specify a message");return a=b.extend({},o,a),a.buttons||(a.buttons={}),a.backdrop=a.backdrop?"static":!1,c=a.buttons,d=f(c),g(c,function(a,e,f){if(b.isFunction(e)&&(e=c[a]={callback:e}),"object"!==b.type(e))throw new Error("button with key "+a+" must be an object");e.label||(e.label=a),e.className||(e.className=2>=d&&f===d-1?"btn-primary":"btn-default")}),a}function i(a,b){var c=a.length,d={};if(1>c||c>2)throw new Error("Invalid argument length");return 2===c||"string"==typeof a[0]?(d[b[0]]=a[0],d[b[1]]=a[1]):d=a[0],d}function j(a,c,d){return b.extend(!0,{},a,i(c,d))}function k(a,b,c,d){var e={className:"bootbox-"+a,buttons:l.apply(null,b)};return m(j(e,d,c),b)}function l(){for(var a={},b=0,c=arguments.length;c>b;b++){var e=arguments[b],f=e.toLowerCase(),g=e.toUpperCase();a[f]={label:d(g)}}return a}function m(a,b){var d={};return g(b,function(a,b){d[b]=!0}),g(a.buttons,function(a){if(d[a]===c)throw new Error("button key "+a+" is not allowed (options are "+b.join("\n")+")")}),a}var n={dialog:"",header:"

",footer:"
",closeButton:"",form:"
",inputs:{text:"",textarea:"",email:"",select:"",checkbox:"
",date:"",time:"",number:"",password:""}},o={locale:"en",backdrop:!0,animate:!0,className:null,closeButton:!0,show:!0,container:"body"},p={};p.alert=function(){var a;if(a=k("alert",["ok"],["message","callback"],arguments),a.callback&&!b.isFunction(a.callback))throw new Error("alert requires callback property to be a function when provided");return a.buttons.ok.callback=a.onEscape=function(){return b.isFunction(a.callback)?a.callback():!0},p.dialog(a)},p.confirm=function(){var a;if(a=k("confirm",["cancel","confirm"],["message","callback"],arguments),a.buttons.cancel.callback=a.onEscape=function(){return a.callback(!1)},a.buttons.confirm.callback=function(){return a.callback(!0)},!b.isFunction(a.callback))throw new Error("confirm requires a callback");return p.dialog(a)},p.prompt=function(){var a,d,e,f,h,i,k;if(f=b(n.form),d={className:"bootbox-prompt",buttons:l("cancel","confirm"),value:"",inputType:"text"},a=m(j(d,arguments,["title","callback"]),["cancel","confirm"]),i=a.show===c?!0:a.show,a.message=f,a.buttons.cancel.callback=a.onEscape=function(){return a.callback(null)},a.buttons.confirm.callback=function(){var c;switch(a.inputType){case"text":case"textarea":case"email":case"select":case"date":case"time":case"number":case"password":c=h.val();break;case"checkbox":var d=h.find("input:checked");c=[],g(d,function(a,d){c.push(b(d).val())})}return a.callback(c)},a.show=!1,!a.title)throw new Error("prompt requires a title");if(!b.isFunction(a.callback))throw new Error("prompt requires a callback");if(!n.inputs[a.inputType])throw new Error("invalid prompt type");switch(h=b(n.inputs[a.inputType]),a.inputType){case"text":case"textarea":case"email":case"date":case"time":case"number":case"password":h.val(a.value);break;case"select":var o={};if(k=a.inputOptions||[],!k.length)throw new Error("prompt with select requires options");g(k,function(a,d){var e=h;if(d.value===c||d.text===c)throw new Error("given options in wrong format");d.group&&(o[d.group]||(o[d.group]=b("").attr("label",d.group)),e=o[d.group]),e.append("")}),g(o,function(a,b){h.append(b)}),h.val(a.value);break;case"checkbox":var q=b.isArray(a.value)?a.value:[a.value];if(k=a.inputOptions||[],!k.length)throw new Error("prompt with checkbox requires options");if(!k[0].value||!k[0].text)throw new Error("given options in wrong format");h=b("
"),g(k,function(c,d){var e=b(n.inputs[a.inputType]);e.find("input").attr("value",d.value),e.find("label").append(d.text),g(q,function(a,b){b===d.value&&e.find("input").prop("checked",!0)}),h.append(e)})}return a.placeholder&&h.attr("placeholder",a.placeholder),a.pattern&&h.attr("pattern",a.pattern),f.append(h),f.on("submit",function(a){a.preventDefault(),a.stopPropagation(),e.find(".btn-primary").click()}),e=p.dialog(a),e.off("shown.bs.modal"),e.on("shown.bs.modal",function(){h.focus()}),i===!0&&e.modal("show"),e},p.dialog=function(a){a=h(a);var c=b(n.dialog),d=c.find(".modal-dialog"),f=c.find(".modal-body"),i=a.buttons,j="",k={onEscape:a.onEscape};if(g(i,function(a,b){j+="",k[a]=b.callback}),f.find(".bootbox-body").html(a.message),a.animate===!0&&c.addClass("fade"),a.className&&c.addClass(a.className),"large"===a.size&&d.addClass("modal-lg"),"small"===a.size&&d.addClass("modal-sm"),a.title&&f.before(n.header),a.closeButton){var l=b(n.closeButton);a.title?c.find(".modal-header").prepend(l):l.css("margin-top","-10px").prependTo(f)}return a.title&&c.find(".modal-title").html(a.title),j.length&&(f.after(n.footer),c.find(".modal-footer").html(j)),c.on("hidden.bs.modal",function(a){a.target===this&&c.remove()}),c.on("shown.bs.modal",function(){c.find(".btn-primary:first").focus()}),c.on("escape.close.bb",function(a){k.onEscape&&e(a,c,k.onEscape)}),c.on("click",".modal-footer button",function(a){var d=b(this).data("bb-handler");e(a,c,k[d])}),c.on("click",".bootbox-close-button",function(a){e(a,c,k.onEscape)}),c.on("keyup",function(a){27===a.which&&c.trigger("escape.close.bb")}),b(a.container).append(c),c.modal({backdrop:a.backdrop,keyboard:!1,show:!1}),a.show&&c.modal("show"),c},p.setDefaults=function(){var a={};2===arguments.length?a[arguments[0]]=arguments[1]:a=arguments[0],b.extend(o,a)},p.hideAll=function(){return b(".bootbox").modal("hide"),p};var q={br:{OK:"OK",CANCEL:"Cancelar",CONFIRM:"Sim"},cs:{OK:"OK",CANCEL:"Zrušit",CONFIRM:"Potvrdit"},da:{OK:"OK",CANCEL:"Annuller",CONFIRM:"Accepter"},de:{OK:"OK",CANCEL:"Abbrechen",CONFIRM:"Akzeptieren"},el:{OK:"Εντάξει",CANCEL:"Ακύρωση",CONFIRM:"Επιβεβαίωση"},en:{OK:"OK",CANCEL:"Cancel",CONFIRM:"OK"},es:{OK:"OK",CANCEL:"Cancelar",CONFIRM:"Aceptar"},et:{OK:"OK",CANCEL:"Katkesta",CONFIRM:"OK"},fi:{OK:"OK",CANCEL:"Peruuta",CONFIRM:"OK"},fr:{OK:"OK",CANCEL:"Annuler",CONFIRM:"D'accord"},he:{OK:"אישור",CANCEL:"ביטול",CONFIRM:"אישור"},id:{OK:"OK",CANCEL:"Batal",CONFIRM:"OK"},it:{OK:"OK",CANCEL:"Annulla",CONFIRM:"Conferma"},ja:{OK:"OK",CANCEL:"キャンセル",CONFIRM:"確認"},lt:{OK:"Gerai",CANCEL:"Atšaukti",CONFIRM:"Patvirtinti"},lv:{OK:"Labi",CANCEL:"Atcelt",CONFIRM:"Apstiprināt"},nl:{OK:"OK",CANCEL:"Annuleren",CONFIRM:"Accepteren"},no:{OK:"OK",CANCEL:"Avbryt",CONFIRM:"OK"},pl:{OK:"OK",CANCEL:"Anuluj",CONFIRM:"Potwierdź"},pt:{OK:"OK",CANCEL:"Cancelar",CONFIRM:"Confirmar"},ru:{OK:"OK",CANCEL:"Отмена",CONFIRM:"Применить"},sv:{OK:"OK",CANCEL:"Avbryt",CONFIRM:"OK"},tr:{OK:"Tamam",CANCEL:"İptal",CONFIRM:"Onayla"},zh_CN:{OK:"OK",CANCEL:"取消",CONFIRM:"确认"},zh_TW:{OK:"OK",CANCEL:"取消",CONFIRM:"確認"}};return p.init=function(c){return a(c||b)},p}); \ No newline at end of file diff --git a/sass/_colors.scss b/sass/_colors.scss index ffe4a227..dfc4d54f 100644 --- a/sass/_colors.scss +++ b/sass/_colors.scss @@ -55,8 +55,21 @@ $wh-color-wolfryet: $orange; $wh-color-cataclysmic: $yellow-lighter; $wh-color-blackhole: $gray-darkest; -$brand-primary: $teal-dark !default; +// system security status +$system-color-sec-0-0: #be0000; +$system-color-sec-0-1: #ab2600; +$system-color-sec-0-2: #be3900; +$system-color-sec-0-3: #c24e02; +$system-color-sec-0-4: #ab5f00; +$system-color-sec-0-5: #bebe00; +$system-color-sec-0-6: #73bf26; +$system-color-sec-0-7: #00bf00; +$system-color-sec-0-8: #00bf39; +$system-color-sec-0-9: #39bf99; +$system-color-sec-1-0: #28c0bf; + +$brand-primary: $teal-darker !default; $brand-success: $green-dark !default; $brand-info: #5bc0de !default; $brand-warning: $orange !default; -$brand-danger: #d9534f !default; \ No newline at end of file +$brand-danger: $red-darker !default; \ No newline at end of file diff --git a/sass/_variables.scss b/sass/_variables.scss index 206c7b59..d1699968 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -31,8 +31,8 @@ $link-hover-color: darken($link-color, 15%); $pf-font-path: "../fonts" !default; -$font-family-sans-serif: "Open Sans", Arial, Helvetica, sans-serif; -$font-family-serif: Georgia, "Times New Roman", Times, serif; +$font-family-sans-serif: 'Oxygen Light', "Helvetica Neue", Helvetica, Arial, sans-serif !default; +$font-family-serif: 'Oxygen Regular' Georgia, "Times New Roman", Times, serif !default; $font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace; $font-family-base: $font-family-sans-serif; @@ -43,7 +43,7 @@ $font-size-small: ceil(($font-size-base * 0.85)); // ~11px $font-size-h1: floor(($font-size-base * 1.85)); // ~24px $font-size-h2: floor(($font-size-base * 1.7)); // ~22px $font-size-h3: ceil(($font-size-base * 1.385)); // ~18px -$font-size-h4: ceil(($font-size-base * 1.32)); // ~17px +$font-size-h4: $font-size-base; //ceil(($font-size-base * 1.32)); // ~17px $font-size-h5: ceil(($font-size-base * 1.24)); // ~16px $font-size-h6: ceil(($font-size-base * 1.08)); // ~14px @@ -103,7 +103,7 @@ $padding-xs-horizontal: 5px; $line-height-large: 1.33; $line-height-small: 1.5; -$border-radius-base: 4px; +$border-radius-base: 0px; $border-radius-large: 6px; $border-radius-small: 3px; @@ -123,7 +123,7 @@ $caret-width-large: 5px; //## Customizes the `.table` component with basic values, each used across all table variations. $table-cell-padding: 8px; -$table-condensed-cell-padding: 5px; +$table-condensed-cell-padding: 2px; $table-bg: transparent; $table-bg-accent: #f9f9f9; @@ -222,8 +222,8 @@ $dropdown-caret-color: #000; $zindex-navbar: 1000; $zindex-dropdown: 1000; -$zindex-popover: 1010; -$zindex-tooltip: 1030; +$zindex-tooltip: 1010; +$zindex-popover: 1030; $zindex-navbar-fixed: 1030; $zindex-modal-background: 1040; $zindex-modal: 1050; @@ -247,7 +247,7 @@ $screen-tablet: $screen-sm-min; // Medium screen / desktop // Note: Deprecated $screen-md and $screen-desktop as of v3.0.1 -$screen-md: 992px; +$screen-md: 900px; $screen-md-min: $screen-md; $screen-desktop: $screen-md-min; @@ -511,12 +511,12 @@ $label-link-hover-color: #fff; // //## -$modal-inner-padding: 20px; +$modal-inner-padding: 14px; -$modal-title-padding: 15px; +$modal-title-padding: 14px; $modal-title-line-height: $line-height-base; -$modal-content-bg: #fff; +$modal-content-bg: $gray; $modal-content-border-color: rgba(0,0,0,.2); $modal-content-fallback-border-color: #999; @@ -664,11 +664,11 @@ $badge-border-radius: 10px; // //## -$breadcrumb-padding-vertical: 8px; -$breadcrumb-padding-horizontal: 15px; -$breadcrumb-bg: #f5f5f5; -$breadcrumb-color: #ccc; -$breadcrumb-active-color: $gray-light; +$breadcrumb-padding-vertical: 0px; +$breadcrumb-padding-horizontal: 0px; +$breadcrumb-bg: none; +$breadcrumb-color: $gray-light; +$breadcrumb-active-color: $green; $breadcrumb-separator: "/"; @@ -694,7 +694,7 @@ $carousel-caption-color: #fff; //## $close-font-weight: bold; -$close-color: #000; +$close-color: $red-darker; $close-text-shadow: 0 1px 0 #fff; diff --git a/sass/bootstrap/_close.scss b/sass/bootstrap/_close.scss index 62ce30fa..7bff4ee2 100644 --- a/sass/bootstrap/_close.scss +++ b/sass/bootstrap/_close.scss @@ -9,8 +9,6 @@ font-weight: $close-font-weight; line-height: 1; color: $close-color; - text-shadow: $close-text-shadow; - @include opacity(.2); &:hover, &:focus { diff --git a/sass/bootstrap/_mixins.scss b/sass/bootstrap/_mixins.scss index 81d34a9c..e451865d 100644 --- a/sass/bootstrap/_mixins.scss +++ b/sass/bootstrap/_mixins.scss @@ -507,13 +507,13 @@ &:active, &.active { color: $color; - background-color: darken($background, 8%); - border-color: darken($border, 12%); + background-color: lighten($background, 8%); + border-color: lighten($border, 12%); } .open & { &.dropdown-toggle { color: $color; - background-color: darken($background, 8%); - border-color: darken($border, 12%); + background-color: lighten($background, 8%); + border-color: lighten($border, 12%); } } &:active, &.active { diff --git a/sass/bootstrap/_modals.scss b/sass/bootstrap/_modals.scss index 931092cf..2329beef 100644 --- a/sass/bootstrap/_modals.scss +++ b/sass/bootstrap/_modals.scss @@ -42,6 +42,7 @@ position: relative; width: auto; margin: 10px; + z-index: $zindex-modal; } // Actual modal @@ -75,8 +76,10 @@ // Top section of the modal w/ title and dismiss .modal-header { padding: $modal-title-padding; - border-bottom: 1px solid $modal-header-border-color; + // border-bottom: 1px solid $modal-header-border-color; + border-bottom: 1px solid darken($modal-content-bg, 5%); min-height: ($modal-title-padding + $modal-title-line-height); + background-color: darken($modal-content-bg, 3%); } // Close icon .modal-header .close { @@ -94,14 +97,15 @@ .modal-body { position: relative; padding: $modal-inner-padding; + color: $gray-lighter; } // Footer (for actions) .modal-footer { - margin-top: 15px; padding: ($modal-inner-padding - 1) $modal-inner-padding $modal-inner-padding; text-align: right; // right align buttons - border-top: 1px solid $modal-footer-border-color; + border-top: 1px solid darken($modal-content-bg, 5%); + background-color: darken($modal-content-bg, 3%); @include clearfix(); // clear it in case folks use .pull-* classes on buttons // Properly space out buttons diff --git a/sass/bootstrap/_tables.scss b/sass/bootstrap/_tables.scss index 1ddfb7ab..fe92cafc 100644 --- a/sass/bootstrap/_tables.scss +++ b/sass/bootstrap/_tables.scss @@ -16,7 +16,7 @@ th { .table { width: 100%; - margin-bottom: $line-height-computed; + margin-bottom: 0; // Cells > thead, > tbody, diff --git a/sass/bootstrap/_variables.scss b/sass/bootstrap/_variables.scss index 1c90a289..74b15cbb 100644 --- a/sass/bootstrap/_variables.scss +++ b/sass/bootstrap/_variables.scss @@ -29,8 +29,8 @@ $link-hover-color: darken($link-color, 15%) !default; // //## Font, line-height, and color for body text, headings, and more. -$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; -$font-family-serif: Georgia, "Times New Roman", Times, serif !default; +$font-family-sans-serif: 'Oxygen Light', "Helvetica Neue", Helvetica, Arial, sans-serif !default; +$font-family-serif: 'Oxygen Regular' Georgia, "Times New Roman", Times, serif !default; //** Default monospace fonts for ``, ``, and `
`.
 $font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
 $font-family-base:        $font-family-sans-serif !default;
diff --git a/sass/layout/_all.scss b/sass/layout/_all.scss
index 99b7d44d..63e50be4 100644
--- a/sass/layout/_all.scss
+++ b/sass/layout/_all.scss
@@ -1,4 +1,5 @@
 @import "main";
 @import "map";
 @import "system-info";
-@import "_forms";
\ No newline at end of file
+@import "_forms";
+@import "_images";
\ No newline at end of file
diff --git a/sass/layout/_images.scss b/sass/layout/_images.scss
new file mode 100644
index 00000000..05af6f46
--- /dev/null
+++ b/sass/layout/_images.scss
@@ -0,0 +1,11 @@
+.pf-icon{
+  display: inline-block;
+}
+
+.pf-icon-dotlan{
+  background: url('../img/icons/dotlan_logo.png');
+  width: 17px;
+  height: 17px;
+  opacity: 0.8;
+  margin: -5px 10px 0 10px;
+}
diff --git a/sass/layout/_main.scss b/sass/layout/_main.scss
index 3b537f55..12d12c45 100644
--- a/sass/layout/_main.scss
+++ b/sass/layout/_main.scss
@@ -13,6 +13,7 @@ a{
   }
 }
 
+
 // Maps module ===================================================
 #pf-map-module{
   margin: 30px 0 0 0;
@@ -40,9 +41,136 @@ a{
 
 }
 
+// Tab Content Body Grid ========================================
+.pf-map-content-row{
+  margin: 10px 0 0 0;
+
+  // Table cell style
+  > div{
+
+  }
+
+  // alle Module innerhalb einer row
+  .pf-module{
+    @include border-radius(5px);
+    background: rgba($gray, 0.3);
+    padding: 10px;
+    width: 100%;
+    margin-bottom: 10px;
+  }
+
+}
+
+// WH effects ==================================================
+
+.pf-system-effect{
+  margin-left: 5px;
+  cursor: default;
+}
+
+.pf-system-effect-magnetar{
+  color: $wh-color-magnetar;
+}
+
+.pf-system-effect-redgiant{
+  color: $wh-color-redgiant;
+}
+
+.pf-system-effect-pulsar{
+  color: $wh-color-pulsar;
+}
+
+.pf-system-effect-wolfryet{
+  color: $wh-color-wolfryet;
+}
+
+.pf-system-effect-cataclysmic{
+  color: $wh-color-cataclysmic;
+}
+
+.pf-system-effect-blackhole{
+  color: $wh-color-blackhole;
+}
+
+// System security status ============================================
+.pf-system-security-0-0{
+  color: $system-color-sec-0-0;
+}
+
+.pf-system-security-0-1{
+  color: $system-color-sec-0-1;
+}
+
+.pf-system-security-0-2{
+  color: $system-color-sec-0-2;
+}
+
+.pf-system-security-0-3{
+  color: $system-color-sec-0-3;
+}
+
+.pf-system-security-0-4{
+  color: $system-color-sec-0-4;
+}
+
+.pf-system-security-0-5{
+  color: $system-color-sec-0-5;
+}
+
+.pf-system-security-0-6{
+  color: $system-color-sec-0-6;
+}
+
+.pf-system-security-0-7{
+  color: $system-color-sec-0-7;
+}
+
+.pf-system-security-0-8{
+  color: $system-color-sec-0-8;
+}
+
+.pf-system-security-0-9{
+  color: $system-color-sec-0-9;
+}
+
+.pf-system-security-1-0{
+  color: $system-color-sec-1-0;
+}
+
+// System security level =============================================
+
+.pf-system-sec{
+  margin-right: 5px;
+  cursor: move;
+}
+
+.pf-system-sec-highSec{
+  color: $green;
+}
+
+.pf-system-sec-lowSec{
+  color: $orange;
+}
+
+.pf-system-sec-nullSec{
+  color: $red;
+}
+
+.pf-system-sec-high{
+  color: $red;
+}
+
+.pf-system-sec-mid{
+  color: $orange;
+}
+
+.pf-system-sec-low{
+  color: $blue;
+}
+
 // Tooltip ======================================================
 .tooltip-inner{
-  opacity: 0.8;
+  opacity: 1;
   color: $teal;
   background-color: $gray;
   font-family: 'Oxygen Bold';
@@ -55,3 +183,7 @@ a{
   border-top-color: $gray-light;
 }
 
+.tooltip.bottom .tooltip-arrow{
+  border-bottom-color: $gray-light;
+}
+
diff --git a/sass/layout/_map.scss b/sass/layout/_map.scss
index 9c2acb7a..746125df 100644
--- a/sass/layout/_map.scss
+++ b/sass/layout/_map.scss
@@ -72,7 +72,11 @@
     .pf-system-head{
       padding: 0px 3px 2px 3px;
       cursor: pointer;
-      color: $gray-lighter;
+
+      .pf-system-head-name{
+        border: none;
+        color: $gray-lighter;
+      }
 
       .pf-system-head-expand{
         margin-left: 5px;
@@ -80,75 +84,15 @@
       }
     }
 
-    // System security =============================================
-
-    .pf-system-sec{
-      margin-right: 5px;
-      cursor: move;
-    }
-
-    .pf-system-sec-highSec{
-      color: $green;
-    }
-
-    .pf-system-sec-lowSec{
-      color: $orange;
-    }
-
-    .pf-system-sec-nullSec{
-      color: $red;
-    }
-
-    .pf-system-sec-high{
-      color: $red;
-    }
-
-    .pf-system-sec-mid{
-      color: $orange;
-    }
-
-    .pf-system-sec-low{
-      color: $blue;
-    }
-
-    // WH effects ==================================================
-
-    .pf-system-effect{
-      margin-left: 5px;
-      cursor: default;
-    }
-
-    .pf-system-effect-magnetar{
-      color: $wh-color-magnetar;
-    }
-
-    .pf-system-effect-redgiant{
-      color: $wh-color-redgiant;
-    }
-
-    .pf-system-effect-pulsar{
-      color: $wh-color-pulsar;
-    }
-
-    .pf-system-effect-wolfryet{
-      color: $wh-color-wolfryet;
-    }
-
-    .pf-system-effect-cataclysmic{
-      color: $wh-color-cataclysmic;
-    }
-
-    .pf-system-effect-blackhole{
-      color: $wh-color-blackhole;
-    }
-
     // ===============================================================
 
     .pf-system-body{
       height: 16px;
       width: 100%;
       overflow: hidden;
-      cursor: move;
+      cursor: -moz-grab;
+      cursor: -webkit-grab;
+      cursor: grab;
       padding: 0 2px;
       white-space: nowrap;
       display: none;  // triggered by JS
diff --git a/sass/layout/_system-info.scss b/sass/layout/_system-info.scss
index ab585bde..19aa1a93 100644
--- a/sass/layout/_system-info.scss
+++ b/sass/layout/_system-info.scss
@@ -1,54 +1,50 @@
-
-// Tab Content Body Grid
-.pf-map-content-row{
-  margin: 10px 0 0 0;
-
-  // Table cell style
-  > div{
-    @include border-radius(5px);
-    background: rgba($gray, 0.3);
-    padding: 10px;
-    display: none; // triggered by JS
+// breadcrumb ============================================================
+.breadcrumb{
+  li{
+    text-transform: capitalize;
+  }
+}
+
+// routes table ==========================================================
+.pf-system-route-table{
+  font-size: 10px;
+}
+
+// signature table =======================================================
+
+// signature table
+.pf-sig-table{
+  font-size: 10px;
+}
+
+// table icon toolbar
+.pf-sig-table-tools{
+  height: 45px;
+}
+
+.pf-sig-table-tools-action{
+  height: 75px;
+  display: none; // triggered by js
+}
+
+// signature timer/date counter head
+th.pf-sig-table-counter{
+  padding-right: 20px !important;
+}
+
+// signature timer/date counter
+.pf-sig-table-counter{
+  text-align: right;
+
+  .pf-digit-counter-small{
+    width: 20px;
+    display: inline-block;
+    font-size: 10px;
+  }
+
+  .pf-digit-counter-large{
+    width: 26px;
+    display: inline-block;
+    font-size: 10px;
   }
-
-  .pf-map-content-col-first{
-
-  }
-
-  .pf-map-content-col-second{
-
-  }
-  
-  // table icon toolbar
-  .pf-sig-table-tools{
-    height: 45px;
-  }
-
-  .pf-sig-table-tools-action{
-    height: 75px;
-   // display: none; // triggered by js
-  }
-
-  // signature timer/date counter head
-  th.pf-sig-table-counter{
-    padding-right: 20px !important;
-  }
-
-  // signature timer/date counter
-  .pf-sig-table-counter{
-    text-align: right;
-
-    .pf-digit-counter-small{
-      width: 20px;
-      display: inline-block;
-      font-size: 10px;
-    }
-
-    .pf-digit-counter-large{
-      width: 26px;
-      display: inline-block;
-      font-size: 10px;
-    }
-  }
-  
 }
diff --git a/sass/library/data-tables/_dataTables.scss b/sass/library/data-tables/_dataTables.scss
index 8ffeab24..6768a313 100644
--- a/sass/library/data-tables/_dataTables.scss
+++ b/sass/library/data-tables/_dataTables.scss
@@ -100,7 +100,7 @@ table.dataTable.display tbody tr.even:hover {
 
   a {
     color: $gray-darker !important;
-    border-bottom: dashed 1px $gray-darker !important;
+    //border-bottom: dashed 1px $gray-darker !important;
   }
 }
 table.dataTable.hover tbody tr:hover.selected,
diff --git a/sass/smartadmin/_main.scss b/sass/smartadmin/_main.scss
index 7fb4464c..da28ec68 100644
--- a/sass/smartadmin/_main.scss
+++ b/sass/smartadmin/_main.scss
@@ -29,7 +29,7 @@ a:hover, a:active, a:focus, button, button:active, button:focus, object, embed,
 	
 h1,h2,h3,h4 {
 	margin:0;
-	font-family:"Open Sans", Arial, Helvetica, Sans-Serif;
+	font-family: "Oxygen Bold", "Open Sans", Arial, Helvetica, Sans-Serif;
 	font-weight:300;
 }
 
@@ -102,7 +102,9 @@ input[type="color"]:focus,
 }	
 
 .btn-xs {
-	padding: 1px 5px;
+	padding: 0px 2px;
+    font-size: 10px;
+    line-height: 1.3;
 }
 
 .btn-sm {
@@ -1722,7 +1724,9 @@ input[type="text"]:focus + .input-group-addon {
           box-shadow: inset 0 -1px 0 rgba(red($black), green($black), blue($black), 0.15);
   font-weight:bold;
   text-shadow: 0 -1px 0 rgba(red($black), green($black), blue($black), 0.25);         
-  background-image:url("#{$base-url}/pattern/overlay-pattern.png");      
+  background-image:url("#{$base-url}/overlay-pattern.png");
+  -webkit-transition: width 1.5s ease-in-out;
+  transition: width 1.5s ease-in-out;
 }
 
 .progress-striped .progress-bar {
@@ -2215,7 +2219,14 @@ a:link, .btn, button {
 .table-condensed.table>tfoot>tr>th, 
 .table-condensed.table>thead>tr>td, 
 .table-condensed.table>thead>tr>th {
-	padding: 5px 10px !important;
+	padding: 2px 0px !important;
+    border: none;
+    line-height: 20px;
+    border-bottom: 1px solid $gray-darker;
+}
+
+.table-condensed.table tr td:first-child{
+    color: $gray;
 }
 
 
diff --git a/templates/form/progress.html b/templates/form/progress.html
index a95b4e99..37462cac 100644
--- a/templates/form/progress.html
+++ b/templates/form/progress.html
@@ -1,12 +1,14 @@
-{{#headlineRight}}
-    {{headlineRight}}
-{{/headlineRight}}
-{{#headline}}
-    {{headline}}
-{{/headline}}
+

+    {{#headlineRight}}
+        {{headlineRight}}
+    {{/headlineRight}}
+    {{#headline}}
+        {{headline}}
+    {{/headline}}
 
-

-    

+    

+        

 
+        

     

 

\ No newline at end of file
diff --git a/templates/modules/system_info.html b/templates/modules/system_info.html
new file mode 100644
index 00000000..ee8cc100
--- /dev/null
+++ b/templates/modules/system_info.html
@@ -0,0 +1,61 @@
+
+
+

+    

+        
    
+            
  1. {{system.type}}
    2. 
+            
  2. {{system.region.name}}
    3. 
+            
  3. {{system.constellation.name}}
    4. 
+            
  4. 
+                {{system.name}}
+                
+                    
    
+                    
+            
    5. 
+        

+
+
+        

+
+
+
+    

+    

+
+ + + + + + {{#effectName}} + + + + + {{/effectName}} + {{#system.static}} + + + + + {{/system.static}} + + + + + +
Name + {{#system.alias}} + {{system.alias}} + {{/system.alias}} + {{^system.alias}} + {{system.name}} + {{/system.alias}} + [ {{system.security}} ] +
Effect{{effectName}}
Static{{name}} [ {{security}} ]
Security{{system.trueSec}}
+
+
+ + + +