diff --git a/Frontend/src/components/registerwork.jsx b/Frontend/src/components/registerwork.jsx index c88f07bc0ba0f5d1c583c9512101446abd289549..7f0c9f5eb98f318b3d869bfe68b277f10fd60db3 100644 --- a/Frontend/src/components/registerwork.jsx +++ b/Frontend/src/components/registerwork.jsx @@ -31,7 +31,6 @@ const RegisterWork = () => { //licence const [licence, setLicence] = useState("No licence selected"); //'TODO load Licence List - inside brackets //Speicheroptionen - const [visibility, setVisibility] = useState(false); const [filename, setFilename] = useState(""); const [saveFileInFileSystem, setSaveFileInFileSystem] = useState(false); @@ -130,7 +129,11 @@ const RegisterWork = () => { }; return ( - <> + <> + <RegisterWorkFileUpload + onSetFile={onSetFile} file={file} + onSetFilename={onSetFilename} filename={filename}> + </RegisterWorkFileUpload> <RegisterWorkInformation onSetType={onSetType} type={type} onSetTitle={onSetTitle} title={title} @@ -153,22 +156,6 @@ const RegisterWork = () => { onSetLicence={onSetLicence} licence={licence}> </RegisterWorkLicence> - <RegisterWorkSave - onSetVisibility={onSetVisibility} visibility={visibility}> - </RegisterWorkSave> - - {/* - RegisterWorkFileUpload nur anzeigen wenn auch ein File hochgeladen werden muss: - -> Fairregister Filesystem - -> IPFS - - (- was passiert mit dem Namen dann? weil der wird ja auch in die Metadaten abgespeichert?) - */} - <RegisterWorkFileUpload - onSetFile={onSetFile} file={file} - onSetFilename={onSetFilename} filename={filename}> - </RegisterWorkFileUpload> - <RegisterWorkConfirmation onSendRegister={onSendRegister}></RegisterWorkConfirmation> </> ); diff --git a/Frontend/src/components/registerwork/HelpIcon.jsx b/Frontend/src/components/registerwork/HelpIcon.jsx index ca6433ffa5f72c1438647b29dbf6cf5046c69e97..56fcec695f3bc89d1eaa1ceadb05761feb901a0a 100644 --- a/Frontend/src/components/registerwork/HelpIcon.jsx +++ b/Frontend/src/components/registerwork/HelpIcon.jsx @@ -27,7 +27,7 @@ const HelpIcon = (props) => { </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> + <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">{props.Title} ?</h3> <div class="mt-2"> <p class="text-sm text-gray-500">{props.Message}</p> </div> diff --git a/Frontend/src/components/registerwork/registerworkFileUpload.jsx b/Frontend/src/components/registerwork/registerworkFileUpload.jsx index 700c1c0e53e53fc46b3df396b0d630a5b81e4784..8aa7fad4514554a1cfd77b29dfc068b4be85cdef 100644 --- a/Frontend/src/components/registerwork/registerworkFileUpload.jsx +++ b/Frontend/src/components/registerwork/registerworkFileUpload.jsx @@ -24,9 +24,9 @@ const RegisterWorkFileUpload = (props) => { reader.readAsArrayBuffer(file) //File upload - setFilename(file.name) - setFilesize(formatBytesSizeUnits(file.size)) - setFileUploaded(true) + setFilename(file.name); + setFilesize(formatBytesSizeUnits(file.size)); + setFileUploaded(true); }) }, []) diff --git a/Frontend/src/components/registerwork/registerworkInformation.jsx b/Frontend/src/components/registerwork/registerworkInformation.jsx index d8f9ababbb4e95a008eca450743b197e438ea153..55a5164d0b6ae6590f890fcfb013c4d8c1d16286 100644 --- a/Frontend/src/components/registerwork/registerworkInformation.jsx +++ b/Frontend/src/components/registerwork/registerworkInformation.jsx @@ -31,12 +31,15 @@ const RegisterWorkInformation = (props) => { </h4> {/* Worktype */} <div> + <div className="inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto" > <label htmlFor="worktype" className="block text-sm font-medium text-gray-700" > Werksart<span className="text-red-600">*</span> </label> + <HelpIcon Title="Werksart" Message="Die Art des Werkes welches lizenziert werden soll"></HelpIcon> + </div> <select id="worktype" name="worktype" @@ -62,7 +65,7 @@ const RegisterWorkInformation = (props) => { > Titel<span className="text-red-600">*</span> </label> - <HelpIcon Message="Der Titel ist dafür da das das Werk verfügbar ist"></HelpIcon> + <HelpIcon Title="Title" Message="Der Titel, welcher im System angezeigt wird"></HelpIcon> </div> <input id="title" @@ -75,12 +78,15 @@ const RegisterWorkInformation = (props) => { {/* Description */} <div> + <div className="inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto" > <label htmlFor="description" className="block text-sm font-medium text-gray-700" > - Beschreibung + Beschreibung<span className="text-red-600">*</span> </label> + <HelpIcon Title="Beschreibung" Message="Die Beschreibung welche im System angezeigt wird"></HelpIcon> + </div> <div className="mt-1"> <textarea id="description" @@ -99,12 +105,15 @@ const RegisterWorkInformation = (props) => { {/* Tags (Keywords) */} <div> + <div className="inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto" > <label htmlFor="tags" className="block text-sm font-medium text-gray-700" > Tags </label> + <HelpIcon Title="Tags" Message="Tags helfen dabei dein Werk im System zuzuordnen, damit es später besser gefunden werden kann"></HelpIcon> + </div> <input id="tags" type="text" @@ -116,15 +125,14 @@ const RegisterWorkInformation = (props) => { {/* Language */} <div> - <div className="inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto" > - + <div className="inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto" > <label htmlfor="select-language" className="block text-sm font-medium text-gray-700" > Sprache </label> - <HelpIcon Message=" + <HelpIcon Title="Sprache" Message=" Die Sprache welche das Werk verfügbar ist/In der das Werk beschrieben wird? Was ist wenn es sich um ein Werk handelt ohne Sprache - bsp Bild? - einfach option <andere> auswählen @@ -148,12 +156,15 @@ const RegisterWorkInformation = (props) => { {/* Creation Date */} <div> + <div className="inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto" > <label htmlFor="date" className="block text-sm font-medium text-gray-700" > Erstellungsdatum </label> + <HelpIcon Title="Erstellungsdatum" Message="Wann wurde das Werk fertiggestellt "></HelpIcon> + </div> <input id="creationdate" type="date" @@ -171,17 +182,20 @@ const RegisterWorkInformation = (props) => { </h4> {/* TODO: - Creator Ersteller ? + Creator Ersteller ? wird durch UID übernommen also brauchts das Feld garnicht? Publisher Herausgeber ? */} {/* Creator */} <div> + <div className="inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto" > <label htmlFor="creator" className="block text-sm font-medium text-gray-700" > - Ersteller + Ersteller: Wer ist der Urheber des Werkes<span className="text-red-600">*</span> </label> + <HelpIcon Title="Ersteller" Message="Registrar Ersteller Feld ? wird durch UID übernommen also brauchts das Feld garnicht? Person, die das Werk erstellt hat? oder Person, die das Werk registriert?"></HelpIcon> + </div> <input id="creator" type="text" @@ -193,12 +207,15 @@ const RegisterWorkInformation = (props) => { {/* Publisher */} <div> + <div className="inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto" > <label htmlFor="publisher" className="block text-sm font-medium text-gray-700" > - Herausgeber + Herausgeber: Ergänzente Rechte </label> + <HelpIcon Title="Herausgeber" Message="Person, die das Werk erstellt hat? "></HelpIcon> + </div> <input id="publisher" type="text" @@ -210,12 +227,15 @@ const RegisterWorkInformation = (props) => { {/* Attribution" ( */} <div> + <div className="inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto" > <label htmlFor="attribution" className="block text-sm font-medium text-gray-700" > Mitwirkende </label> + <HelpIcon Title="Mitwirkende" Message="Personen, die zusätzlich am Werk mitgewirkt haben"></HelpIcon> + </div> <div className="mt-1"> <textarea id="attribution" @@ -239,12 +259,15 @@ const RegisterWorkInformation = (props) => { {/* Identifier (ISBN, ISRC, ...) */} <div> + <div className="inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto" > <label htmlFor="identifier" className="block text-sm font-medium text-gray-700" > Identifikator </label> + <HelpIcon Title="Identifikator" Message="Kennzeichen mit das Werk identifiziert werden kann, beispielsweise ISBN (International Standard Book Number) "></HelpIcon> + </div> <input id="identifier" type="text" @@ -253,63 +276,10 @@ const RegisterWorkInformation = (props) => { 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> - - {/* Relation */} - <div> - <label - htmlFor="relation" - className="block text-sm font-medium text-gray-700" - > - Beziehung - </label> - <input - d="relation" - type="text" - name="relation" - onChange={(event)=> props.onSetRelation(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> </div> </div> - <div className="shadow overflow-hidden sm:rounded-md"> - <div className="px-4 py-5 bg-white space-y-6 sm:p-6"> - <h4 className="text-lg font-medium leading-6 text-gray-900"> - Weitere Lizenz-Informationen - </h4> - {/* License Terms */} - <div> - <label - htmlFor="licenseterms" - className="block text-sm font-medium text-gray-700" - > - Lizenzbedingungen - </label> - <div className="mt-1"> - <textarea - id="licenseterms" - name="licenseterms" - onChange={(event)=> props.onSetLicenceTerms(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" - defaultValue={""} - /> - <p className="mt-2 text-sm text-gray-500"> - Hier können Sie angeben, wo Ihr Werk verwendet - werden soll oder nicht (z. B. von - Organisationen, die die Produktion von Waffen - unterstützen). Oder unter welchen Bedingungen - Sie eine kommerzielle Nutzung erlauben würden. - Dies ist jedoch nicht Teil des rechtlichen - Lizenztextes. Dennoch wird jeder, der Ihre - Lizenz nachschlägt, sie sehen. - </p> - </div> - </div> - </div> - </div> + </div> </div> </div> diff --git a/Frontend/src/components/registerwork/registerworkLicence.jsx b/Frontend/src/components/registerwork/registerworkLicence.jsx index 9ba3666c90938493405c24761638db77ed4a0cd7..78bb8ad6c52a87fa19bf762f84654a65f74d54de 100644 --- a/Frontend/src/components/registerwork/registerworkLicence.jsx +++ b/Frontend/src/components/registerwork/registerworkLicence.jsx @@ -1,6 +1,7 @@ import React, { useState, useEffect } from "react"; import { getLicense, getLicenses, FullLicense, Licenses, License } from "spdx-license"; import { getAssets, getDaliccLicences } from "../../api"; +import HelpIcon from "./HelpIcon"; //TODO: https://api.dalicc.net/docs#/ -> API lässt sich nicht abfragen?? //TODO: SPDX license https://www.npmjs.com/package/spdx-license @@ -27,8 +28,6 @@ const RegisterWorkLicence = (props) => { },[]) - - const SelectLicence = (event) => { props.onSetLicence(event.target.textarea); setLicenceLink(event.target); @@ -92,126 +91,7 @@ const RegisterWorkLicence = (props) => { </p> </div> </fieldset> - <div className="mt-4 space-y-4"> - <div className="flex items-center"> - <input - id="Reproduce" - name="Reproduce" - type="checkbox" - className="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300" - /> - <label - htmlFor="Reproduce" - className="ml-3 block text-sm font-medium text-gray-700" - > - Vervielfältigen: Darf das Werk kopieren werden? - </label> - </div> - </div> - <div className="mt-4 space-y-4"> - <div className="flex items-center"> - <input - id="Distribute" - name="Distribute" - type="checkbox" - className="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300" - /> - <label - htmlFor="Distribute" - className="ml-3 block text-sm font-medium text-gray-700" - > - Verbreiten: Darf das Werk von anderen verbreiten werden? - </label> - </div> - </div> - <div className="mt-4 space-y-4"> - <div className="flex items-center"> - <input - id="Modify" - name="Modify" - type="checkbox" - className="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300" - /> - <label - htmlFor="Modify" - className="ml-3 block text-sm font-medium text-gray-700" - > - Ändern: Darf das Werk von anderen verändern werden? - </label> - </div> - </div> - <div className="mt-4 space-y-4"> - <div className="flex items-center"> - <input - id="Derive" - name="Derive" - type="checkbox" - className="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300" - /> - <label - htmlFor="Derive" - className="ml-3 block text-sm font-medium text-gray-700" - > - Ableiten: Dürfen derivate des Werks unter den gleichen Bedingungen erstellt werden? - </label> - </div> - </div> - <div className="mt-4 space-y-4"> - <div className="flex items-center"> - <input - id="CommercialUse" - name="CommercialUse" - type="checkbox" - className="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300" - /> - <label - htmlFor="CommercialUse" - className="ml-3 block text-sm font-medium text-gray-700" - > - Kommerzielle Nutzung: Darf das Werk kommerzielle genutzt werden? - </label> - </div> - </div> - <div className="mt-4 space-y-4"> - <div className="flex items-center"> - <input - id="ChargeDistributionFee" - name="ChargeDistributionFee" - type="checkbox" - className="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300" - /> - <label - htmlFor="ChargeDistributionFee" - className="ml-3 block text-sm font-medium text-gray-700" - > - Verbreitungsgebühr erheben: Dürfen Dritte eine Vertriebsgebühr für ihr Werk erheben? - </label> - </div> - </div> - <div className="mt-4 space-y-4"> - <div className="flex items-center"> - <input - id="ChangeLicense" - name="ChangeLicense" - type="checkbox" - className="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300" - /> - <label - htmlFor="ChangeLicense" - className="ml-3 block text-sm font-medium text-gray-700" - > - Lizenz ändern: Sollen andere die Lizenz ändern können? - </label> - </div> - </div> - - <fieldset> - <div> - <p className="text-sm text-gray-500"> - oder - </p> - </div> - </fieldset> + <fieldset> <div> <p className="text-sm text-gray-500"> @@ -304,27 +184,46 @@ const RegisterWorkLicence = (props) => { </div> </fieldset> <fieldset> - <div className="col-span-6"> - <legend className="text-base font-medium text-gray-900"> - Custom Lizenzen - </legend> - <label - htmlFor="customlicense" - className="block text-sm font-medium text-gray-700" - > - Lizenztext hier einfügen - </label> - <div className="mt-1"> - <textarea - id="customlicense" - name="customlicense" - 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="Beschreibung einfügen" - defaultValue={""} - /> - </div> - </div> + <div className="shadow overflow-hidden sm:rounded-md"> + <div className="px-4 py-5 bg-white space-y-6 sm:p-6"> + <h4 className="text-lg font-medium leading-6 text-gray-900"> + Weitere Lizenz-Informationen + </h4> + {/* License Terms */} + <div> + <div className="inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto" > + <label + htmlFor="licenseterms" + className="block text-sm font-medium text-gray-700" + > + Lizenzbedingungen + </label> + <HelpIcon Title="Lizenzbedingungen" Message="Lizenzbedingungen eher ins Lizenz hinzufügen Feld - falls überhaupt gebraucht ? "></HelpIcon> + </div> + <div className="mt-1"> + <textarea + id="licenseterms" + name="licenseterms" + onChange={(event)=> props.onSetLicenceTerms(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" + defaultValue={""} + /> + <p className="mt-2 text-sm text-gray-500"> + Hier können Sie angeben, wo Ihr Werk verwendet + werden soll oder nicht (z. B. von + Organisationen, die die Produktion von Waffen + unterstützen). Oder unter welchen Bedingungen + Sie eine kommerzielle Nutzung erlauben würden. + Dies ist jedoch nicht Teil des rechtlichen + Lizenztextes. Dennoch wird jeder, der Ihre + Lizenz nachschlägt, sie sehen. + </p> + </div> + </div> + </div> + </div> </fieldset> </div> <div className="px-4 py-3 bg-gray-50 text-right sm:px-6"> diff --git a/Frontend/src/components/registerwork/registerworkSave.jsx b/Frontend/src/components/registerwork/registerworkSave.jsx index de0b90a8204e5b5bd779f936133fc0f5cb43cc88..d9ea52074eaf9457709427376c6dd1406b0ef515 100644 --- a/Frontend/src/components/registerwork/registerworkSave.jsx +++ b/Frontend/src/components/registerwork/registerworkSave.jsx @@ -1,6 +1,11 @@ import React, { useState } from "react"; const RegisterWorkSave = (props) => { + const [selfSave, setSelfSave] = useState(true); + const [saveFilesystem, setSaveFilesystem] = useState(false); + const [saveIPFS, setSaveIPFS] = useState(false); + + return ( <div className=" max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 sm:my-6 lg:my-10"> <div className="mt-10 sm:mt-0"> @@ -83,11 +88,36 @@ const RegisterWorkSave = (props) => { <p className="text-sm text-gray-500"></p> </div> <div className="mt-4 space-y-4"> + <div className="flex items-center"> + <input + id="filesystem-save" + name="filesystem-save" + type="checkbox" + checked={selfSave} + className="focus:ring-green-500 h-4 w-4 text-red-600 border-gray-300" + /> + <label + htmlFor="filesystem-save" + className="ml-3 block text-sm font-medium text-gray-700" + > + Ich möchte für die Speicherung selbst verantwortlich sein + </label> + </div> <div className="flex items-center"> <input id="filesystem-save" name="filesystem-save" type="checkbox" + onClick={(event)=> { + const checked = event.target.checked; + setSaveFilesystem(checked); + if (checked){ + setSelfSave(false); + } else if (!saveIPFS) { + setSelfSave(true); + } + }} + checked={saveFilesystem} className="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300" /> <label @@ -102,6 +132,16 @@ const RegisterWorkSave = (props) => { id="public-save" name="public-save" type="checkbox" + onClick={(event)=> { + const checked = event.target.checked; + setSaveIPFS(checked); + if (checked){ + setSelfSave(false); + } else if (!saveFilesystem){ + setSelfSave(true); + } + }} + checked={saveIPFS} className="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300" /> <label