trungnd
/
iot-web-ui
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 3 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
26 Commits
14 Branches
Tree: 1bb1356a35
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '1bb1356a35'
${ noResults }
iot-web-ui/src/app/app.constants.ts

309 lines
16KB
Raw Blame History 

  1. export const ICON = {

  2.   sensorOff: `<div style="display: flex;

  3.                 flex-direction: column;

  4.                 align-items: center">

  5.               <div style="display: flex; flex-direction: row; gap: 5px">

  6.                 <div class="tooltip">

  7.                   <img style="width: 30px; height: 30px;" src="assets/images/sensor-off.png">

  8.                   <div class="tooltiptext">

  9.                     <div style="display: flex;

  10.                           flex-direction: row;

  11.                           justify-content: space-between;">

  12.                           <div style="color: #F33152;

  13.                                                   padding: 5px 13px;

  14.                                                   background-color: rgba(243, 49, 82, 0.1);

  15.                                                   border-radius: 20px;

  16.                                                   text-align: center;

  17.                                                   width: 100px;">Sự cố cháy</div>

  18.                           <a href="/overview/camera-stream">

  19.                             <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">

  20.                               <g stroke="currentColor" stroke-width="2">

  21.                                 <path d="M16 16V8a1 1 0 00-1-1H5a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1z"/>

  22.                                 <path stroke-linejoin="round" d="M20 7l-4 3v4l4 3V7z"/>

  23.                               </g>

  24.                             </svg>

  25.                           </a>

  26.                         </div>

  27.                         <div><strong>Địa điểm:</strong> 120 Xa Lộ Hà Nội, Thành Phố, Thủ Đức, Thành phố Hồ Chí Minh</div>

  28.                         <div><strong>Tọa độ:</strong> 10.8661° N, 106.8029° E</div>

  29.                         <div><strong>Thời gian:</strong> 01:54, 16/05/2022</div>

  30.                         <a href="/overview/overall-ground" target="_blank">Xem chi tiết</a>

  31.                   </div>

  32.                 </div>

  33. 

  34.                 <a href="/overview/camera-stream" target="_blank">

  35.                   <img style="width: 30px; height: 30px;" src="assets/images/camera.png">

  36.                 </a>

  37.               </div>

  38.             </div>

  39.             <style>

  40.             .tooltip {

  41.                   position: relative;

  42.                   display: inline-block;

  43.                 }

  44.                 .tooltip .tooltiptext {

  45.                   visibility: hidden;

  46.                   width: 300px;

  47.                   padding: 10px;

  48.                   background-color: #fff;

  49.                   color: black;

  50.                   border-radius: 6px;

  51.                   position: absolute;

  52.                   z-index: 1;

  53.                   bottom: 100%;

  54.                   left: 50%;

  55.                   margin-left: -60px;

  56.                 }

  57. 

  58.               .tooltip:hover .tooltiptext {

  59.                 visibility: visible;

  60.               }

  61.           </style>`,

  62.   sensorOn: `<div style="display: flex;

  63.                 flex-direction: column;

  64.                 align-items: center">

  65.               <div style="display: flex; flex-direction: row; gap: 5px">

  66.                 <div class="tooltip">

  67.                   <img style="width: 30px; height: 30px;" src="assets/images/sensor-on.png">

  68.                   <div class="tooltiptext">

  69.                     <div style="display: flex;

  70.                           flex-direction: row;

  71.                           justify-content: space-between;">

  72.                           <div style="color: #F33152;

  73.                                                   padding: 5px 13px;

  74.                                                   background-color: rgba(243, 49, 82, 0.1);

  75.                                                   border-radius: 20px;

  76.                                                   text-align: center;

  77.                                                   width: 100px;">Sự cố cháy</div>

  78.                           <a href="/overview/camera-stream">

  79.                             <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">

  80.                               <g stroke="currentColor" stroke-width="2">

  81.                                 <path d="M16 16V8a1 1 0 00-1-1H5a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1z"/>

  82.                                 <path stroke-linejoin="round" d="M20 7l-4 3v4l4 3V7z"/>

  83.                               </g>

  84.                             </svg>

  85.                           </a>

  86.                         </div>

  87.                         <div><strong>Địa điểm:</strong> 120 Xa Lộ Hà Nội, Thành Phố, Thủ Đức, Thành phố Hồ Chí Minh</div>

  88.                         <div><strong>Tọa độ:</strong> 10.8661° N, 106.8029° E</div>

  89.                         <div><strong>Thời gian:</strong> 01:54, 16/05/2022</div>

  90.                         <a href="/overview/overall-ground" target="_blank">Xem chi tiết</a>

  91.                   </div>

  92.                 </div>

  93. 

  94.                 <a href="/overview/camera-stream" target="_blank">

  95.                   <img style="width: 30px; height: 30px;" src="assets/images/camera.png">

  96.                 </a>

  97.               </div>

  98. <!--              <div style="font-size: 11px"><b>ALARM: SMOKE ALERT</b></div>-->

  99.             </div>

  100.             <style>

  101.             .tooltip {

  102.                   position: relative;

  103.                   display: inline-block;

  104.                 }

  105.                 .tooltip .tooltiptext {

  106.                   visibility: hidden;

  107.                   width: 300px;

  108.                   padding: 10px;

  109.                   background-color: #fff;

  110.                   color: black;

  111.                   border-radius: 6px;

  112.                   position: absolute;

  113.                   z-index: 1;

  114.                   bottom: 100%;

  115.                   left: 50%;

  116.                   margin-left: -60px;

  117.                 }

  118. 

  119.               .tooltip:hover .tooltiptext {

  120.                 visibility: visible;

  121.               }

  122.           </style>`,

  123.   sensorActive: `<div>

  124.                 <div style="width: 30px; height: 30px; position: absolute; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: linear-gradient(#ff0000, #C70039);">

  125.                   <div style="position: absolute !important; width: 100%; height: 100%; background: #ff0000; border-radius: 50%; z-index: 1; animation: sensor-on 2s ease-out infinite;"></div>

  126.                   <div style="position: absolute !important; width: 100%; height: 100%; background: #ff0000; border-radius: 50%; z-index: 1; animation: sensor-on 2s ease-out infinite; animation-delay: 1s;"></div>

  127.                   <img  src="assets/images/sensor-on.png" style="width: 30px; height: 30px; z-index: 9;">

  128.                 </div>

  129.                 <img style="width: 30px; height: 30px;margin-left: 40px;" src="assets/images/camera.png">

  130.                 <style>

  131.                   @keyframes sensor-on {

  132.                     100% {

  133.                       transform: scale(2);

  134.                       opacity: 0;

  135.                     }

  136.                   }

  137.                 </style>

  138.               </div>`,

  139.   fireContent: `<div style="display: flex;

  140.               flex-direction: row;

  141.               justify-content: space-between;">

  142.               <div style="color: #F33152;

  143.                                       padding: 5px 13px;

  144.                                       background-color: rgba(243, 49, 82, 0.1);

  145.                                       border-radius: 20px;

  146.                                       text-align: center;

  147.                                       width: 100px;">Sự cố cháy</div>

  148.               <a href="/overview/camera-stream" target="_blank">

  149.                 <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">

  150.                   <g stroke="currentColor" stroke-width="2">

  151.                     <path d="M16 16V8a1 1 0 00-1-1H5a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1z"/>

  152.                     <path stroke-linejoin="round" d="M20 7l-4 3v4l4 3V7z"/>

  153.                   </g>

  154.                 </svg>

  155.               </a>

  156.             </div>

  157.             <div><strong>Địa điểm:</strong> 120 Xa Lộ Hà Nội, Thành Phố, Thủ Đức, Thành phố Hồ Chí Minh</div>

  158.             <div><strong>Tọa độ:</strong> 10.8661° N, 106.8029° E</div>

  159.             <div><strong>Thời gian:</strong> 01:54, 16/05/2022</div>

  160.             <a href="/overview/overall-ground" target="_blank">Xem chi tiết</a>`,

  161. 

  162.   sensorActiveSmoke: `

  163.             <div style="display: flex;

  164.                 flex-direction: column;

  165.                 align-items: center">

  166.               <div style="display: flex; flex-direction: row;  gap: 39px;width: 100%; justify-content: center;">

  167.                 <div class="tooltip">

  168.                  <div style="width: 30px; height: 30px; position: absolute; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: linear-gradient(#ff0000, #C70039);">

  169.                   <div style="position: absolute !important; width: 100%; height: 100%; background: #ff0000; border-radius: 50%; z-index: 1; animation: sensor-on 2s ease-out infinite;"></div>

  170.                   <div style="position: absolute !important; width: 100%; height: 100%; background: #ff0000; border-radius: 50%; z-index: 1; animation: sensor-on 2s ease-out infinite; animation-delay: 1s;"></div>

  171.                   <img src="assets/images/sensor-on.png" style="width: 30px; height: 30px; z-index: 9;">

  172.                 </div>

  173. 

  174.                   <div class="tooltiptext">

  175.                     <div style="display: flex;

  176.                           flex-direction: row;

  177.                           justify-content: space-between;">

  178.                           <div style="color: #F33152;

  179.                                                   padding: 5px 13px;

  180.                                                   background-color: rgba(243, 49, 82, 0.1);

  181.                                                   border-radius: 20px;

  182.                                                   text-align: center;

  183.                                                   width: 100px;">Sự cố cháy</div>

  184.                           <a href="/overview/camera-stream">

  185.                             <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">

  186.                               <g stroke="currentColor" stroke-width="2">

  187.                                 <path d="M16 16V8a1 1 0 00-1-1H5a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1z"/>

  188.                                 <path stroke-linejoin="round" d="M20 7l-4 3v4l4 3V7z"/>

  189.                               </g>

  190.                             </svg>

  191.                           </a>

  192.                         </div>

  193.                         <div><strong>Địa điểm:</strong> 120 Xa Lộ Hà Nội, Thành Phố, Thủ Đức, Thành phố Hồ Chí Minh</div>

  194.                         <div><strong>Tọa độ:</strong> 10.8661° N, 106.8029° E</div>

  195.                         <div><strong>Thời gian:</strong> 01:54, 16/05/2022</div>

  196.                         <a href="/overview/overall-ground" target="_blank">Xem chi tiết</a>

  197.                   </div>

  198.                 </div>

  199. 

  200.                 <a href="/overview/camera-stream" target="_blank">

  201.                   <img style="width: 30px; height: 30px;" src="assets/images/camera.png">

  202.                 </a>

  203.               </div>

  204.               <div style="background: #F11E1E; color: #FFF; padding: 2px 3px; font-size: 11px"><b>ALARM: SMOKE ALERT</b></div>

  205.             </div>

  206.             <style>

  207.             .tooltip {

  208.                   position: relative;

  209.                   display: inline-block;

  210.                 }

  211.                 .tooltip .tooltiptext {

  212.                   visibility: hidden;

  213.                   width: 300px;

  214.                   padding: 10px;

  215.                   background-color: #fff;

  216.                   color: black;

  217.                   border-radius: 6px;

  218.                   position: absolute;

  219.                   z-index: 1;

  220.                   bottom: 100%;

  221.                   left: 50%;

  222.                   margin-left: -60px;

  223.                 }

  224. 

  225.               .tooltip:hover .tooltiptext {

  226.                 visibility: visible;

  227.               }

  228.                @keyframes sensor-on {

  229.                     100% {

  230.                       transform: scale(2);

  231.                       opacity: 0;

  232.                     }

  233.                   }

  234.           </style>`,

  235.   sensorActiveVib: `

  236.             <div style="display: flex;

  237.                 flex-direction: column;

  238.                 align-items: center">

  239.               <div style="display: flex; flex-direction: row;  gap: 39px;width: 100%; justify-content: center;">

  240.                 <div class="tooltip">

  241.                  <div style="width: 30px; height: 30px; position: absolute; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: linear-gradient(#ff0000, #C70039);">

  242.                   <div style="position: absolute !important; width: 100%; height: 100%; background: #ff0000; border-radius: 50%; z-index: 1; animation: sensor-on 2s ease-out infinite;"></div>

  243.                   <div style="position: absolute !important; width: 100%; height: 100%; background: #ff0000; border-radius: 50%; z-index: 1; animation: sensor-on 2s ease-out infinite; animation-delay: 1s;"></div>

  244.                   <img src="assets/images/sensor-on.png" style="width: 30px; height: 30px; z-index: 9;">

  245.                 </div>

  246. 

  247.                   <div class="tooltiptext">

  248.                     <div style="display: flex;

  249.                           flex-direction: row;

  250.                           justify-content: space-between;">

  251.                           <div style="color: #F33152;

  252.                                                   padding: 5px 13px;

  253.                                                   background-color: rgba(243, 49, 82, 0.1);

  254.                                                   border-radius: 20px;

  255.                                                   text-align: center;

  256.                                                   width: 100px;">Sự cố cháy</div>

  257.                           <a href="/overview/camera-stream">

  258.                             <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">

  259.                               <g stroke="currentColor" stroke-width="2">

  260.                                 <path d="M16 16V8a1 1 0 00-1-1H5a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1z"/>

  261.                                 <path stroke-linejoin="round" d="M20 7l-4 3v4l4 3V7z"/>

  262.                               </g>

  263.                             </svg>

  264.                           </a>

  265.                         </div>

  266.                         <div><strong>Địa điểm:</strong> 120 Xa Lộ Hà Nội, Thành Phố, Thủ Đức, Thành phố Hồ Chí Minh</div>

  267.                         <div><strong>Tọa độ:</strong> 10.8661° N, 106.8029° E</div>

  268.                         <div><strong>Thời gian:</strong> 01:54, 16/05/2022</div>

  269.                         <a href="/overview/overall-ground" target="_blank">Xem chi tiết</a>

  270.                   </div>

  271.                 </div>

  272. 

  273.                 <a href="/overview/camera-stream" target="_blank">

  274.                   <img style="width: 30px; height: 30px;" src="assets/images/camera.png">

  275.                 </a>

  276.               </div>

  277.               <div style="background: #F11E1E; color: #FFF; padding: 2px 3px; font-size: 11px"><b>ALARM: VIBRATION ALERT</b></div>

  278.             </div>

  279.             <style>

  280.             .tooltip {

  281.                   position: relative;

  282.                   display: inline-block;

  283.                 }

  284.                 .tooltip .tooltiptext {

  285.                   visibility: hidden;

  286.                   width: 300px;

  287.                   padding: 10px;

  288.                   background-color: #fff;

  289.                   color: black;

  290.                   border-radius: 6px;

  291.                   position: absolute;

  292.                   z-index: 1;

  293.                   bottom: 100%;

  294.                   left: 50%;

  295.                   margin-left: -60px;

  296.                 }

  297. 

  298.               .tooltip:hover .tooltiptext {

  299.                 visibility: visible;

  300.               }

  301.                @keyframes sensor-on {

  302.                     100% {

  303.                       transform: scale(2);

  304.                       opacity: 0;

  305.                     }

  306.                   }

  307.           </style>`,

  308. }