diff --git a/Frontend/package.json b/Frontend/package.json
index 73a1e9eed2060ae1a74a2929a9c970aaf4005043..63a040b6af4dfce804c41320edba17d8fe748b38 100644
--- a/Frontend/package.json
+++ b/Frontend/package.json
@@ -9,8 +9,8 @@
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"flowbite": "^1.4.4",
- "react": "^18.0.0",
- "react-dom": "^18.0.0",
+ "react": "^18.1.0",
+ "react-dom": "^18.1.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
diff --git a/Frontend/public/index.html b/Frontend/public/index.html
index aa069f27cbd9d53394428171c3989fd03db73c76..afb65197059bf1d95b8992461fc4d34306c5b6a8 100644
--- a/Frontend/public/index.html
+++ b/Frontend/public/index.html
@@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
- <title>React App</title>
+ <title>Fair Register</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/Frontend/src/components/registerwork/HelpIcon.jsx b/Frontend/src/components/registerwork/HelpIcon.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..9645612a987db3a74ce2dbfbcf3ae79c996438c0
--- /dev/null
+++ b/Frontend/src/components/registerwork/HelpIcon.jsx
@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+
+const HelpIcon = (props) => {
+ const [helpmessage, setHelpmessage] = useState(false);
+
+ return (
+ <>
+ <div onClick={() => setHelpmessage(true)}>
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="gray">
+ <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+ </svg>
+ </div>
+ {helpmessage ?
+ <div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+
+ <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+
+ <div class="fixed z-10 inset-0 overflow-y-auto">
+ <div class="flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0">
+
+ <div class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full">
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+ <div class="sm:flex sm:items-start">
+ <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10">
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
+ <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+ </svg>
+ </div>
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+ <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Hilfe</h3>
+ <div class="mt-2">
+ <p class="text-sm text-gray-500">{props.Message}</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+ <button type="button" onClick={() => {
+ setHelpmessage(false)
+ console.log("KLICK")
+ }} class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm">OK</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ :
+ <div></div>}
+ </>
+
+
+ );
+};
+
+export default HelpIcon;
diff --git a/Frontend/src/components/registerwork/registerworkInformation.jsx b/Frontend/src/components/registerwork/registerworkInformation.jsx
index 1ca599dd20e3e607770e3b9de2a7e48539d920d5..4ebe16d16951b4af116a5539cdc2c1a1cde40504 100644
--- a/Frontend/src/components/registerwork/registerworkInformation.jsx
+++ b/Frontend/src/components/registerwork/registerworkInformation.jsx
@@ -1,10 +1,35 @@
import React, { useState } from "react";
+import HelpIcon from "./HelpIcon";
const RegisterWorkInformation = () => {
- const [language, setLanguage] = useState("");
+ //work information
+ //Beschreibung
+ const [type, setType] = useState("");
+ const [title, setTitle] = useState("");
+ const [description, setDescription] = useState("");
+ const [tags, setTags] = useState(""); //TODO häufiig verwendete Tags abfragen
+ const [language, setLanguage] = useState(""); ////TODO all Sprachen abfragen?
+ const [creation_date, SetCreation_date] = useState("");
+ //Beteiligte Personen
+ const [creator, setCreator] = useState(""); //TODO brauch ich dieses Feld bekomme ich das von den UserService? vielleicht auch registrar?
+ const [creatorURL, setCreatorURL] = useState("");
+ const [publisher, setPublisher] = useState("");
+ const [attribution, setAttribution] = useState("");
+ //Zusätzliche Felder
+ const [workURL, setWorksURL] = useState("");
+ const [identifier, setIdentifier] = useState("");
+ const [source, setSource] = useState("");
+ const [relation, setRelation] = useState("");
+ //Weitere Lizenz-Informationen
+ const [licenceTerms, setLicenceTerms] = useState(""); //TODO brachts das noch?? wenn, ja passt das doch besser zu Licence UseCase
+
+ function save(){
+
+ }
return (
<div className=" max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 sm:my-6 lg:my-10">
+ {description}
<div className="mt-10 sm:mt-0">
<div className="md:grid md:grid-cols-3 md:gap-6">
<div className="md:col-span-1">
@@ -34,35 +59,40 @@ const RegisterWorkInformation = () => {
htmlFor="worktype"
className="block text-sm font-medium text-gray-700"
>
- Werksart
+ Werksart<span className="text-red-600">*</span>
</label>
<select
id="worktype"
name="worktype"
+ onChange={(event)=> setType(event.target.value)}
autoComplete="worktype"
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"
>
- <option>Dokument</option>
- <option>Audio</option>
- <option>Bild</option>
- <option>Video</option>
- <option>Software</option>
- <option>Interaktiv</option>
+ <option value="document">Dokument</option>
+ <option value="audio">Audio</option>
+ <option value="img">Bild</option>
+ <option value="video">Video</option>
+ <option value="software">Software</option>
+ <option value="interactive">Interaktiv</option>
</select>
</div>
{/* Title */}
<div>
- <label
- htmlFor="title"
- className="block text-sm font-medium text-gray-700"
- >
- Titel
- </label>
+ <div className="inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto" >
+ <label
+ htmlFor="title"
+ className="block text-sm font-medium text-gray-700"
+ >
+ Titel<span className="text-red-600">*</span>
+ </label>
+ <HelpIcon Message="Der Titel ist dafür da das das Werk verfügbar ist"></HelpIcon>
+ </div>
<input
+ id="title"
type="text"
name="title"
- id="title"
+ onChange={(event)=> setTitle(event.target.value)}
className="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
/>
</div>
@@ -80,6 +110,7 @@ const RegisterWorkInformation = () => {
id="description"
name="description"
rows={3}
+ onChange={(event)=> setDescription(event.target.value)}
className="shadow-sm focus:ring-green-500 focus:border-green-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md"
placeholder="Beschreibung einfügen"
defaultValue={""}
@@ -99,9 +130,10 @@ const RegisterWorkInformation = () => {
Tags
</label>
<input
+ id="tags"
type="text"
name="tags"
- id="tags"
+ onChange={(event)=> setTags(event.target.value)}
className="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
/>
</div>
@@ -138,9 +170,10 @@ const RegisterWorkInformation = () => {
Erstellungsdatum
</label>
<input
+ id="creationdate"
type="date"
name="creationdate"
- id="creationdate"
+ onChange={(event)=> SetCreation_date(event.target.value)}
className="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
/>
</div>
@@ -161,9 +194,10 @@ const RegisterWorkInformation = () => {
Ersteller
</label>
<input
+ id="creator"
type="text"
name="creator"
- id="creator"
+ onChange={(event)=> setCreator(event.target.value)}
className="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
/>
</div>
@@ -177,9 +211,10 @@ const RegisterWorkInformation = () => {
Ersteller URL
</label>
<input
+ id="creatorurl"
type="text"
name="creatorurl"
- id="creatorurl"
+ onChange={(event)=> setCreatorURL(event.target.value)}
className="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
/>
</div>
@@ -193,26 +228,28 @@ const RegisterWorkInformation = () => {
Herausgeber
</label>
<input
+ id="publisher"
type="text"
name="publisher"
- id="publisher"
+ onChange={(event)=> setPublisher(event.target.value)}
className="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
/>
</div>
- {/* Contributors */}
+ {/* Attribution" ( */}
<div>
<label
- htmlFor="contributors"
+ htmlFor="attribution"
className="block text-sm font-medium text-gray-700"
>
Mitwirkende
</label>
<div className="mt-1">
<textarea
- id="contributors"
- name="contributors"
+ id="attribution"
+ name="attribution"
rows={3}
+ onChange={(event)=> setAttribution(event.target.value)}
className="shadow-sm focus:ring-green-500 focus:border-green-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md"
placeholder="Mitwirkende einfügen"
defaultValue={""}
@@ -240,6 +277,7 @@ const RegisterWorkInformation = () => {
type="text"
name="workurl"
id="workurl"
+ onChange={(event)=> setWorksURL(event.target.value)}
className="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
/>
<p className="mt-2 text-sm text-gray-500">
@@ -256,9 +294,10 @@ const RegisterWorkInformation = () => {
Identifikator
</label>
<input
+ id="identifier"
type="text"
name="identifier"
- id="identifier"
+ onChange={(event)=> setIdentifier(event.target.value)}
className="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
/>
</div>
@@ -275,6 +314,7 @@ const RegisterWorkInformation = () => {
<textarea
id="source"
name="source"
+ onChange={(event)=> setSource(event.target.value)}
rows={3}
className="shadow-sm focus:ring-green-500 focus:border-green-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md"
placeholder="Quelle einfügen"
@@ -292,25 +332,10 @@ const RegisterWorkInformation = () => {
Beziehung
</label>
<input
+ d="relation"
type="text"
name="relation"
- id="relation"
- className="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
- />
- </div>
-
- {/* Coverage */}
- <div>
- <label
- htmlFor="coverage"
- className="block text-sm font-medium text-gray-700"
- >
- Abdeckung
- </label>
- <input
- type="text"
- name="coverage"
- id="coverage"
+ onChange={(event)=> setRelation(event.target.value)}
className="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
/>
</div>
@@ -334,6 +359,7 @@ const RegisterWorkInformation = () => {
<textarea
id="licenseterms"
name="licenseterms"
+ onChange={(event)=> setLicenceTerms(event.target.value)}
rows={3}
className="shadow-sm focus:ring-green-500 focus:border-green-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md"
placeholder="Lizenzbedingungen"
diff --git a/Frontend/src/components/registerwork/registerworkLicence.jsx b/Frontend/src/components/registerwork/registerworkLicence.jsx
index f238c1abc9693a704c467f7bed4ccce67a1faf91..f90aca220b086996783bb9ae8326b3f9eb69e681 100644
--- a/Frontend/src/components/registerwork/registerworkLicence.jsx
+++ b/Frontend/src/components/registerwork/registerworkLicence.jsx
@@ -1,8 +1,18 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+
+//TODO: https://api.dalicc.net/docs#/
+
+
const RegisterWorkLicence = () => {
const [licence, setLicence] = useState("No licence selected"); //'TODO inside brackets
const [licenceLink, setLicenceLink] = useState("No licence selected"); //value
+/*
+ useEffect(() => {
+ //load licence
+ console.print("test")
+ },[]);
+*/
const SelectLicence = (event) => {
setLicence(event.target.textarea);
diff --git a/Frontend/src/components/registerwork/registerworkSave.jsx b/Frontend/src/components/registerwork/registerworkSave.jsx
index 10c9b23c2a2ad3fae916b7751bacc83e60240c59..d84188cd29ba29482a41f7d41fa2dea15c59fb29 100644
--- a/Frontend/src/components/registerwork/registerworkSave.jsx
+++ b/Frontend/src/components/registerwork/registerworkSave.jsx
@@ -11,7 +11,7 @@ const RegisterWorkSave = () => {
Speicheroptionen
</h3>
<p className="mt-1 text-sm text-gray-600">
- Hier kannst du bestimmen, wie dein Werk abgespeichert wird
+ Hier kannst du bestimmen, wie dein Metadaten abgespeichert wird
</p>
</div>
</div>
@@ -51,6 +51,7 @@ const RegisterWorkSave = () => {
className="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300"
/>
{
+ //Metadaten und IPFS
//TODO: (Source: letztes Meeting Sicherheiterhöhen?? Dachte IPFS ist für jeden Downloadbar und deshalb unsecure )
}
<label