frontend/src/components/General/Input.svelte

@@ -10,6 +10,8 @@
     export let alt = undefined;
     export let width = undefined;
     export let height = undefined;
+    export let value = '';
+    export let placeholder = '';
 
     // Import the main colors from the store
     let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor, whiteColor
@@ -37,10 +39,10 @@
     <p style="color: {firstColor};">{label}</p>
     <!-- Handle the textarea input -->
     {#if type === 'large'}
-        <textarea style="background-color: {firstColor}; color: {whiteColor};"/>
+        <textarea style="background-color: {firstColor}; color: {whiteColor};" placeholder={placeholder}/>
     <!-- Handle the simple inputs -->
     {:else}
-        <input style="background-color: {firstColor}; color: {whiteColor};" type={type} min={min} max={max} src={src} alt={alt}/>
+        <input style="background-color: {firstColor}; color: {whiteColor};" type={type} min={min} max={max} src={src} alt={alt} value={value} placeholder={placeholder}/>
     {/if}
 </div>
 

frontend/src/components/Settings/ProjectPropertiesContent.svelte

@@ -29,17 +29,18 @@
 
 <div class='flexSettings'>
     <div>
-        <Input label={$_("projectShowNameLabel")} type='text'/>
-        <Input label={$_("projectShowDateLabel")} type='date'/>
-        <Input label={$_("projectSaveLabel")} type='file'/>
-        <Input label={$_("projectUniversesLabel")} type='number' min='1' max='10'/>
+        <Input label={$_("projectShowNameLabel")} type='text' value='My show'/>
+        <Input label={$_("projectShowDateLabel")} type='date' value='2024-07-08'/>
+        <Input label={$_("projectUniversesLabel")} type='number' min='1' max='10' value='1'/>
+        <Input label={$_("projectSaveLabel")} type='text' value='my-show-08-07-2024'/>
+        <RoundedButton text={$_("projectRenameButton")} tooltip={$_("projectRenameTooltip")} active/>
     </div>
     <div>
         <Input label={$_("projectAvatarLabel")} type='image' src='appicon.png' alt={$_("projectAvatarLabel")} width='11em'/>
-        <RoundedButton style='display:block;' text={$_("projectLoadAvatarButton")} icon='bxs-image' active/>
+        <RoundedButton style='display:block;' tooltip={$_("projectAvatarTooltip")} text={$_("projectLoadAvatarButton")} icon='bxs-image' active/>
     </div>
     <div>
-        <Input label={$_("projectCommentsLabel")} type='large' width='100%'/>
+        <Input label={$_("projectCommentsLabel")} type='large' width='100%' placeholder={$_("projectCommentsPlaceholder")}/>
     </div>
 </div>
 

frontend/src/lang/en.json

@@ -19,9 +19,13 @@
   
   "projectShowNameLabel": "Show name",
   "projectShowDateLabel": "Show date",
-  "projectSaveLabel": "Save status",
+  "projectSaveLabel": "Save name",
+  "projectRenameButton": "Rename",
+  "projectRenameTooltip": "Rename the project file",
   "projectUniversesLabel": "Number of DMX universes",
   "projectAvatarLabel": "Show avatar",
+  "projectAvatarTooltip": "Load a new show avatar",
   "projectCommentsLabel": "Comments",
+  "projectCommentsPlaceholder": "Leave your comments here",
   "projectLoadAvatarButton": "Load a new avatar"
 }