mirror of
https://github.com/PhotonVision/photonvision
synced 2026-06-29 02:21:41 +00:00
c38b50911d
Fixes the following issues with the client log viewer: - Inconsistent and excessive spacing between log entries - Lack of responsiveness to window size or scaling Adds the following features to the log viewer: - Auto-scroll if scrolled to the bottom - Ability to clear logs on button click - Search function to filter logs - Displays the time the frontend captured a log and displays that timestamp in hh::mm::ss in the log viewer - Allows logs to be filtered to be after a certain time - General styling refinements to increase usability --------- Co-authored-by: Sriman Achanta <68172138+srimanachanta@users.noreply.github.com>
25 lines
637 B
Vue
25 lines
637 B
Vue
<script setup lang="ts">
|
|
import { LogLevel, type LogMessage } from "@/types/SettingTypes";
|
|
import { computed } from "vue";
|
|
|
|
const props = defineProps<{ source: LogMessage }>();
|
|
|
|
const logColorClass = computed<string>(() => {
|
|
switch (props.source.level) {
|
|
case LogLevel.ERROR:
|
|
return "red--text";
|
|
case LogLevel.WARN:
|
|
return "yellow--text";
|
|
case LogLevel.INFO:
|
|
return "light-blue--text";
|
|
case LogLevel.DEBUG:
|
|
return "white--text";
|
|
}
|
|
return "";
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="logColorClass">[{{ source.timestamp.toTimeString().split(" ")[0] }}] {{ source.message }}</div>
|
|
</template>
|