update cctv & vms infoWindow size change

src/main/java/com/its/web/interceptor/ConnectHistory.java

@@ -27,7 +27,7 @@ public class ConnectHistory implements HandlerInterceptor {
     @Override
     public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws IOException {
         String uri = request.getRequestURI();
-        String[] ipAddressArr = new String[]{"127.0.0.1", "localhost", "192.168.20.46"};
+        String[] ipAddressArr = new String[]{"127.0.0.1", "localhost", "220.122.218.208", "172.16.150.14"};
         HttpSession session = request.getSession();
         String hostIp = CommonUtil.getHttpServletRemoteIP(request);
         if (session.getAttribute(hostIp) == null && !uri.contains("/phits") && !uri.contains("error")) {
@@ -47,7 +47,7 @@ public class ConnectHistory implements HandlerInterceptor {
         boolean isHostIp = Arrays.asList(ipAddressArr).contains(hostIp);
         String redirectPath = null;
         if (uri.contains("/phits")) {
-//            if (isHostIp) {
+            if (isHostIp) {
                 Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
                 boolean isLogin = (authentication != null && !(authentication instanceof AnonymousAuthenticationToken) && authentication.isAuthenticated());
 
@@ -58,10 +58,10 @@ public class ConnectHistory implements HandlerInterceptor {
                     redirectPath = "/phits";
                 }
 
-//            }
-//            else {
-//                redirectPath = "/";
-//            }
+            }
+            else {
+                redirectPath = "/";
+            }
         }
 
         if (redirectPath != null) {

src/main/resources/application-prod.yml

@@ -7,9 +7,9 @@ spring:
   datasource:
     hikari:
       driver-class-name: com.tmax.tibero.jdbc.TbDriver
-      jdbc-url: jdbc:tibero:thin:@115.91.94.42:8629:tibero
-      username: phutis
-      password: phutis
+      jdbc-url: jdbc:tibero:thin:@172.16.10.21:8620:PHUTIS
+      username: itsdev
+      password: itsdev
       connection-test-query: SELECT 1 FROM DUAL
       minimumIdle: 5
       maximumIdle: 10
@@ -18,49 +18,20 @@ spring:
       connectTimeout: 10000
   itcs-datasource:
     hikari:
-        driver-class-name: com.tmax.tibero.jdbc.TbDriver
-        jdbc-url: jdbc:tibero:thin:@115.91.94.42:8629:tibero
-        username: itcs
-        password: itcs
-        connection-test-query: SELECT 1 FROM DUAL
-        minimumIdle: 5
-        maximumIdle: 10
-        maximumPoolSize: 20
-        idleTimeout: 30000
-        connectTimeout: 10000
+      driver-class-name: com.tmax.tibero.jdbc.TbDriver
+      jdbc-url: jdbc:tibero:thin:@172.16.10.21:8620:PHUTIS
+      username: itcs
+      password: itcs123$
+      connection-test-query: SELECT 1 FROM DUAL
+      minimumIdle: 5
+      maximumIdle: 10
+      maximumPoolSize: 20
+      idleTimeout: 30000
+      connectTimeout: 10000
 
-kakao-url: https://dapi.kakao.com/v2/maps/sdk.js?appkey=89c10f45ef100270bc75a54eb9e5b0ca&libraries=drawing&libraries=clusterer&libraries=services
-kakao-key: 89c10f45ef100270bc75a54eb9e5b0ca
-popup-location: D:\PHITS-WEB\uploads\popup
-board-location: D:\PHITS-WEB\uploads\board
-image-location: D:\PHITS-WEB\uploads\images
-video-location: D:\PHITS-WEB\uploads\video
-#    hikari:
-#      driver-class-name: com.tmax.tibero.jdbc.TbDriver
-#      jdbc-url: jdbc:tibero:thin:172.16.10.21:8620:tibero
-#      username: itsdev
-#      password: itsdev
-#      connection-test-query: SELECT 1 FROM DUAL
-#      minimumIdle: 5
-#      maximumIdle: 10
-#      maximumPoolSize: 20
-#      idleTimeout: 30000
-#      connectTimeout: 10000
-#  itcs-datasource:
-#    hikari:
-#      driver-class-name: com.tmax.tibero.jdbc.TbDriver
-#      jdbc-url: jdbc:tibero:thin:@172.16.10.21:8620:tibero
-#      username: itsdev
-#      password: itsdev
-#      connection-test-query: SELECT 1 FROM DUAL
-#      minimumIdle: 5
-#      maximumIdle: 10
-#      maximumPoolSize: 20
-#      idleTimeout: 30000
-#      connectTimeout: 10000
-#kakao-url: //dapi.kakao.com/v2/maps/sdk.js?appkey=818515fbf1c2ac66fdac8c66163c7a3e&libraries=drawing&libraries=clusterer
-#kakao-key: appkey=818515fbf1c2ac66fdac8c66163c7a3e
-#popup-location: C:\PHITS-WEB\uploads\popup
-#board-location: C:\PHITS-WEB\uploads\board
-#image-location: C:\PHITS-WEB\uploads\images
-#video-location: C:\PHITS-WEB\uploads\video
+kakao-url: https://dapi.kakao.com/v2/maps/sdk.js?appkey=818515fbf1c2ac66fdac8c66163c7a3e&libraries=drawing&libraries=clusterer&libraries=services
+kakao-key: 818515fbf1c2ac66fdac8c66163c7a3e
+popup-location: C:\PHITS\ITS_WEB\uploads\popup
+board-location: C:\PHITS\ITS_WEB\uploads\board
+image-location: C:\PHITS\ITS_WEB\uploads\images
+video-location: C:\PHITS\ITS_WEB\uploads\video

src/main/resources/static/css/common.css

@@ -770,7 +770,7 @@ i {
         width: 100%;
         height: 100vh;
         z-index: 200;
-        position: absolute;
+        position: fixed;
         top: 0px;
         left: 0px;
         background-color: rgb(255, 255, 255);

src/main/resources/static/css/statistics.css

@@ -370,8 +370,10 @@
     }
 
     .statisticWrap {
-        height: calc(100% - 228.19px);
-        padding: 5px 0 75px 0;
+        /*height: calc(100% - 228.19px);*/
+        /*padding: 5px 0 75px 0;*/
+        height: calc(100% - 110px);
+        padding: 5px 0 85px 0;
     }
     .table-box table td,
     .table-box table th {

src/main/resources/static/css/traffic.css

@@ -988,13 +988,21 @@ ul, li {
         bottom : 10px;
     }
     .left-list-area .list-content {
-        height: calc(100% - 97px)
+        height: calc(100% - 90px)
     }
     .left-list-area {
         /*height: 276px;*/
         /*width: 53px;*/
+        height: calc(100% - 20px);
     }
 
+    .location-box .list-content > div.empty, .left-list-area .list-content > div.empty {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
     .left-list-area .list-tab {
         /*flex-direction: column;*/
         /*height: 276px;*/
@@ -1038,9 +1046,13 @@ ul, li {
     }
 
     .trafficWrap {
-        height: calc(100% - 71.19px);
+        /*height: calc(100% - 71.19px);*/
+        height: calc(100% - 189px);
         flex-direction: column;
     }
+    .legend-bottom{
+        display: none;
+    }
 
     .cctv-info-window .content > div > div:nth-child(1) {
         font-size: 11px;
@@ -1165,41 +1177,43 @@ ul, li {
 
 @media (max-height: 900px) {
 
-    .cctv-info-window {
-        width: 240px;
-        height: 195px;
-    }
+    /*.cctv-info-window {*/
+    /*    width: 240px;*/
+    /*    height: 195px;*/
+    /*}*/
 
-    .vms-info-window .title, .cctv-info-window .title{
-        height: 25px;
-        font-size: 12px;
-        font-weight: bold;
-    }
-    .cctv-info-window .content{
-        height: 130px;
-    }
-    .cctv-info-window .content > div:nth-child(1),
-    .cctv-info-window .content video {
-        height: 100%;
-    }
+    /*.vms-info-window .title*/
+    /*, .cctv-info-window .title*/
+    /*{*/
+    /*    height: 25px;*/
+    /*    font-size: 12px;*/
+    /*    font-weight: bold;*/
+    /*}*/
+    /*.cctv-info-window .content{*/
+    /*    height: 130px;*/
+    /*}*/
+    /*.cctv-info-window .content > div:nth-child(1),*/
+    /*.cctv-info-window .content video {*/
+    /*    height: 100%;*/
+    /*}*/
 
-    .cctv-info-window .content > div > div:nth-child(1) {
-        font-size: 11px;
-    }
-    .cctv-info-window .content > div > div:nth-child(2) {
-        width: 70px;
-        height: 25px;
-        line-height: 25px;
-        font-size: 12px;
-    }
-    .cctv-info-window .content > div:nth-child(2) {
-        height: 25px;
-    }
+    /*.cctv-info-window .content > div > div:nth-child(1) {*/
+    /*    font-size: 11px;*/
+    /*}*/
+    /*.cctv-info-window .content > div > div:nth-child(2) {*/
+    /*    width: 70px;*/
+    /*    height: 25px;*/
+    /*    line-height: 25px;*/
+    /*    font-size: 12px;*/
+    /*}*/
+    /*.cctv-info-window .content > div:nth-child(2) {*/
+    /*    height: 25px;*/
+    /*}*/
 
-    .incident-info-window {
-        max-width: 350px;
-        font-size: 11px;
-    }
+    /*.incident-info-window {*/
+    /*    max-width: 350px;*/
+    /*    font-size: 11px;*/
+    /*}*/
 
     .legend-bottom {
         height: 55px;

src/main/resources/static/js/traffic/traffic.js

@@ -887,7 +887,9 @@ class MarkerObj {
 
     //레벨별 이미지 사이즈 변경
     setImage (type) {
-        const imageLocation = this.image + type + '.png';
+        let image = this.image;
+
+        const imageLocation = image + type + '.png';
         const { imageSize, imageOption } = this.getImageOptions();
 
         let markerImage = new kakao.maps.MarkerImage(imageLocation, imageSize, imageOption);
@@ -989,6 +991,10 @@ class MarkerObj {
             this.setImage('2');
         }
 
+        if (this.type === 'intersectionCamera') {
+            const size = this.size[_Level] * 1.5;
+            $('#camera_' + this.ID).css({backgroundImage : 'url(/images/icon/cctv2.png)', backgroundSize: size +'px '+size+'px', width: size+'px', height : size+'px'});
+        }
 
 
         if (_MarkerHandle.isDrawList(this.type)) {
@@ -1048,6 +1054,11 @@ class MarkerObj {
             }
         }
 
+        if (this.type === 'intersectionCamera') {
+            const size = this.size[_Level];
+            $('#camera_' + this.ID).css({backgroundImage : 'url(/images/icon/intersection-cctv.png)', backgroundSize: size +'px '+size+'px', width: size+'px', height : size+'px'});
+        }
+
 
         //선택 해제
         _MarkerHandle.selectedMarker = null;
@@ -1300,7 +1311,6 @@ class TbCCtvObj extends MarkerObj{
                             </div>
                         </div>
                     </div>`;
-//<!--                                <div>※ CCTV영상은 30초간 제공됩니다.</div>-->
         return iwContent;
     }
 }
@@ -1403,8 +1413,8 @@ class TbVmsObj extends MarkerObj{
         const msg = prop.msg;
         let content = "";
         if (msg && msg.length > 0) {
-            const windowHeight = $(window).height();
-            if (isMobile || windowHeight < 900) {
+            //const windowHeight = $(window).height();
+            if (isMobile) {
                 width = WH.width/2;
                 height = WH.height/2;
             }
@@ -1806,6 +1816,10 @@ function setInfoWindowPositionWidthDraggable(markerObj, type) {
     if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
         left = position[1];
     }
+    if (top < 110) {
+        //top = 10;
+        top = 111;
+    }
     infoWindow.css({
         top : top + 'px',
         left : left + 'px',
@@ -1837,10 +1851,20 @@ function createVideoJs(id, url, obj) {
                 crossorigin: "anonymous",
             },
         ],
-        responsive: false,
+        responsive: true,
         autoplay: true,
         muted: true,
         preload: "metadata",
+        controls: true,
+        controlBar: {
+            playToggle: false,                // 재생/일시정지 토글 버튼 활성화
+            // remainingTimeDisplay: true,      // 남은 시간 표시 활성화
+            // progressControl: true,           // 진행률 컨트롤 활성화
+            pictureInPictureToggle: false,    // 화면 내 화면(PiP) 토글 버튼 활성화
+            currentTimeDisplay: false,        // 현재 재생 시간 표시 활성화
+            fullscreenToggle: true,        // 전체화면 토글 버튼 활성화 (iOS가 아닐 경우)
+            qualitySelector: false,
+        }
     });
 
     //에러발생 시 대체 이미지 생성

src/main/resources/templates/include/header.html

@@ -194,6 +194,8 @@
         }
     });
 
-    $('.' + selected).addClass('on');
+    if (selected){
+        $('.' + selected).addClass('on');
+    }
 
 </script>