4 changed files with 116 additions and 2 deletions
@@ -0,0 +1,21 @@
+'use client';
+
+import React, { createContext, useState, ReactNode } from 'react';
+
+export const LanguageContext = createContext<{
+  language: string;
+  setLanguage: (lang: string) => void;
+}>({
+  language: 'eng',
+  setLanguage: () => {}, 
+});
+
+export const LanguageProvider = ({ children }: { children: ReactNode }) => {
+  const [language, setLanguage] = useState('eng');
+
+  return (
+    <LanguageContext.Provider value={{ language, setLanguage }}>
+      {children}
+    </LanguageContext.Provider>
+  );
+};
@@ -0,0 +1,69 @@
+'use client';
+
+import { useRouter } from 'next/navigation'; 
+import React, { useState, useContext } from 'react';
+import text from "../lang";
+import { LanguageContext } from '../context/LanguageContext';
+
+
+const GlpPage = () => {
+  const router = useRouter(); 
+
+  const { language, setLanguage } = useContext(LanguageContext);
+  const [model, setModel] = useState('gen');
+
+  const tr_hTitle = text(language, 'header_title');
+  const tr_hSubtitle = text(language, 'header_subtitle');
+  const tr_boxObjTitle = text(language, 'boxObjTitle');
+  const tr_boxObjDesc = text(language, "boxObjDesc");
+  const tr_boxSubjTitle = text(language, 'boxSubjTitle');
+  const tr_boxSubjDesc = text(language, "boxSubjDesc");
+  const tr_boxBoundsTitle = text(language, 'boxBoundsTitle');
+  const tr_boxBoundsDesc = text(language, "boxBoundsDesc");
+  const tr_boxVarsTitle = text(language, 'boxVarsTitle');
+  const tr_boxVarsDesc = text(language, "boxVarsDesc");
+  const tr_boxOut = text(language, "boxOut");
+  const tr_boxExportLP = text(language, "boxExportLP");
+  const tr_calc_max = text(language, "maximize");
+  const tr_calc_min = text(language, "minimize");
+  const tr_calcButton = text(language, "buttonCalc");
+  const tr_boxExportMPS = text(language, "boxExportMPS");
+
+  const handleLanguageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setLanguage(event.target.value);
+  };
+
+  const changeModel = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedModel = event.target.value;
+    setModel(selectedModel);
+
+    if (selectedModel === 'spec') {
+      router.push('/'); 
+    }
+  };
+
+  return (
+    <header className="header">
+        <div className="title">
+          <main className="header_box">
+            {tr_hTitle}
+            <br />
+            <span className="header_copyright">
+              <i>{tr_hSubtitle}</i>
+            </span>
+            <br />
+            <select id="language_current" value={language} onChange={handleLanguageChange} className="dropdown-custom">
+              <option value="ger">Deutsch</option>
+              <option value="eng">English</option>
+            </select>
+            <select id="language_current" value={model} onChange={changeModel} className="dropdown-custom">
+              <option value="gen">General Problems</option>
+              <option value="spec">Specific Problems</option>
+            </select>
+          </main>
+        </div>
+      </header>
+  );
+};
+
+export default GlpPage;
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import  Image from "next/image";
 import localFont from "next/font/local";
+import { LanguageProvider } from './context/LanguageContext'; // Importiere den Provider
 import "./globals.css";

 const geistSans = localFont({
@@ -19,16 +20,21 @@ export const metadata: Metadata = {
  description: "OR-Tool by Spaceholder Programming",
 };

+
 export default function RootLayout({
  children,
 }: Readonly<{
  children: React.ReactNode;
 }>) {
  return (
+
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
+        <LanguageProvider>
+          {children} {}
+        </LanguageProvider>
        {children}
        <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
          <footer className=" flex gap-6 flex-wrap items-center justify-center">
@@ -1,13 +1,19 @@
 'use client'

-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import { Box, Button, Output } from "./modules";
 import { calculate_click, downloadLP, downloadMPS } from "./scripts";
 import text from "./lang";
+import { spec } from 'node:test/reporters';
+import { useRouter } from 'next/navigation';
+import { LanguageContext } from './context/LanguageContext';

 export default function Home() {
-  const [language, setLanguage] = useState('eng');
+  const { language, setLanguage } = useContext(LanguageContext);
  const [maxminOption, setMaxminOption] = useState('maximize');
+  const [model] = useState('spec');
+  const router = useRouter();
+  

  const tr_hTitle = text(language, 'header_title');
  const tr_hSubtitle = text(language, 'header_subtitle');
@@ -30,6 +36,14 @@ export default function Home() {
    setLanguage(event.target.value);
  };

+  const changeModel = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedModel = event.target.value;
+
+    if (selectedModel === 'gen') {
+      router.push('./glp');
+    }
+  };
+
  const handleMaxMinChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setMaxminOption(event.target.value);
  };
@@ -49,6 +63,10 @@ export default function Home() {
              <option value="ger">Deutsch</option>
              <option value="eng">English</option>
            </select>
+            <select id="language_current" value={model} onChange={changeModel} className="dropdown-custom">
+              <option value="gen">General Problems</option>
+              <option value="spec">Specific Problems</option>
+            </select>
          </main>
        </div>
      </header>