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