import "./common/global_setting" ; import { updateChart1 , updateChart2 , updateChart3 } from './index-chart' ; import Controller from "./common/Controller" ; import Space from "./common/Space" ; import "./index.css" ; import { IObject3d } from "./type" ; const THREE = window . THREE ; const openDoorLocation = { ry : 120 , } ; const popServerLocation = { t : 700 , x : 0.35 , } ; const moveOutlineKey = "move" ; const lockServerOutlineKey = "lockServer" ; const element = $ ( "#3d-space" ) [ 0 ] ; const space = new Space ( element , { orbit : true , outline : true , } ) ; let main ; let racks ; let servers ; let lockRack ; let lockServer ; window . debugSpace = space ; let capacityFlag = false ; let temperatureFlag = false ; let oldRaycasterObjects ; const updatePopoverContent = ( ( ) => { let oldName ; return ( name ) => { const event = space . mouse . mousemoveEvent ; if ( name ) { $ ( "#popover-content" ) . removeClass ( "hide" ) ; $ ( "#popover-content" ) . css ( "top" , event . clientY + 10 ) ; $ ( "#popover-content" ) . css ( "left" , event . clientX + 10 ) ; $ ( "#popover-text" ) . text ( name ) ; } else { $ ( "#popover-content" ) . addClass ( "hide" ) ; } if ( oldName !== name ) { updateChart1 ( ) ; oldName = name ; } } ; } ) ( ) ; const updateCollapse = ( ( ) => { let oldRack ; let oldServer ; return ( rack , server ? ) => { if ( rack ) { $ ( "#rackCard" ) . removeClass ( "hide" ) ; $ ( "#rackName" ) . text ( rack . name ) ; if ( rack !== oldRack ) { updateChart2 ( ) ; oldRack = rack ; } } else { $ ( "#rackCard" ) . addClass ( "hide" ) ; } if ( server ) { $ ( "#serverCard" ) . removeClass ( "hide" ) ; $ ( "#serverName" ) . text ( server . name ) ; $ ( "#collapseTwo" ) . collapse ( "show" ) ; if ( server !== oldServer ) { updateChart3 ( ) ; oldServer = server ; } } else { $ ( "#serverCard" ) . addClass ( "hide" ) ; } } ; } ) ( ) ; function clickServer ( results ) { if ( results . length > 0 ) { const server = results [ 0 ] . object . $controller . raycasterRedirect ; lockServer = server ; servers . forEach ( ( c ) => { c . resetAction ( ) ; } ) ; server . executeAction ( "popServer" , popServerLocation ) ; console . log ( "clickServer" , server . name ) ; space . setOutline ( [ lockServer . showingObject3d ] , lockServerOutlineKey ) ; updateCollapse ( lockRack , server ) ; } } function mousemoveServer ( results ) { if ( results . length > 0 ) { const server = results [ 0 ] . object . $controller . raycasterRedirect ; updatePopoverContent ( server . name ) ; if ( server !== lockServer ) { space . setOutline ( [ server . showingObject3d ] , moveOutlineKey ) ; } } else { updatePopoverContent ( null ) ; space . setOutline ( [ ] , moveOutlineKey ) ; } } function showServerModel ( rack ) { console . log ( "showServerModel" ) ; $ ( "#left-arrow-button" ) . removeClass ( "hide" ) ; servers = rack . getControllersByName ( "server" ) ; space . focus ( rack . showingObject3d ) ; oldRaycasterObjects = space . raycasterObjects ; space . raycasterObjects = [ ] ; servers . forEach ( ( c ) => { space . raycasterObjects . push ( c . getRaycasterObject ( ) ) ; } ) ; space . setRaycasterEventMap ( { mousemove : mousemoveServer , click : clickServer } ) ; } function showRackModel ( ) { console . log ( "showRackModel" ) ; updateCollapse ( null , null ) ; space . setRaycasterEventMap ( { click : clickRack , dblclick : dblclickRack , mousemove : moveRack } ) ; space . raycasterObjects = oldRaycasterObjects ; racks . forEach ( ( c ) => { c . resetAction ( ) ; } ) ; space . setOutline ( [ ] ) ; space . setOutline ( [ ] , moveOutlineKey ) ; space . setOutline ( [ ] , lockServerOutlineKey ) ; lockRack = null ; lockServer = null ; } function showCapacityModel ( ) { racks . forEach ( ( c ) => { c . changeToCapacityModel ( ) ; c . setCapacity ( Math . random ( ) * 100 ) ; } ) ; } function showNormalModel ( ) { showRackModel ( ) ; racks . forEach ( ( c ) => { c . changeToNormalModel ( ) ; } ) ; } $ ( "#left-arrow-button" ) . on ( "click" , ( ) => { showRackModel ( ) ; $ ( "#left-arrow-button" ) . addClass ( "hide" ) ; space . focus ( main . showingObject3d ) ; } ) ; $ ( "#capacity-button" ) . on ( "click" , ( ) => { capacityFlag = ! capacityFlag ; if ( capacityFlag ) { showCapacityModel ( ) ; } else { showNormalModel ( ) ; } } ) ; $ ( "#temperature-button" ) . on ( "click" , ( ) => { temperatureFlag = ! temperatureFlag ; space . heatmap . visible ( temperatureFlag ) ; } ) ; function moveRack ( results ) { if ( results . length > 0 ) { const rack = results [ 0 ] . object . $controller . raycasterRedirect ; updatePopoverContent ( rack . name ) ; if ( rack !== lockRack ) { space . setOutline ( [ rack . showingObject3d ] , moveOutlineKey ) ; } } else { updatePopoverContent ( null ) ; space . setOutline ( [ ] , moveOutlineKey ) ; } } function clickRack ( results ) { if ( results . length > 0 ) { window . selectedThing = results [ 0 ] . object ; console . log ( results ) ; racks . forEach ( ( c ) => { c . resetAction ( ) ; } ) ; const rack = results [ 0 ] . object . $controller . raycasterRedirect ; const door = rack . getControllersByName ( "door" ) [ 0 ] ; door . executeAction ( "openDoor" , openDoorLocation ) ; space . setOutline ( [ rack . showingObject3d ] ) ; updateCollapse ( rack ) ; } } function dblclickRack ( results ) { if ( results . length > 0 ) { lockRack = results [ 0 ] . object . $controller . raycasterRedirect ; showServerModel ( lockRack ) ; space . setOutline ( [ lockRack . showingObject3d ] ) ; } } space . load ( "./static/3d/datacenter-0715.glb" ) . then ( ( ) => { space . orbit . minPolarAngle = Math . PI * 0.2 ; space . orbit . maxPolarAngle = Math . PI * 0.65 ; space . setRaycasterEventMap ( { click : clickRack , dblclick : dblclickRack , mousemove : moveRack } ) ; racks = space . getControllersByName ( "rack" ) ; main = space . getControllersByTags ( "main" ) [ 0 ] ; $ ( '[data-toggle="popover"]' ) . popover ( ) ; space . setOutlinePass ( moveOutlineKey , { edgeGlow : 1 , edgeStrength : 3 , hiddenEdgeColor : 0xffffff , pulsePeriod : 0 , visibleEdgeColor : 0xffffff , } ) ; space . setOutlinePass ( lockServerOutlineKey ) ; setInterval ( updateIconListPosition , 50 ) ; const floor = space . getControllersByName ( "floor" ) [ 0 ] ; space . showHeatmap ( floor . showingObject3d ) ; space . heatmap . setMax ( 10 ) ; const datas = [ ] ; racks = space . getControllersByName ( "rack" ) ; racks . forEach ( ( r ) => { const position = new THREE . Vector3 ( ) ; position . setFromMatrixPosition ( r . showingObject3d . matrixWorld ) ; datas . push ( { value : Math . min ( Math . random ( ) * 10 + 2 , 10 ) , x : position . x , y : position . z , } ) ; } ) ; space . heatmap . setDatas ( datas ) ; space . heatmap . visible ( temperatureFlag ) ; } ) . catch ( ( err ) => { console . error ( err ) ; } ) ; $ . when ( $ . ready ) . then ( ( ) => { $ ( '[data-toggle="tooltip"]' ) . tooltip ( { placement : "bottom" } ) ; } ) ; const p = $ ( $ ( "#3d-space" ) [ 0 ] . parentElement ) ; const iconList = $ ( "<div></div>" ) . attr ( "id" , "icon-list" ) . css ( "position" , "absolute" ) . css ( "display" , "flex" ) ; iconList . appendTo ( p ) ; $ ( "<img></img>" ) . appendTo ( iconList ) . attr ( "src" , "./static/images/warn.svg" ) . attr ( "data-toggle" , "popover" ) . attr ( "data-trigger" , "hover" ) . attr ( "title" , "warn" ) . attr ( "data-content" , "Device exception." ) . addClass ( "icon-3d" ) . addClass ( "twinkle" ) ; $ ( ".icon-3d" ) . on ( "click" , ( ) => { $ ( "#exampleModal" ) . modal ( "show" ) ; } ) ; function updateIconListPosition ( ) { const screenPosition = space . getControllersByName ( "screen" ) [ 0 ] . getViewOffset ( { y : 2 } ) ; iconList . css ( "top" , screenPosition . y ) . css ( "left" , screenPosition . x ) ; }