Skip to content

Commit

Permalink
test
Browse files Browse the repository at this point in the history
  • Loading branch information
@RaulTrombin
RaulTrombin committed Dec 20, 2024
1 parent b5b23c5 commit 89cce5a
Show file tree
Hide file tree
Showing 8 changed files with 132 additions and 140 deletions.
Binary file modified ping-viewer-next-frontend/bun.lockb
View file
Binary file not shown.
18 changes: 9 additions & 9 deletions ping-viewer-next-frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@
"core-js": "^3.39.0",
"roboto-fontface": "^0.10.0",
"vue": "3.5.8",
"vuetify": "^3.7.4"
"vuetify": "^3.7.6"
},
"devDependencies": {
"@biomejs/biome": "1.9.2",
"@vitejs/plugin-vue": "^5.1.5",
"@vitejs/plugin-vue": "^5.2.1",
"autoprefixer": "^10.4.20",
"eslint": "^8.57.1",
"eslint-config-standard": "^17.1.0",
Expand All @@ -25,18 +25,18 @@
"eslint-plugin-n": "^16.6.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^6.6.0",
"eslint-plugin-vue": "^9.31.0",
"pinia": "^2.2.6",
"eslint-plugin-vue": "^9.32.0",
"pinia": "^2.3.0",
"postcss": "^8.4.49",
"sass": "1.77.6",
"tailwindcss": "^3.4.14",
"tailwindcss": "^3.4.17",
"unplugin-auto-import": "^0.17.8",
"unplugin-fonts": "^1.1.1",
"unplugin-vue-components": "^0.27.4",
"unplugin-vue-router": "^0.10.8",
"unplugin-fonts": "^1.3.1",
"unplugin-vue-components": "^0.27.5",
"unplugin-vue-router": "^0.10.9",
"vite": "^5.4.11",
"vite-plugin-vue-layouts": "^0.11.0",
"vite-plugin-vuetify": "^2.0.4",
"vue-router": "^4.4.5"
"vue-router": "^4.5.0"
}
}
122 changes: 53 additions & 69 deletions ping-viewer-next-frontend/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,11 +202,11 @@
</v-app>
</template>
<script setup>
import { ref, computed } from 'vue'
import { useDisplay, useTheme } from 'vuetify'
import { computed, ref } from 'vue';
import { useDisplay, useTheme } from 'vuetify';
import ConnectionManager from './components/ConnectionManager.vue';
import Ping360Settings from './components/widgets/sonar360/Ping360Settings.vue';
import Ping1DSettings from './components/widgets/sonar1d/Ping1DSettings.vue';
import Ping360Settings from './components/widgets/sonar360/Ping360Settings.vue';
const getDeviceSettingsComponent = computed(() => {
if (!activeDevice.value) return null;
Expand All @@ -223,15 +223,9 @@ const currentDeviceAngles = computed(() => {
});
// Add handlers for device-specific settings
const handleAngleUpdate = ({ startAngle, endAngle }) => {
// Handle angle updates for Ping360
console.log('Angle update:', { startAngle, endAngle });
};
const handleAngleUpdate = ({ startAngle, endAngle }) => {};
const handleRangeChange = (newRange) => {
// Handle range changes
console.log('Range change:', newRange);
};
const handleRangeChange = (newRange) => {};
const getServerUrl = (wsUrl) => {
try {
Expand All @@ -243,8 +237,8 @@ const getServerUrl = (wsUrl) => {
}
};
const { name: breakpoint } = useDisplay()
const theme = useTheme()
const { name: breakpoint } = useDisplay();
const theme = useTheme();
const handleServerUrlUpdate = async (newUrl) => {
serverUrl.value = newUrl;
Expand All @@ -266,16 +260,17 @@ const handleServerUrlUpdate = async (newUrl) => {
}
};
const isSpeedDialOpen = ref(false)
const isGlassMode = ref(true)
const glass = computed(() => isGlassMode.value)
const isSpeedDialOpen = ref(false);
const isGlassMode = ref(true);
const glass = computed(() => isGlassMode.value);
const updateGlassMode = (value) => {
isGlassMode.value = value;
localStorage.setItem('glassMode', value.toString());
};
const updateConnectionIcon = () => isConnectionMenuOpen.value ? 'mdi-close' : 'mdi-connection';
const updateVisualSettingsIcon = () => showSettings.value ? 'mdi-close' : 'mdi-white-balance-sunny'
const updateConnectionIcon = () => (isConnectionMenuOpen.value ? 'mdi-close' : 'mdi-connection');
const updateVisualSettingsIcon = () =>
showSettings.value ? 'mdi-close' : 'mdi-white-balance-sunny';
const getStatusColor = computed(() => (status) => {
switch (status) {
Expand All @@ -296,55 +291,55 @@ const speedDialItems = ref([
dialog: {
isOpen: false,
title: 'Information',
content: 'Information content goes here'
}
content: 'Information content goes here',
},
},
{
icon: updateConnectionIcon,
action: () => {
isConnectionMenuOpen.value = !isConnectionMenuOpen.value;
}
},
},
{
icon: updateVisualSettingsIcon,
action: () => {
showSettings.value = !showSettings.value;
}
},
},
{ icon: 'mdi-memory-arrow-down' },
{
icon: 'mdi-settings',
dialog: {
isOpen: false,
title: 'Settings',
content: 'Settings content goes here'
}
}
])
content: 'Settings content goes here',
},
},
]);
const iconColor = computed(() => {
return theme.global.current.value.dark ? 'white' : 'black'
})
return theme.global.current.value.dark ? 'white' : 'black';
});
const iconSize = computed(() => {
const sizes = {
xs: 'default',
sm: 'large',
default: 'x-large'
}
return sizes[breakpoint.value] || sizes.default
})
default: 'x-large',
};
return sizes[breakpoint.value] || sizes.default;
});
const dialogWidth = computed(() => {
const sizes = {
xs: '90vw',
sm: '400px',
md: '500px',
lg: '600px',
default: '600px'
}
return sizes[breakpoint.value] || sizes.default
})
default: '600px',
};
return sizes[breakpoint.value] || sizes.default;
});
const isConnectionMenuOpen = ref(false);
const isVisualSettingsMenuOpen = ref(false);
Expand All @@ -360,12 +355,12 @@ const selectDevice = async (device) => {
if (activeDevice.value) {
// Clean up any existing websocket connections
const oldWebSocket = `ws://${new URL(serverUrl.value).host}/ws?device_number=${activeDevice.value.device.id}`;
const connections = [...websocket.value?.clients || []];
connections.forEach(conn => {
const connections = [...(websocket.value?.clients || [])];
for (const conn of connections) {
if (conn.url === oldWebSocket) {
conn.close();
}
});
}
// Clear the active device first
activeDevice.value = null;
Expand All @@ -377,38 +372,31 @@ const selectDevice = async (device) => {
const component = device.device_type === 'Ping360' ? Ping360Loader : Ping1DLoader;
activeDevice.value = {
device,
component
component,
};
isConnectionMenuOpen.value = false;
};
// Add this to your reactive state
const activeDevice = ref(null);
const isMenuOpen = ref(false)
const isMenuOpen = ref(false);
const config = ref({
wifi: true,
strength: 75,
network: 'Home Network',
autoConnect: true
})
autoConnect: true,
});
const networkOptions = [
'Home Network',
'Office Network',
'Guest Network',
'Public WiFi'
]
const networkOptions = ['Home Network', 'Office Network', 'Guest Network', 'Public WiFi'];
const toggleMenu = () => {
isMenuOpen.value = !isMenuOpen.value
}
isMenuOpen.value = !isMenuOpen.value;
};
const saveConfig = () => {
console.log('Saving config:', config.value)
isMenuOpen.value = false
}
isMenuOpen.value = false;
};
import { onMounted, onUnmounted, provide, reactive, watch } from 'vue';
import { useRoute } from 'vue-router';
Expand Down Expand Up @@ -460,12 +448,10 @@ const deviceSettings = computed(() => {
};
});
const getWebSocketUrl = (device) => {
if (!device || !serverUrl.value) return '';
const url = new URL(serverUrl.value);
const protocol = url.protocol === 'https:' ? 'wss:' : 'ws:';
console.log(`${protocol}//${url.host}/ws?device_number=${device.id}`)
return `${protocol}//${url.host}/ws?device_number=${device.id}`;
};
Expand Down Expand Up @@ -634,9 +620,9 @@ const loadSettings = () => {
const savedPing1D = localStorage.getItem('ping1d-settings');
const savedPing360 = localStorage.getItem('ping360-settings');
const savedCustomPalette = localStorage.getItem('customColorPalette');
const savedGlassMode = localStorage.getItem('glassMode')
const savedGlassMode = localStorage.getItem('glassMode');
if (savedGlassMode !== null) {
isGlassMode.value = savedGlassMode === 'true'
isGlassMode.value = savedGlassMode === 'true';
}
if (savedCommon) Object.assign(commonSettings, JSON.parse(savedCommon));
if (savedPing1D) Object.assign(ping1DSettings, JSON.parse(savedPing1D));
Expand All @@ -654,7 +640,7 @@ const saveSettings = () => {
localStorage.setItem('common-settings', JSON.stringify(commonSettings));
localStorage.setItem('ping1d-settings', JSON.stringify(ping1DSettings));
localStorage.setItem('ping360-settings', JSON.stringify(ping360Settings));
localStorage.setItem('glassMode', isGlassMode.value.toString())
localStorage.setItem('glassMode', isGlassMode.value.toString());
if (commonSettings.customPalette?.length > 0) {
localStorage.setItem('customColorPalette', JSON.stringify(commonSettings.customPalette));
}
Expand Down Expand Up @@ -713,9 +699,9 @@ const updateDarkMode = (value) => {
};
const toggleTheme = () => {
theme.global.name.value = isDarkMode.value ? 'dark' : 'light'
localStorage.setItem('theme', theme.global.name.value)
}
theme.global.name.value = isDarkMode.value ? 'dark' : 'light';
localStorage.setItem('theme', theme.global.name.value);
};
const toggleFullscreen = () => {
if (!document.fullscreenElement) {
Expand Down Expand Up @@ -831,9 +817,9 @@ provide('deviceSettings', {
});
const playRecording = (recording) => {
showRecordingsMenu.value = false; // Close the menu
isReplayActive.value = true; // Show the replay view
replayData.value = recording; // Set the recording data
showRecordingsMenu.value = false; // Close the menu
isReplayActive.value = true; // Show the replay view
replayData.value = recording; // Set the recording data
// Optional: Close any active device view
if (activeDevice.value) {
Expand Down Expand Up @@ -932,7 +918,7 @@ const formatRecordingDetails = (recording) => {
};
const deleteRecording = (recording) => {
const index = recordings.value.findIndex(r => r.id === recording.id);
const index = recordings.value.findIndex((r) => r.id === recording.id);
if (index !== -1) {
recordings.value.splice(index, 1);
// Also remove from localStorage if you're storing them there
Expand All @@ -953,7 +939,6 @@ const saveRecordingsToStorage = () => {
}
};
// Add these watchers to handle menu state
watch(isSpeedDialOpen, (newValue) => {
if (newValue) {
Expand All @@ -973,7 +958,6 @@ watch(showRecordingsMenu, (newValue) => {
isMenuOpen.value = false;
}
});
</script>
<style>
:root {
Expand Down
21 changes: 10 additions & 11 deletions ping-viewer-next-frontend/src/components/ConnectionManager.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,6 @@
<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
const props = defineProps({
serverUrl: {
type: String,
Expand Down Expand Up @@ -229,17 +228,17 @@ const createDevice = async () => {
const source =
newDevice.value.connectionType === 'UdpStream'
? {
UdpStream: {
ip: newDevice.value.udp.ip,
port: newDevice.value.udp.port,
},
}
UdpStream: {
ip: newDevice.value.udp.ip,
port: newDevice.value.udp.port,
},
}
: {
SerialStream: {
path: newDevice.value.serial.path,
baudrate: newDevice.value.serial.baudrate,
},
};
SerialStream: {
path: newDevice.value.serial.path,
baudrate: newDevice.value.serial.baudrate,
},
};
const response = await fetch(`${props.serverUrl}/device_manager/request`, {
method: 'POST',
Expand Down
Loading

0 comments on commit 89cce5a

Please sign in to comment.