k-space/log-viewer
11
0
Fork 0
Code Issues 6 Pull Requests Projects Activity

Vue.js 3 based frontend

Browse Source
This commit is contained in:
Erki Aas
2022-10-05 17:43:41 +03:00
parent 5fe7f45728
commit b6f21b8192
21 changed files with 6569 additions and 21005 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/components/app/App.css
View File

@@ -1,3 +0,0 @@
body {
background-color: #eafaf9;
}

47
frontend/src/components/app/App.js
View File

@@ -1,47 +0,0 @@
import React, { useState, useEffect } from 'react';
import { useSSE, SSEProvider } from 'react-hooks-sse';
import './App.css';
import EventList from '../eventList/EventList.js';
import './App.css';
const Component = () => {
const event = useSSE('log-entry')
const [events, setEvents] = useState([])
useEffect(() =>{
console.info(event);
if (event) {
for (var j = 0; j < events.length; j++) {
if (events[j].timestamp <= event.timestamp) {
if (events[j]._id == event._id) {
setEvents([...events.slice(0, j), event, ...events.slice(j+1)]);
return;
} else {
setEvents([...events.slice(0, j), event, ...events.slice(j)]);
return;
}
}
}
setEvents([event, ...events]);
}
}, [event])
return <EventList data={events} />
}
function App() {
return (
<SSEProvider endpoint="/events" >
<Component />
</SSEProvider>
)
}
export default App;

18
frontend/src/components/event/Event.css
View File

@@ -1,18 +0,0 @@
.eventDiv {
background-color: aliceblue;
border: 2px solid #26A69A;
border-radius: 15px;
text-align: left;
padding: 5px;
max-width: fit-content;
font-family: apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
color: #092a26;
margin: 7px 0px;
}
.eventPic {
border-radius: 15px;
border: 1px groove #d5f6f2;
max-width:100%;
max-height:100%;
}

23
frontend/src/components/event/Event.js
View File

@@ -1,23 +0,0 @@
import React from "react";
import "./Event.css";
function Event(props) {
let imgArray = [];
if (props.data.hasOwnProperty('screenshots')) {
props.data.screenshots.forEach(element => {
imgArray = [...imgArray, (<a href={element.orig} target="_blank"><img src={element.url} className="eventPic"></img></a>)]
});
}
return (
<div className="eventDiv">
{JSON.stringify(props.data.source)}
<br></br>
{[...imgArray]}
</div>
);
}
export default Event;

11
frontend/src/components/eventList/EventList.css
View File

@@ -1,11 +0,0 @@
.eventListUl {
background-color: #c1f1ec;
max-width: 75%;
padding: 5px;
border: 5px solid #26A69A;
border-radius: 5px;
}
.eventListLi {
list-style: none;
}

15
frontend/src/components/eventList/EventList.js
View File

@@ -1,15 +0,0 @@
import React from 'react';
import Event from '../event/Event.js';
import './EventList.css';
function EventList(props) {
return (
<ul className="eventListUl">
{props.data.map((event) => {
return <li className="eventListLi"><Event data={event} /></li>
})}
</ul>
)
}
export default EventList;

3
frontend/src/index.css
View File

@@ -1,3 +0,0 @@
body {
}

17
frontend/src/index.js
View File

@@ -1,17 +0,0 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/app/App.js';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

13
frontend/src/reportWebVitals.js
View File

@@ -1,13 +0,0 @@
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;

5
frontend/src/setupTests.js
View File

@@ -1,5 +0,0 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';