style. @keyframes modal-icon { 0% { transform: scale(1, 1); opacity: 0.5; } 50% { transform: scale(1.1, 1.1); opacity: 1; } 100% { transform: scale(1, 1); opacity: 0.5; } } .modal-icon { animation: modal-icon 1.6s; animation-iteration-count: infinite; } @keyframes action-icon { 0% { transform: translateY(0px); opacity: 1; } 50% { transform: translateY(5px); opacity: 0.5; } 100% { transform: translateY(0px); opacity: 1; } } .action-icon { animation: action-icon 1.6s; animation-iteration-count: infinite; }
//-
//- //- //-
//-
//- FOR RENT //-

Smart Parking

OTBAN Willayah V Makassar

//-
//-
3 Bed / 2 Bath
//-
3.500 ft
//-
35.535
//-

MOTOR

MOBIL

UP

UP

DOWN

DOWN

Action Success

Process action success

script. let socket; // Declare socket variable outside to prevent duplicates let reconnectInterval = 3000; // Initial reconnection delay in milliseconds function initializeWebSocket() { //- if (socket && socket.readyState !== WebSocket.CLOSED) { //- return; // Prevent duplicate connections //- } socket = new WebSocket('wss://websocket.srasmart.co.id/'); // Replace with your WebSocket server URL // Authenticate as a client when the connection is established socket.onopen = () => { console.log('Connected to WebSocket server'); reconnectInterval = 3000; // Reset reconnect interval after successful connection socket.send(JSON.stringify({ type: 'authenticate', role: 'cient' })); }; // Handle incoming messages from the WebSocket server socket.onmessage = (event) => { const data = JSON.parse(event.data); if (data.type === 'callback') { console.log('Callback:', data.data); $('#notifImage').attr('src', 'images/pictures/33.png'); $('#notifHeader').html(' Action Successfully'); $('#notifMessage').html(data.data.data); var notificationToast = document.getElementById('notification-1'); var notificationToast = new bootstrap.Toast(notificationToast); notificationToast.show(); } else if (data.type === 'message') { console.log('Message: ' + data.message); $('#notifImage').attr('src', 'images/pictures/34.png'); $('#notifHeader').html(' Action Failure'); $('#notifMessage').html('Controller tidak terhubung, silahkan tunggu jika masih berlanjut silahkan hubungi tim IT'); var notificationToast = document.getElementById('notification-1'); var notificationToast = new bootstrap.Toast(notificationToast); notificationToast.show(); } }; // Handle WebSocket errors socket.onerror = (error) => { console.error('WebSocket Error: ', error); socket.close(); // Close the connection to trigger onclose event }; // Handle WebSocket close event with reconnection socket.onclose = () => { console.log('Disconnected from WebSocket server. Reconnecting in ' + (reconnectInterval / 1000) + ' seconds...'); // Set a timeout to reconnect after the current interval setTimeout(initializeWebSocket, reconnectInterval); // Attempt reconnection reconnectInterval = Math.min(reconnectInterval * 2, 30000); // Exponential backoff, max 30 seconds }; } // Initialize WebSocket once and set up button listeners once $(document).ready(() => { initializeWebSocket(); // Start the WebSocket connection // Set up event listeners for buttons only once $('#bike_up').on('click', () => { if (socket && socket.readyState === WebSocket.OPEN) { socket.send(JSON.stringify({ type: 'bike_up', data: 'gate bike up' })); return; } $('#notifImage').attr('src', 'images/pictures/34.png'); $('#notifHeader').html(' Action Failure'); $('#notifMessage').html('Koneksi tidak terhubung, silahkan tunggu atau reload aplikasi'); var notificationToast = document.getElementById('notification-1'); var notificationToast = new bootstrap.Toast(notificationToast); notificationToast.show(); }); $('#bike_down').on('click', () => { if (socket && socket.readyState === WebSocket.OPEN) { socket.send(JSON.stringify({ type: 'bike_down', data: 'gate bike down' })); return; } $('#notifImage').attr('src', 'images/pictures/34.png'); $('#notifHeader').html(' Action Failure'); $('#notifMessage').html('Koneksi tidak terhubung, silahkan tunggu atau reload aplikasi'); var notificationToast = document.getElementById('notification-1'); var notificationToast = new bootstrap.Toast(notificationToast); notificationToast.show(); }); $('#car_up').on('click', () => { if (socket && socket.readyState === WebSocket.OPEN) { socket.send(JSON.stringify({ type: 'car_up', data: 'gate car up' })); return; } $('#notifImage').attr('src', 'images/pictures/34.png'); $('#notifHeader').html(' Action Failure'); $('#notifMessage').html('Koneksi tidak terhubung, silahkan tunggu atau reload aplikasi'); var notificationToast = document.getElementById('notification-1'); var notificationToast = new bootstrap.Toast(notificationToast); notificationToast.show(); }); $('#car_down').on('click', () => { if (socket && socket.readyState === WebSocket.OPEN) { socket.send(JSON.stringify({ type: 'car_down', data: 'gate car down' })); return; } $('#notifImage').attr('src', 'images/pictures/34.png'); $('#notifHeader').html(' Action Failure'); $('#notifMessage').html('Koneksi tidak terhubung, silahkan tunggu atau reload aplikasi'); var notificationToast = document.getElementById('notification-1'); var notificationToast = new bootstrap.Toast(notificationToast); notificationToast.show(); }); $('#reload').on('click', () => { console.log('Reload'); window.location.reload(); }) });