dirkjanm · flashlam · Mar 12, 2025 · Mar 13, 2025 · Apr 9, 2025 · Jun 3, 2025
diff --git a/Policies.png b/Policies.png
diff --git a/preview.png b/preview.png
diff --git a/roadrecon/.dockerignore b/roadrecon/.dockerignore
@@ -0,0 +1 @@
+roadrecon.db
diff --git a/roadrecon/Dockerfile b/roadrecon/Dockerfile
@@ -0,0 +1,11 @@
+FROM python:3.11-slim AS dev
+COPY . /app
+WORKDIR /app
+RUN pip install .
+CMD [ "python3","/app/roadtools/roadrecon/server.py","--debug" ]
+
+FROM python:3.11-slim AS prod
+COPY . /app
+WORKDIR /app
+RUN pip install .
+CMD [ "python3","/app/roadtools/roadrecon/server.py" ]
diff --git a/roadrecon/docker-compose.yml b/roadrecon/docker-compose.yml
@@ -0,0 +1,21 @@
+services:
+  frontend:
+    build:
+      context: frontend-ng
+      target: ${TARGET:-prod}
+    ports:
+      - 5173:5173
+    volumes:
+      - ./frontend-ng/:/usr/src/app/
+    restart: always
+    depends_on:
+      - backend
+  backend:
+    build:
+      context: .
+      target: ${TARGET:-prod}
+    volumes:
+      - ./:/app/
+    ports:
+      - 5000:5000
+    restart: always
diff --git a/roadrecon/frontend-ng/.gitignore b/roadrecon/frontend-ng/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/roadrecon/frontend-ng/CHANGELOG.md b/roadrecon/frontend-ng/CHANGELOG.md
@@ -0,0 +1,57 @@
+# CHANGELOG.md
+
+## [3.0.0] - 2024-07-05
+
+- Mosaic Redesign
+
+## [2.1.0] - 2023-12-08
+
+Update to Vite 5
+Update dependencies
+
+## [2.0.1] - 2023-10-04
+
+- Dependencies update
+
+## [2.0.0] - 2023-06-01
+
+- Dark version added
+
+## [1.4.3] - 2023-04-11
+
+- Update dependencies
+
+## [1.4.2] - 2023-02-13
+
+- Update dependencies
+- Improve sidebar icons color logic
+
+## [1.4.0] - 2022-08-30
+
+- Update sidebar
+
+## [1.3.0] - 2022-07-15
+
+- Replace Sass with CSS files
+- Update dependencies
+
+## [1.1.0] - 2021-12-13
+
+- Update Tailwind 3
+- Several improvements
+
+## [1.0.3] - 2021-12-10
+
+- Alignment issue
+
+## [1.0.2] - 2021-11-23
+
+- Alignment issue
+
+## [1.0.1] - 2021-11-22
+
+Fix dashboard icon color
+
+## [1.0.0] - 2021-11-22
+
+First release
diff --git a/roadrecon/frontend-ng/Dockerfile b/roadrecon/frontend-ng/Dockerfile
@@ -0,0 +1,29 @@
+# Build stage
+FROM node:latest AS builder
+
+COPY package*.json /usr/src/
+WORKDIR /usr/src/
+RUN npm install
+ENV PATH /usr/src/node_modules/.bin:$PATH
+COPY . /usr/src/app
+WORKDIR /usr/src/app
+RUN npm run docker
+
+# Development stage
+FROM node:latest AS dev
+COPY package*.json /usr/src/
+WORKDIR /usr/src/
+RUN npm install --include=dev
+ENV PATH /usr/src/node_modules/.bin:$PATH
+COPY . /usr/src/app
+WORKDIR /usr/src/app
+EXPOSE 5173
+CMD ["npm", "run", "dev"]
+
+# Production stage
+FROM nginx:alpine AS prod
+COPY ./nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=builder /usr/src/app/dist /usr/share/nginx/html
+
+EXPOSE 5173
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/roadrecon/frontend-ng/README.md b/roadrecon/frontend-ng/README.md
@@ -0,0 +1,13 @@
+# Roadrecon UI NG
+
+## New features
+
+- New Frontend based on Vite, VueJS and PrimeVue framework
+- Backend pagination for better performance on large databases
+- Added a Policies detail page
+
+## Credits
+
+- Dirk-jan Mollema as the original author of the backend and the tool suite
+- Kevin Tellier for the new UI
+- Template by [Cruip.com](https://cruip.com/)
diff --git a/roadrecon/frontend-ng/index.html b/roadrecon/frontend-ng/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" class="p-dark dark">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ROADrecon</title>
+  </head>
+  <body class="font-inter antialiased bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-400">
+    <script>
+        if (localStorage.getItem('sidebar-expanded') == 'true') {
+            document.querySelector('body').classList.add('sidebar-expanded');
+        } else {
+            document.querySelector('body').classList.remove('sidebar-expanded');
+        }
+    </script>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/roadrecon/frontend-ng/nginx.conf b/roadrecon/frontend-ng/nginx.conf
@@ -0,0 +1,16 @@
+server {
+    listen 5173;
+
+    location / {
+        root /usr/share/nginx/html;
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /api/ {
+        proxy_pass http://backend:5000/api/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
diff --git a/roadrecon/frontend-ng/package.json b/roadrecon/frontend-ng/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "mosaic-vue",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "docker": "vite build --config vite.config.docker.js",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@primevue/themes": "^4.0.7",
+    "@tailwindcss/forms": "^0.5.7",
+    "@vueuse/core": "^10.7.0",
+    "axios": "^1.7.7",
+    "clipboard": "^2.0.11",
+    "cors": "^2.8.5",
+    "dayjs": "^1.11.13",
+    "flatpickr": "^4.6.13",
+    "moment": "^2.29.4",
+    "primeicons": "^7.0.0",
+    "primevue": "^4.0.7",
+    "vite-svg-loader": "^5.1.0",
+    "vue": "^3.2.20",
+    "vue-flatpickr-component": "^11.0.3",
+    "vue-router": "^4.2.5",
+    "vue3-json-viewer": "^2.2.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vue/compiler-sfc": "^3.2.20",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.6",
+    "vite": "^5.4.5"
+  }
+}
diff --git a/roadrecon/frontend-ng/postcss.config.cjs b/roadrecon/frontend-ng/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/roadrecon/frontend-ng/public/_redirects b/roadrecon/frontend-ng/public/_redirects
@@ -0,0 +1 @@
+/* /index.html 200
diff --git a/roadrecon/frontend-ng/public/favicon.ico b/roadrecon/frontend-ng/public/favicon.ico
diff --git a/roadrecon/frontend-ng/src/App.vue b/roadrecon/frontend-ng/src/App.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="flex h-screen overflow-hidden">
+    <!-- Sidebar -->
+    <Sidebar :sidebarOpen="sidebarOpen" @close-sidebar="sidebarOpen = false" />
+    <!-- Content area -->
+    <div class="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
+      <Header :sidebarOpen="sidebarOpen" @toggle-sidebar="sidebarOpen = !sidebarOpen" />
+      <router-view :key="$route.fullPath"/>
+      <Toast />
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+import Sidebar from './partials/Sidebar.vue'
+import Header from './partials/Header.vue'
+import Toast from 'primevue/toast';
+import { useDark } from "@vueuse/core";
+
+
+export default {
+  name: 'App',
+  components: {
+    Sidebar,
+    Header,
+    Toast,
+  },
+  setup() {
+
+    const sidebarOpen = ref(false)
+
+    return {
+      sidebarOpen,
+    }  
+  }
+}
+</script>
+
+<style>
+  .p-card {
+    height: min-content;
+  }
+</style>
+