Add GET routes for /history and /experimental-ocr; Refactor Sidebar.tsx (#186)

This commit is contained in:
Icereed 2025-02-03 14:32:13 +01:00 committed by GitHub
parent 1cee2cf2ec
commit b8807859c5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 37 additions and 13 deletions

View file

@ -270,6 +270,14 @@ func main() {
router.GET("/", func(c *gin.Context) {
serveEmbeddedFile(c, "", "index.html")
})
// history route
router.GET("/history", func(c *gin.Context) {
serveEmbeddedFile(c, "", "index.html")
})
// experimental-ocr route
router.GET("/experimental-ocr", func(c *gin.Context) {
serveEmbeddedFile(c, "", "index.html")
})
// Start OCR worker pool
numWorkers := 1 // Number of workers to start

View file

@ -1,11 +1,10 @@
import { mdiHistory, mdiHomeOutline, mdiTextBoxSearchOutline } from "@mdi/js";
import { Icon } from "@mdi/react";
import axios from "axios";
import React, { useCallback, useEffect, useState } from 'react';
import "./Sidebar.css";
import { Link, useLocation } from 'react-router-dom';
import { Icon } from '@mdi/react';
import { mdiHomeOutline, mdiTextBoxSearchOutline, mdiHistory } from '@mdi/js';
import React, { useCallback, useEffect, useState } from "react";
import { Link, useLocation } from "react-router-dom";
import logo from "../assets/logo.svg";
import "./Sidebar.css";
interface SidebarProps {
onSelectPage: (page: string) => void;
@ -27,7 +26,9 @@ const Sidebar: React.FC<SidebarProps> = ({ onSelectPage }) => {
const [ocrEnabled, setOcrEnabled] = useState(false);
const fetchOcrEnabled = useCallback(async () => {
try {
const res = await axios.get<{ enabled: boolean }>("/api/experimental/ocr");
const res = await axios.get<{ enabled: boolean }>(
"/api/experimental/ocr"
);
setOcrEnabled(res.data.enabled);
} catch (err) {
console.error(err);
@ -39,30 +40,45 @@ const Sidebar: React.FC<SidebarProps> = ({ onSelectPage }) => {
}, [fetchOcrEnabled]);
const menuItems = [
{ name: 'home', path: '/', icon: mdiHomeOutline, title: 'Home' },
{ name: 'history', path: '/history', icon: mdiHistory, title: 'History' },
{ name: "home", path: "/", icon: mdiHomeOutline, title: "Home" },
{ name: "history", path: "/history", icon: mdiHistory, title: "History" },
];
// If OCR is enabled, add the OCR menu item
if (ocrEnabled) {
menuItems.push({ name: 'ocr', path: '/experimental-ocr', icon: mdiTextBoxSearchOutline, title: 'OCR' });
menuItems.push({
name: "ocr",
path: "/experimental-ocr",
icon: mdiTextBoxSearchOutline,
title: "OCR",
});
}
return (
<div className={`sidebar min-w-[64px] ${collapsed ? "collapsed" : ""}`}>
<div className={`sidebar-header ${collapsed ? "collapsed" : ""}`}>
{!collapsed && <img src={logo} alt="Logo" className="logo w-8 h-8 object-contain flex-shrink-0" />}
{!collapsed && (
<img
src={logo}
alt="Logo"
className="logo w-8 h-8 object-contain flex-shrink-0"
/>
)}
<button className="toggle-btn" onClick={toggleSidebar}>
&#9776;
</button>
</div>
<ul className="menu-items">
{menuItems.map((item) => (
<li key={item.name} className={location.pathname === item.path ? "active" : ""}>
<li
key={item.name}
className={location.pathname === item.path ? "active" : ""}
onClick={() => handlePageClick(item.name)}
>
<Link
to={item.path}
onClick={() => handlePageClick(item.name)}
style={{ display: 'flex', alignItems: 'center' }}
style={{ display: "flex", alignItems: "center" }}
>
{/* <Icon path={item.icon} size={1} />
{!collapsed && <span>&nbsp; {item.title}</span>} */}