Probleme mit Übersetzungen beim Sprachwechsel in einer Webanwendung

kay86 · 16. Dez 2024

Oneixee5 hat gesagt.:
Ich verstehe die Frage ni

Ich verwende Flaggen für die Sprache Auswahl in meinem Projekt um die Label ,Button Beschriftung und den Inhalt meines tooltips entsprechend ändern zu können.

Marinek · 16. Dez 2024

Wie sieht den der Quellcode dafür aus?

Was hast du geändert, seit dem die Flaggen nicht mehr da sind?

Garantiert ist es so, dass hier einfach der HTML Code falsch ist. Hast du das überprüft?

Oneixee5 · 17. Dez 2024

In dem Playground ist das doch egal, probier es einfach ohne Flaggen. Wenn du ein richtiges Projekt bei dir machen willst, dann verwendest du die Flaggen wie bisher, z.B. über einen Link auf einen Ordner images - oder so ...

Creating a Project | Vue CLI

🛠️ Standard Tooling for Vue.js Development

cli.vuejs.org

Code:

npm install -g @vue/cli
vue create my-project

kay86 · 21. Dez 2024

Oneixee5: Wie kann ich im Framework die Übersetzungsfunktion für mein Label der Eingabefelder und die Schrift der Buttons im HTML-Bereich mit einbeziehen in die Übersetzungsfunktion?

Java:

    <label for="sku" id="sku-label" data-id="sku-label">SKU:</label>
    <label for="description" id="description-label" data-id="description-label">Beschreibung:</label>
        <label for="color" id="color-label" data-id="color-label">Farbe:</label>
        <label for="size" id="size-label" data-id="size-label">Größe:</label>
    
    <div class="button-grid">
      <button type="submit" id="btnSubmit" data-id="btnSubmit">Submit</button>
      <button type="reset" id="btnReset" data-id="btnReset">Reset</button>
      <button class="print-button" id="btnPrint" data-id="btnPrint" onclick="printPage()">Print</button>
    </div>
  </form>


<div class="schalter-container">
  <div class="schalter-wrapper" data-switch="autoreset" data-label="Auto-Reset"></div>
  <div class="schalter-wrapper" data-switch="faultySwitch" data-label="Faulty-Label" data-onchange="toggleFaultLabel()"></div>
  <div class="schalter-wrapper" data-switch="autoDisplaySwitch" data-label="Auto-Eingabe" data-onchange="toggleAutoDisplay()"></div>
</div>


     // Dynamisches Rendern der Schalter
  document.querySelectorAll(".schalter-wrapper").forEach((wrapper) => {
    const switchId = wrapper.dataset.switch;
    const labelText = wrapper.dataset.label;
    const onchangeFunction = wrapper.dataset.onchange || "";
 
    wrapper.innerHTML = `
      <label for="${switchId}">${labelText}</label>
      <div class="onoffswitch">
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="${switchId}" ${
      onchangeFunction ? `onchange="${onchangeFunction}"` : ""
    }>
        <label class="onoffswitch-label" for="${switchId}">
          <span class="onoffswitch-inner"></span>
          <span class="onoffswitch-switch"></span>
        </label>
      </div>
    `});

Oneixee5 · 21. Dez 2024

Was meinst du mit Framework? Vue.js? -> Man verwendet hier Components, mit einer Property. Diese kann man mit einem Watcher oder einem Computed auswerten.
Der Bereich "// Dynamisches Rendern der Schalter" ist für Vue ungeeignet. Ich kann mir nicht so richtig erklären was du dort erreichen willst. Du solltest dir den Abschnitt https://vuejs.org/api/built-in-directives.html durchlesen. Ansonsten kannst du dein Problem im Playground vorbereiten, dann kann dir effektiver geholfen werden.

Ansonsten hier noch mal ein anderer Ansatz über CSS: https://jsfiddle.net/8ya6udwx/7/
Der Listener am Button ändert nur das HTML-Tag: <html lang="en"> zu <html lang="de"> und zurück. Die Übersetzung steht dann im CSS.

kay86 · 21. Dez 2024

Dank ich werde es mir morgen anschauen.habe heute damit zugebracht meine Flaggen als sprach Auswahl zu verwenden ,an Stelle von Buttons.Vue.js ist es es nicht eine Framework Bibliothek,wen ich mich falsch ausgedrückt habe dan entschuldige ich mich.es ist so mein Formular besteht ja nicht nur aus dem Tooltip mit der Textanleitung sondern das Formulare hat ja auch Eingabefelder und Buttons Mit Beschriftung/Bezeichnung.es wehre ja völlig sinnlos ein Tooltip Inhalt der gewählten Sprache zu übersetzen aber den Rest nicht.Das ist ja wie als wehre alles auf chinesisch und der Anwender weiß nicht was was ist .Wen ich schon den Aufwand betreibe dann kann. Ich ja auch das zuvor genannte mit einbeziehen in der Übersetzungs Funktion.ich hoffe ich konnt mich verständlicher ausdrucken zum Verständnis?

Oneixee5 · 21. Dez 2024

Wie die Übersetzung funktioniert war ja schon klar.

Du musst beachten, dass du nicht einfach dein HTML etwas umschreibst. Hier wird aus <div class="schalter-wrapper" ... eine Component, welche du ja auch mehrfach verwenden kannst. Genauso machst du das mit dem Formular - das wird eine Component, welche du dann in dein App.vue einbindest. Dabei ist App.vue ja auch nur eine Component.

Weiterhin sind 'props' reaktiv. Also wenn diese geändert werden, bspw. 'label', dann ändert dieses sich automatisch auch in der Component.

Hier noch mal anders:

Playground

App.vue

Javascript:

<script setup>
import { ref } from 'vue'
import SchalterWrapper from './SchalterWrapper.vue';

const msg = ref('Hello World!')

const toggleFaultLabel = (value) => {
  msg.value = `toggleFaultLabel: ${JSON.stringify(value)}`;
  translations.value.label.button2 = `Auto-Reset ${value}`;
}

const toggleAutoDisplay = (value) => {
  msg.value = `toggleAutoDisplay: ${value}`;
}

const translations = ref({
  label : {
    button1: "Auto-Reset",
    button2: "Faulty-Label",
    button3: "Auto-Eingabe",
  }
});
</script>

<template>
  <h1>{{ msg }}</h1>
  <div class="schalter-container">
    <schalter-wrapper switch="autoreset" :label="`${translations.label.button1}`"/>
    <schalter-wrapper switch="faultySwitch" :label="`${translations.label.button2}`" @change="toggleFaultLabel"/>
    <schalter-wrapper switch="autoDisplaySwitch" :label="`${translations.label.button3}`" @change="toggleAutoDisplay"/>
  </div>
</template>

SchalterWrapper.vue

Javascript:

<script setup>
  import { ref } from 'vue';
  const props = defineProps(['switchId', 'label']);
  const emit = defineEmits(['change']);
  const inputRef = ref();
</script>

<template>
  <div>
    <label :for="`${switchId}`">{{label}}</label>
      <div class="onoffswitch">
        <input
          ref="inputRef"
          type="checkbox"
          name="onoffswitch"
          class="onoffswitch-checkbox"
          :id="`${switchId}`"
          @click="() => emit('change', inputRef.checked)"
        />
        <label class="onoffswitch-label" :for="`${switchId}`">
          <span class="onoffswitch-inner"></span>
          <span class="onoffswitch-switch"></span>
        </label>
      </div>
  </div>
</template>

kay86 · 21. Dez 2024

danke für den hiweis

kay86 · 22. Dez 2024

So, den Tooltip mit dem Textinhalt habe ich so weit.

Java:

<script setup>
import { ref, computed } from 'vue';
import ButtonsComp from './ButtonsComp.vue'; // Importiere die Buttons-Komponente

// Aktuell ausgewählte Sprache
const selectedLang = ref("DE");

// Übersetzungen für verschiedene Sprachen
const translations = {
  DE: {
     description: "Beschreibung",
    color: "Farbe",
    size: "Größe",
    submit: "Absenden",
    reset: "Zurücksetzen",
    print: "Drucken",


    faultySwitch: "Faulty Label",
    autoDisplay: "Auto Display",

    guideTitle: "Benutzeranleitung für das Formular",
    guideIntro:  "Dieses Formular dient zur Eingabe und Verwaltung von Produktdaten wie SKU, Beschreibung, Farbe und Größe. Folgen Sie den Anweisungen, um Daten korrekt zu erfassen.",
    formFieldsTitle: "Formularfelder",
    languageSelection:  "Sprache: Wählen Sie Deutsch (DE), Englisch (EN) oder Polnisch (PL). Die Sprache beeinflusst alle Beschriftungen.",
    fieldSku: "<strong>SKU:</strong> Geben Sie die Produktnummer ein.",
    fieldDescription:  "<strong>Beschreibung:</strong> Erfassen Sie eine kurze Produktbeschreibung.",
    fieldColorSize:  "<strong>Farbe & Größe:</strong> Tragen Sie Farbe und Größe des Produkts in die entsprechenden Felder ein.",
    buttonsShortcutsTitle: "Schaltflächen und Tastenkombinationen",
    shortcutSubmit:  "<b>Submit-Button: </b>speichert die eingegebenen Daten, wenn alle Pflichtfelder ausgefüllt sind. Tastenkombination<em>: <strong>Enter</strong></em><strong>.</strong>",
    submitButtonShortcut: "Enter",
    shortcutReset:  "<strong>Reset-Button:</strong> Löscht alle Eingaben und setzt das Formular zurück. Tastenkombination<i>: <strong>Alt</strong></i><strong>+ R.</strong>",
    shortcutPrint:  "<strong>Print Button:</strong> Öffnet die Druckvorschau des Formulars. Tastenkombination<i>: <strong>Ctrl</strong></i><strong>+ P.</strong>",
    additionalFunctionsTitle: "Zusatzfunktionen",
    autoReset: "<strong>Auto-Reset:</strong>",
    autoResetOn:  "<strong>Ein:</strong> Formular wird nach Absenden automatisch zurückgesetzt.",
    autoResetOff: "<strong>Aus:</strong> Eingaben bleiben erhalten.",
    autoInput: "<strong>Auto Eingabe:</strong>",
    autoInputOn:  "<strong>Ein:</strong> Produktdaten werden automatisch befüllt, wenn verfügbar.",
    autoInputOff: "<strong>Aus:</strong> Manuelle Eingabe erforderlich.",
    faulty: "<strong>Faulty:</strong>",
    faultyActivate:  "Aktivieren Sie diesen Schalter, um ein Produkt als fehlerhaft zu kennzeichnen.",
    keyboardShortcutsTitle: "Tastenkombinationen",
    screenModesTitle: "Bildschirmmodi",
    portraitMode:  "<strong>Hochformat:</strong> Vertikale Anordnung, geeignet für mobile Geräte.",
    landscapeMode:  "<strong>Querformat:</strong> Breitere Ansicht mit Info-Feld neben den Eingabefeldern.",
    layoutNote:  "Hinweis: Das Layout passt sich automatisch an die Bildschirmgröße an."
  },
  EN: {
    description: "Description",
    color: "Color",
    size: "Size",
    submit: "Submit",
    reset: "Reset",
    print: "Print",

    
    faultySwitch: "Faulty Label",
    autoDisplay: "Auto Display",

    guideTitle: "User Guide for the Form",
    guideIntro:  "This form is used for entering and managing product data such as SKU, description, color, and size. Follow the instructions to enter data correctly.",
    formFieldsTitle: "Form Fields",
    languageSelection:  "Language: Choose German (DE), English (EN), or Polish (PL). The language affects all labels.",
    fieldSku: "<strong>SKU:</strong> Enter the product number.",
    fieldDescription: "<strong>Description:</strong> Enter a short product description.",
    fieldColorSize:  "<strong>Color & Size:</strong> Enter the color and size of the product in the appropriate fields.",
    buttonsShortcutsTitle: "Buttons and Keyboard Shortcuts",
    shortcutSubmit:  "<b>Submit Button:</b> Saves the entered data if all required fields are filled out. Keyboard shortcut<em>: <strong>Enter</strong></em><strong>.</strong>",
    submitButtonShortcut: "Enter",
    shortcutReset: "<strong>Reset Button:</strong> Clears all entries and resets the form. Keyboard shortcut<i>: <strong>Alt</strong></i><strong>+ R.</strong>",
    shortcutPrint:  "<strong>Print Button:</strong> Opens the print preview of the form. Keyboard shortcut<i>: <strong>Ctrl</strong></i><strong>+ P.</strong>",
    additionalFunctionsTitle: "Additional Functions",
    autoReset: "<strong>Auto-Reset:</strong>",
    autoResetOn:  "<strong>On:</strong> The form is automatically reset after submission.",
    autoResetOff: "<strong>Off:</strong> Entries are retained.",
    autoInput: "<strong>Auto Input:</strong>",
    autoInputOn:  "<strong>On:</strong> Product data is automatically filled in if available.",
    autoInputOff: "<strong>Off:</strong> Manual entry is required.",
    faulty: "<strong>Faulty:</strong>",
    faultyActivate: "Activate this switch to mark a product as faulty.",
    keyboardShortcutsTitle: "Keyboard Shortcuts",
    screenModesTitle: "Screen Modes",
    portraitMode:  "<strong>Portrait Mode:</strong> Vertical layout, suitable for mobile devices.",
    landscapeMode:  "<strong>Landscape Mode:</strong> Wider view with the info box next to the input fields.",
    layoutNote: "Note: The layout adjusts automatically to the screen size."
  },
  PL: {
    description: "Opis",
    color: "Kolor",
    size: "Rozmiar",
    submit: "Zatwierdź",
    reset: "Resetuj",
    print: "Drukuj",

    
    faultySwitch: "Wadliwe",
    autoDisplay: "Autouzupełnianie",

    guideTitle: "Instrukcja obsługi formularza",
    guideIntro:  "Ten formularz służy do wprowadzania i zarządzania danymi produktów, takimi jak SKU, opis, kolor i rozmiar. Postępuj zgodnie z instrukcjami, aby poprawnie wprowadzić dane.",
    formFieldsTitle: "Pola formularza",
    languageSelection:  "Język: Wybierz niemiecki (DE), angielski (EN) lub polski (PL). Język wpływa na wszystkie etykiety.",
    fieldSku: "<strong>SKU:</strong> Wprowadź numer produktu.",
    fieldDescription: "<strong>Opis:</strong> Wprowadź krótki opis produktu.",
    fieldColorSize:  "<strong>Kolor i Rozmiar:</strong> Wprowadź kolor i rozmiar produktu w odpowiednich polach.",
    buttonsShortcutsTitle: "Przyciski i skróty klawiszowe",
    shortcutSubmit:  "<b>Przycisk Zatwierdź:</b> Zapisuje wprowadzone dane, jeśli wszystkie wymagane pola są wypełnione. Skrót klawiszowy<em>: <strong>Enter</strong></em><strong>.</strong>",
    submitButtonShortcut: "Enter",
    shortcutReset:  "<strong>Przycisk Resetuj:</strong> Czyści wszystkie wpisy i resetuje formularz. Skrót klawiszowy<i>: <strong>Alt</strong></i><strong>+ R.</strong>",
    shortcutPrint: "<strong>Przycisk Drukuj:</strong> Otwiera podgląd wydruku formularza. Skrót klawiszowy<i>: <strong>Ctrl</strong></i><strong>+ P.</strong>",
    additionalFunctionsTitle: "Dodatkowe funkcje",
    autoReset: "<strong>Automatyczny reset:</strong>",
    autoResetOn:  "<strong>Włączony:</strong> Formularz jest automatycznie resetowany po zatwierdzeniu.",
    autoResetOff: "<strong>Wyłączony:</strong> Wpisane dane zostają zachowane.",
    autoInput: "<strong>Automatyczne wypełnianie:</strong>",
    autoInputOn: "<strong>Włączone:</strong> Dane produktu są automatycznie wypełniane, jeśli są dostępne.",
    autoInputOff:  "<strong>Wyłączone:</strong> Wymagane jest ręczne wprowadzenie danych.",
    faulty: "<strong>Uszkodzony:</strong>",
    faultyActivate: "Włącz ten przełącznik, aby oznaczyć produkt jako uszkodzony.",
    keyboardShortcutsTitle: "Skróty klawiszowe",
    screenModesTitle: "Tryby ekranu",
    portraitMode: "<strong>Tryb portretowy:</strong> Układ pionowy, odpowiedni dla urządzeń mobilnych.",
    landscapeMode:  "<strong>Tryb poziomy:</strong> Szerszy widok z polem informacji obok pól wprowadzania.",
    layoutNote: "Uwaga: Układ dostosowuje się automatycznie do rozmiaru ekran."
  },
};

// Computed-Eigenschaft für die aktuelle Sprache
const lang = computed(() => translations[selectedLang.value]);
</script>

<template>
  <div>
    <!-- Sprachauswahl mit Flaggen -->
    <div class="language-selection">
      <button
        class="flag-button"
        @click="selectedLang = 'DE'"
        :class="{ active: selectedLang === 'DE' }"
      >
        <span class="flag-icon flag-icon-de"></span>
      </button>
      <button
        class="flag-button"
        @click="selectedLang = 'EN'"
        :class="{ active: selectedLang === 'EN' }"
      >
        <span class="flag-icon flag-icon-gb"></span>
      </button>
      <button
        class="flag-button"
        @click="selectedLang = 'PL'"
        :class="{ active: selectedLang === 'PL' }"
      >
        <span class="flag-icon flag-icon-pl"></span>
      </button>
    </div>



  <h2>{{ lang.guideTitle }}</h2>
  <p>{{ lang.guideIntro }}</p>

  <h3>{{ lang.formFieldsTitle }}</h3>
  <p>{{ lang.languageSelection }}</p>
  <ul>
    <li v-html="lang.fieldSku"></li>
    <li v-html="lang.fieldDescription"></li>
    <li v-html="lang.fieldColorSize"></li>
  </ul>

  <h3>{{ lang.buttonsShortcutsTitle }}</h3>
  <ul>
    <li v-html="lang.shortcutSubmit"></li>
    <li v-html="lang.shortcutReset"></li>
    <li v-html="lang.shortcutPrint"></li>
  </ul>

  <h3>{{ lang.additionalFunctionsTitle }}</h3>
  <p>{{ lang.autoReset }}</p>
  <ul>
    <li v-html="lang.autoResetOn"></li>
    <li v-html="lang.autoResetOff"></li>
  </ul>

  <p v-html="lang.autoInput"></p>
  <ul>
    <li v-html="lang.autoInputOn"></li>
    <li v-html="lang.autoInputOff"></li>
  </ul>

  <p v-html="lang.faulty"></p>
  <ul>
    <li v-html="lang.faultyActivate"></li>
  </ul>

  <h3>{{ lang.screenModesTitle }}</h3>
  <ul>
    <li v-html="lang.portraitMode"></li>
    <li v-html="lang.landscapeMode"></li>
  </ul>

  <p>{{ lang.layoutNote }}</p>
  </div>
</template>

<style scoped>
/* Importiere die Flaggen-Bibliothek */
@import url('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css');

.language-selection {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.flag-button {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
}

.flag-button .flag-icon {
  font-size: 24px;
}

.flag-button.active {
  font-weight: bold;
  text-decoration: underline;
}
</style>

dann mache ich mich mal ans werk mein HTML bereich mit ihren hinweisen zu ändern :

Code:

<div class="form-container">
  <!-- Sprachwahl mit Buttons -->
  <div class="language-container">
    <button class="language-button" data-lang="DE">
      <span class="flag-icon flag-icon-de"></span> <!-- Deutschland -->
    </button>
    <button class="language-button" data-lang="EN">
      <span class="flag-icon flag-icon-gb"></span> <!-- Großbritannien -->
    </button>
    <button class="language-button" data-lang="PL">
      <span class="flag-icon flag-icon-pl"></span> <!-- Polen -->
    </button>
  </div>

<form id="itemForm" autocomplete="off" onsubmit="submitForm(event)" class="form-grid">
    <!-- SKU Eingabefeld -->
    <label for="sku" id="sku-label" data-id="sku-label">SKU:</label>
    <input type="search" id="sku" name="sku" required>

    <!-- Weitere Felder -->
    <label for="description" id="description-label" data-id="description-label">Beschreibung:</label>
    <input type="search" id="description" name="description" required>

    <!-- Farbe und Größe Eingabefelder -->
    <div class="color-size-container">
      <div>
        <label for="color" id="color-label" data-id="color-label">Farbe:</label>
        <input type="search" id="color" name="color">
      </div>
      <div>
        <label for="size" id="size-label" data-id="size-label">Größe:</label>
        <input type="search" id="size" name="size">
      </div>
    </div>

    <!-- Buttons im Container -->
    <div class="button-grid">
      <button type="submit" id="btnSubmit" data-id="btnSubmit">Submit</button>
      <button type="reset" id="btnReset" data-id="btnReset">Reset</button>
      <button class="print-button" id="btnPrint" data-id="btnPrint" onclick="printPage()">Print</button>
    </div>
  </form>


<div class="schalter-container">
  <div class="schalter-wrapper" data-switch="autoreset" data-label="Auto-Reset"></div>
  <div class="schalter-wrapper" data-switch="faultySwitch" data-label="Faulty-Label" data-onchange="toggleFaultLabel()"></div>
  <div class="schalter-wrapper" data-switch="autoDisplaySwitch" data-label="Auto-Eingabe" data-onchange="toggleAutoDisplay()"></div>
</div>
  // Dynamisches Rendern der Schalter
  document.querySelectorAll(".schalter-wrapper").forEach((wrapper) => {
    const switchId = wrapper.dataset.switch;
    const labelText = wrapper.dataset.label;
    const onchangeFunction = wrapper.dataset.onchange || "";
 
    wrapper.innerHTML = `
      <label for="${switchId}">${labelText}</label>
      <div class="onoffswitch">
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="${switchId}" ${
      onchangeFunction ? `onchange="${onchangeFunction}"` : ""
    }>
        <label class="onoffswitch-label" for="${switchId}">
          <span class="onoffswitch-inner"></span>
          <span class="onoffswitch-switch"></span>
        </label>
      </div>
    `});

Marinek · 22. Dez 2024

Auto Display scheint falsch übersetzt: Das was da auf Polnisch steht, heißt Autovervollständigung. Also entweder das Deutsche ist falsch oder das polnische. Je nachdem was man sagen will.

Oneixee5 · 22. Dez 2024

// Übersetzungen für verschiedene Sprachen
const translations = ...
Würde ich in eine JS-Datei schieben und diese dann mit import importieren. Das hätte den Vorteil, wenn du das in einer anderen Component benötigst, dann dann kannst du das dort auch einfach importieren.

Oneixee5 · 22. Dez 2024

Der Bereich ab '// Dynamisches Rendern der Schalter' funktioniert so nicht. Schau dir mal im Browser über die Entwicklertools (F12) das erzeugte HTML an.

Oneixee5 · 22. Dez 2024

Wie ich oben schon mal geschrieben habe: v-html - nicht benutzen! Das kann ganz schnell in einem Sicherheitsproblem enden. Du solltest Hilfsmittel wie eslint benutzen: https://eslint.vuejs.org/. Dann wirst du auf solche Probleme hingewiesen. Es ist hier auch nicht notwendig v-html zu verwenden.

HTML:

  <ul>
    <li v-html="lang.fieldSku"></li>
    <li v-html="lang.fieldDescription"></li>
    <li v-html="lang.fieldColorSize"></li>
  </ul>

App.vue

Javascript:

<script setup>
import { ref } from 'vue'
import MyLi from './MyLi.vue';

const translations = ref({
  DE: {
    fieldSku: { strongLabel: "SKU", label: "Geben Sie die Produktnummer ein."},
  }
});
</script>

<template>

  <ul>
    <my-li :strong-label="translations.DE.fieldSku.strongLabel" :label="translations.DE.fieldSku.label"/>
  </ul>

</template>

MyLi.vue

Javascript:

<script setup>
defineProps(["strongLabel", "label"]);
</script>

<template>
  <li>
    <strong style="margin-right: 1em;">{{ strongLabel }}:</strong>{{ label }}
  </li>
</template>

Mit Typescript könnte man das noch besser lösen, da man dort Typen vorgeben kann. Es würde daher auch eine 'prop' mit einem bestimmten Typ ausreichen, dieser Typ hätte dann die beiden Felder: strongLabel u. label

kay86 · 23. Dez 2024

Marinek hat gesagt.:
Auto Display scheint falsch übersetzt: Das was da auf Polnisch steht, heißt Autovervollständigung. Also entweder das Deutsche ist falsch oder das polnische. Je nachdem was man sagen will.

Danke für den Hinweis. Ich wünsche Ihnen eine besinnliche Weihnachtszeit!

kay86 · 24. Dez 2024

Oneixee5 hat gesagt.:
Wie ich oben schon mal geschrieben habe: v-html - nicht benutzen! Das kann ganz schnell in einem Sicherheitsproblem enden. Du solltest Hilfsmittel wie eslint benutzen: https://eslint.vuejs.org/. Dann wirst du auf solche Probleme hingewiesen. Es ist hier auch nicht notwendig v-html zu verwenden.

HTML:

<ul> <li v-html="lang.fieldSku"></li> <li v-html="lang.fieldDescription"></li> <li v-html="lang.fieldColorSize"></li> </ul>

App.vue

Javascript:

<script setup> import { ref } from 'vue' import MyLi from './MyLi.vue'; const translations = ref({ DE: { fieldSku: { strongLabel: "SKU", label: "Geben Sie die Produktnummer ein."}, } }); </script> <template> <ul> <my-li :strong-label="translations.DE.fieldSku.strongLabel" :label="translations.DE.fieldSku.label"/> </ul> </template>

MyLi.vue

Javascript:

<script setup> defineProps(["strongLabel", "label"]); </script> <template> <li> <strong style="margin-right: 1em;">{{ strongLabel }}:</strong>{{ label }} </li> </template>

Mit Typescript könnte man das noch besser lösen, da man dort Typen vorgeben kann. Es würde daher auch eine 'prop' mit einem bestimmten Typ ausreichen, dieser Typ hätte dann die beiden Felder: strongLabel u. label

wen V-HTML so ungünstig ist, wie kann ich das Ganze so ändern, dass meine Schrifteigenschaften erhalten bleiben vom Inhalt meines Tooltips t. Ich konnt zwar das Ganze ändern, aber dabei ging meine Texteigenschaften verloren, wie Fettschrift und kursive Schrift

Oneixee5 · 25. Dez 2024

Mit Components, s. #63

Javascript:

<script setup>
  defineProps(["strongLabel", "label"]);
</script>

<template>
  <li>
    <strong style="margin-right: 1em;">{{ strongLabel }}:</strong>{{ label }}
  </li>
</template>

kay86 · 25. Dez 2024

Oneixee5 hat gesagt.:
Mit Components, s. #63

Javascript:

<script setup> defineProps(["strongLabel", "label"]); </script> <template> <li> <strong style="margin-right: 1em;">{{ strongLabel }}:</strong>{{ label }} </li> </template>

so in etwar?

Java:

<script setup lang="ts">
import { ref } from 'vue';
import MyLi from './MyLi.vue';

const isVisible = ref(false);

const toggleTooltip = () => {
  isVisible.value = !isVisible.value;
};
</script>

<template>
  <div class="tooltip-container">
    <button
      class="tooltip-button"
      @click="toggleTooltip"
      aria-expanded="isVisible"
    >
      Anleitung anzeigen
    </button>

    <div v-if="isVisible" class="tooltip" role="tooltip">
      <h2>Benutzeranleitung für das Formular</h2>
      
      <p>Dieses Formular dient zur Eingabe und Verwaltung von Produktdaten wie SKU, Beschreibung, Farbe und Größe.</p>
      
      <h3>Formularfelder</h3>
      <ul>
        <my-li strong-label="SKU" label="Geben Sie die Produktnummer ein" />
        <my-li strong-label="Beschreibung" label="Erfassen Sie eine kurze Produktbeschreibung" />
        <my-li strong-label="Farbe & Größe" label="Tragen Sie Farbe und Größe des Produkts ein" />
      </ul>

      <h3>Tastenkombinationen</h3>
      <ul>
        <my-li strong-label="Enter" label="Formular absenden" />
        <my-li strong-label="Alt + R" label="Formular zurücksetzen" />
        <my-li strong-label="Ctrl + P" label="Druckvorschau öffnen" />
      </ul>

      <h3>Zusatzfunktionen</h3>
      <ul>
        <my-li strong-label="Auto-Reset" label="Formular nach dem Absenden automatisch zurücksetzen" />
        <my-li strong-label="Auto-Eingabe" label="Verfügbare Produktdaten automatisch einfügen" />
        <my-li strong-label="Faulty" label="Produkt als fehlerhaft markieren" />
      </ul>
    </div>
  </div>
</template>

<style scoped>
.tooltip-container {
  position: relative;
}

.tooltip-button {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

.tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-width: 500px;
  padding: 1rem;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 100;
}

h2 {
  margin-top: 0;
  margin-bottom: 1rem;
}

h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>

Oneixee5 · 25. Dez 2024

Ja so ähnlich könnte man da machen. Du kannst natürlich bessere Namen vergeben.

kay86 · 26. Dez 2024

Ich entschuldige mich schon mal im Voraus für den sehr langen Inhalt!! Ich bin Ihren Empfehlungen, so gut es geht, gefolgt, um es umzusetzen und hoffe es ist so richtig ! Wen sie eine besse umsetzung wissen, dan würde ich mich sehr freuen, ansonsten wünsche ich ihnen eine besinliche zeit im kreise der famile und Freund

Code:

<script setup lang="ts">
import { ref, computed } from 'vue'

// Types
type Language = 'DE' | 'EN' | 'PL'

interface TranslationContent {
  tooltipButton: string
  guideTitle: string
  guideIntro: string
  formFieldsTitle: string
  languageSelection: string
  labelSku: string
  labelDescription: string
  labelColor: string
  labelSize: string
  fieldSku: string
  fieldDescription: string
  fieldColorSize: string
  buttonsShortcutsTitle: string
  shortcutSubmit: string
  shortcutReset: string
  shortcutPrint: string
  additionalFunctionsTitle: string
  autoResetTitle: string
  autoResetOn: string
  autoResetOff: string
  autoInputTitle: string
  autoInputOn: string
  autoInputOff: string
  faultyTitle: string
  faultyDescription: string
  screenModesTitle: string
  portraitMode: string
  landscapeMode: string
  layoutNote: string
}

// State
const currentLang = ref<Language>('DE')
const showTooltip = ref(false)
const autoResetEnabled = ref(false)
const faultyEnabled = ref(false)
const autoDisplayEnabled = ref(false)

const sku = ref('')
const description = ref('')
const color = ref('')
const size = ref('')

// Translations
const translations = {
  DE: {
    tooltipButton: "Anleitung anzeigen",
    guideTitle: "Benutzeranleitung für das Formular",
    guideIntro: "Dieses Formular dient zur Eingabe und Verwaltung von Produktdaten wie SKU, Beschreibung, Farbe und Größe. Folgen Sie den Anweisungen, um Daten korrekt zu erfassen.",
    formFieldsTitle: "Formularfelder",
    languageSelection: "Sprache: Wählen Sie Deutsch (DE), Englisch (EN) oder Polnisch (PL). Die Sprache beeinflusst alle Beschriftungen.",
    labelSku: "SKU",
    labelDescription: "Beschreibung",
    labelColor: "Farbe",
    labelSize: "Größe",
    fieldSku: "SKU: Geben Sie die Produktnummer ein.",
    fieldDescription: "Beschreibung: Erfassen Sie eine kurze Produktbeschreibung.",
    fieldColorSize: "Farbe & Größe: Tragen Sie Farbe und Größe des Produkts in die entsprechenden Felder ein.",
    buttonsShortcutsTitle: "Schaltflächen und Tastenkombinationen",
    shortcutSubmit: "Submit-Button: speichert die eingegebenen Daten, wenn alle Pflichtfelder ausgefüllt sind. Tastenkombination: Enter.",
    shortcutReset: "Reset-Button: Löscht alle Eingaben und setzt das Formular zurück. Tastenkombination: Alt + R.",
    shortcutPrint: "Print Button: Öffnet die Druckvorschau des Formulars. Tastenkombination: Ctrl + P.",
    additionalFunctionsTitle: "Zusatzfunktionen",
    autoResetTitle: "Auto-Reset",
    autoResetOn: "Ein: Formular wird nach Absenden automatisch zurückgesetzt.",
    autoResetOff: "Aus: Eingaben bleiben erhalten.",
    autoInputTitle: "Auto Eingabe",
    autoInputOn: "Ein: Produktdaten werden automatisch befüllt, wenn verfügbar.",
    autoInputOff: "Aus: Manuelle Eingabe erforderlich.",
    faultyTitle: "Faulty",
    faultyDescription: "Aktivieren Sie diesen Schalter, um ein Produkt als fehlerhaft zu kennzeichnen.",
    screenModesTitle: "Bildschirmmodi",
    portraitMode: "Hochformat: Vertikale Anordnung, geeignet für mobile Geräte.",
    landscapeMode: "Querformat: Breitere Ansicht mit Info-Feld neben den Eingabefeldern.",
    layoutNote: "Hinweis: Das Layout passt sich automatisch an die Bildschirmgröße an."
  },
  EN: {
    tooltipButton: "Show Guide",
    guideTitle: "User Guide for the Form",
    guideIntro: "This form is used for entering and managing product data such as SKU, description, color, and size. Follow the instructions to enter data correctly.",
    formFieldsTitle: "Form Fields",
    languageSelection: "Language: Choose German (DE), English (EN), or Polish (PL). The language affects all labels.",
    labelSku: "SKU",
    labelDescription: "Description",
    labelColor: "Color",
    labelSize: "Size",
    fieldSku: "SKU: Enter the product number.",
    fieldDescription: "Description: Enter a short product description.",
    fieldColorSize: "Color & Size: Enter the color and size of the product in the appropriate fields.",
    buttonsShortcutsTitle: "Buttons and Keyboard Shortcuts",
    shortcutSubmit: "Submit Button: saves the entered data if all required fields are filled out. Keyboard shortcut: Enter.",
    shortcutReset: "Reset Button: Clears all entries and resets the form. Keyboard shortcut: Alt + R.",
    shortcutPrint: "Print Button: Opens the print preview of the form. Keyboard shortcut: Ctrl + P.",
    additionalFunctionsTitle: "Additional Functions",
    autoResetTitle: "Auto-Reset",
    autoResetOn: "On: Form is automatically reset after submission.",
    autoResetOff: "Off: Entries are retained.",
    autoInputTitle: "Auto Input",
    autoInputOn: "On: Product data is automatically filled in if available.",
    autoInputOff: "Off: Manual entry is required.",
    faultyTitle: "Faulty",
    faultyDescription: "Activate this switch to mark a product as faulty.",
    screenModesTitle: "Screen Modes",
    portraitMode: "Portrait Mode: Vertical layout, suitable for mobile devices.",
    landscapeMode: "Landscape Mode: Wider view with info box next to input fields.",
    layoutNote: "Note: The layout adjusts automatically to the screen size."
  },
  PL: {
    tooltipButton: "Pokaż instrukcję",
    guideTitle: "Instrukcja obsługi formularza",
    guideIntro: "Ten formularz służy do wprowadzania i zarządzania danymi produktów, takimi jak SKU, opis, kolor i rozmiar. Postępuj zgodnie z instrukcjami, aby poprawnie wprowadzić dane.",
    formFieldsTitle: "Pola formularza",
    languageSelection: "Język: Wybierz niemiecki (DE), angielski (EN) lub polski (PL). Język wpływa na wszystkie etykiety.",
    labelSku: "SKU",
    labelDescription: "Opis",
    labelColor: "Kolor",
    labelSize: "Rozmiar",
    fieldSku: "SKU: Wprowadź numer produktu.",
    fieldDescription: "Opis: Wprowadź krótki opis produktu.",
    fieldColorSize: "Kolor i Rozmiar: Wprowadź kolor i rozmiar produktu w odpowiednich polach.",
    buttonsShortcutsTitle: "Przyciski i skróty klawiszowe",
    shortcutSubmit: "Przycisk Zatwierdź: zapisuje wprowadzone dane, jeśli wszystkie wymagane pola są wypełnione. Skrót klawiszowy: Enter.",
    shortcutReset: "Przycisk Resetuj: Czyści wszystkie wpisy i resetuje formularz. Skrót klawiszowy: Alt + R.",
    shortcutPrint: "Przycisk Drukuj: Otwiera podgląd wydruku formularza. Skrót klawiszowy: Ctrl + P.",
    additionalFunctionsTitle: "Dodatkowe funkcje",
    autoResetTitle: "Autoreset",
    autoResetOn: "Włączony: Formularz jest automatycznie resetowany po zatwierdzeniu.",
    autoResetOff: "Wyłączony: Wpisane dane zostają zachowane.",
    autoInputTitle: "Automatyczne wypełnianie",
    autoInputOn: "Włączone: Dane produktu są automatycznie wypełniane, jeśli są dostępne.",
    autoInputOff: "Wyłączone: Wymagane jest ręczne wprowadzenie danych.",
    faultyTitle: "Wadliwe",
    faultyDescription: "Włącz ten przełącznik, aby oznaczyć produkt jako wadliwy.",
    screenModesTitle: "Tryby ekranu",
    portraitMode: "Tryb portretowy: Układ pionowy, odpowiedni dla urządzeń mobilnych.",
    landscapeMode: "Tryb poziomy: Szerszy widok z polem informacji obok pól wprowadzania.",
    layoutNote: "Uwaga: Układ dostosowuje się automatycznie do rozmiaru ekranu."
  }
} as const

// Functions
const t = computed(() => (key: keyof TranslationContent) => {
  return translations[currentLang.value][key]
})

function toggleTooltip() {
  showTooltip.value = !showTooltip.value
}

function setLanguage(lang: Language) {
  currentLang.value = lang
}
</script>

<template>
  <div class="myli-container">
    <!-- Language Selection -->
    <div class="language-buttons">
      <button
        v-for="lang in ['DE', 'EN', 'PL']"
        :key="lang"
        @click="setLanguage(lang as Language)"
        :class="{ active: currentLang === lang }"
        class="language-button"
      >
        <span :class="`flag-icon flag-icon-${lang.toLowerCase()}`"></span>
      </button>
    </div>

    <!-- Form Fields -->
    <form class="input-form mb-4">
      <div class="form-group">
        <label for="sku">{{ t('labelSku') }}:</label>
        <input
          type="text"
          id="sku"
          v-model="sku"
          class="form-input"
          required
        />
      </div>

      <div class="form-group">
        <label for="description">{{ t('labelDescription') }}:</label>
        <input
          type="text"
          id="description"
          v-model="description"
          class="form-input"
          required
        />
      </div>

      <div class="form-row">
        <div class="form-group">
          <label for="color">{{ t('labelColor') }}:</label>
          <input
            type="text"
            id="color"
            v-model="color"
            class="form-input"
          />
        </div>

        <div class="form-group">
          <label for="size">{{ t('labelSize') }}:</label>
          <input
            type="text"
            id="size"
            v-model="size"
            class="form-input"
          />
        </div>
      </div>
    </form>

    <!-- Tooltip Container -->
    <div data-lang="tooltip-container" class="tooltip-container">
      <button
        data-lang="tooltipButton"
        class="tooltip-button"
        @click="toggleTooltip"
        aria-describedby="tooltip-content"
      >
        {{ t('tooltipButton') }}
      </button>
     
      <div
        v-if="showTooltip"
        data-lang="tooltipContent"
        class="tooltip"
        role="tooltip"
        id="tooltip-content"
      >
        <h2 class="text-xl font-bold mb-4">Benutzeranleitung für das Formular</h2>
        <p class="mb-4">
          Dieses Formular dient zur Eingabe und Verwaltung von Produktdaten wie SKU, Beschreibung, Farbe und Größe. Folgen Sie den Anweisungen, um Daten korrekt zu erfassen.
        </p>

        <h3 class="text-lg font-bold mb-2">Formularfelder</h3>
        <p class="mb-2">
          Sprache: Wählen Sie Deutsch (DE), Englisch (EN) oder Polnisch (PL). Die Sprache beeinflusst alle Beschriftungen.
        </p>
        <ul class="mb-4 list-disc pl-4">
          <li><strong>SKU:</strong> Geben Sie die Produktnummer ein.</li>
          <li><strong>Beschreibung:</strong> Erfassen Sie eine kurze Produktbeschreibung.</li>
          <li><strong>Farbe & Größe:</strong> Tragen Sie Farbe und Größe des Produkts in die entsprechenden Felder ein.</li>
        </ul>

        <h3 class="text-lg font-bold mb-2">Schaltflächen und Tastenkombinationen</h3>
        <ul class="mb-4 list-disc pl-4">
          <li>
            <strong>Submit-Button: </strong>speichert die eingegebenen Daten, wenn alle Pflichtfelder ausgefüllt sind. Tastenkombination<em>: <strong>Enter</strong></em><strong>.</strong>
          </li>
          <li>
            <strong>Reset-Button:</strong> Löscht alle Eingaben und setzt das Formular zurück. Tastenkombination<em>: <strong>Alt</strong></em><strong>+ R.</strong>
          </li>
          <li>
            <strong>Print Button:</strong> Öffnet die Druckvorschau des Formulars. Tastenkombination<em>: <strong>Ctrl</strong></em><strong>+ P.</strong>
          </li>
        </ul>

        <h3 class="text-lg font-bold mb-2">Zusatzfunktionen</h3>
        <p class="mb-2"><strong>Auto-Reset:</strong></p>
        <ul class="mb-4 list-disc pl-4">
          <li><strong>Ein:</strong> Formular wird nach Absenden automatisch zurückgesetzt.</li>
          <li><strong>Aus:</strong> Eingaben bleiben erhalten.</li>
        </ul>

        <p class="mb-2"><strong>Auto Eingabe:</strong></p>
        <ul class="mb-4 list-disc pl-4">
          <li><strong>Ein:</strong> Produktdaten werden automatisch befüllt, wenn verfügbar.</li>
          <li><strong>Aus:</strong> Manuelle Eingabe erforderlich.</li>
        </ul>

        <p class="mb-2"><strong>Faulty:</strong></p>
        <ul class="mb-4 list-disc pl-4">
          <li>Aktivieren Sie diesen Schalter, um ein Produkt als fehlerhaft zu kennzeichnen.</li>
        </ul>

        <h3 class="text-lg font-bold mb-2">Bildschirmmodi</h3>
        <ul class="mb-4 list-disc pl-4">
          <li><strong>Hochformat:</strong> Vertikale Anordnung, geeignet für mobile Geräte.</li>
          <li><strong>Querformat:</strong> Breitere Ansicht mit Info-Feld neben den Eingabefeldern.</li>
        </ul>
       
        <p class="mt-2">Hinweis: Das Layout passt sich automatisch an die Bildschirmgröße an.</p>
      </div>
    </div>

    <!-- Buttons -->
    <div class="button-group mb-4">
      <button type="submit" class="btn">Submit</button>
      <button type="reset" class="btn">Reset</button>
      <button type="button" class="btn">Print</button>
    </div>

    <!-- Switches -->
    <div class="schalter-container">
      <div class="schalter-wrapper">
        <label>{{ t('autoResetTitle') }}</label>
        <input type="checkbox" v-model="autoResetEnabled" />
      </div>
      <div class="schalter-wrapper">
        <label>{{ t('faultyTitle') }}</label>
        <input type="checkbox" v-model="faultyEnabled" />
      </div>
      <div class="schalter-wrapper">
        <label>{{ t('autoInputTitle') }}</label>
        <input type="checkbox" v-model="autoDisplayEnabled" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.myli-container {
  @apply p-4;
}

.language-buttons {
  @apply flex gap-2 mb-4;
}

.language-button {
  @apply px-3 py-2 rounded-lg border;
}

.language-button.active {
  @apply bg-blue-500 text-white;
}

.input-form {
  @apply space-y-4;
}

.form-group {
  @apply flex flex-col gap-1;
}

.form-row {
  @apply grid grid-cols-2 gap-4;
}

.form-input {
  @apply px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

.tooltip-button {
  @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors;
}

.tooltip {
  @apply absolute z-50 left-0 top-full mt-2 p-4 bg-white border rounded-lg shadow-lg;
  @apply w-96 max-h-[80vh] overflow-y-auto;
}

.button-group {
  @apply flex gap-2;
}

.btn {
  @apply px-4 py-2 bg-gray-200 rounded hover:bg-gray-300 transition-colors;
}

.schalter-container {
  @apply space-y-2;
}

.schalter-wrapper {
  @apply flex items-center justify-between p-2 bg-gray-100 rounded;
}

@media (max-width: 640px) {
  .tooltip {
    @apply w-full left-0 right-0;
  }
 
  .form-row {
    @apply grid-cols-1;
  }
}
</style>

Oneixee5 · 26. Dez 2024

Für den Anfang sollte es soweit funktionieren. Es geht aber kürzer und eleganter. Das wird mit der Zeit kommen, wenn du die Konzepte besser beherrschst und anwenden kannst.

kay86 · 26. Dez 2024

Ich habe etwas gebastelt. Auch wenn ich Schwierigkeiten habe, mein CSS zu implementieren. Zum anderen mache ich alles händisch über einen einfachen Linux-Texteditor, der unterschiedliche Formate unterstützt, da ich zum Beispiel Visual Studio nicht zurechtkomme(zu umständlich und kompliziert in der Handhabung für einen Anfänger)

Marinek · 26. Dez 2024

Ok. Langfristig wirst Du eine IDE nutzen müssen. Sonst wird das Forum hier womöglich gesprengt als Linter und Compiler 😀

Oneixee5 · 26. Dez 2024

Du kannst als IDE VSCode verwenden. Das funktioniert für die ganze Web-Schiene (HTML, CSS, JS, TS, ...) sehr gut, weniger für Java - aber im Hobbybereich durchaus brauchbar. Allerdings hilft hier wirklich nur lesen und probieren um sich hier richtig einzuarbeiten. Der Aufwand ist nicht unerheblich. Dafür ist es unglaublich vielfältig.

Du kannst auch IntlliJ Ultimate für 30 Tage kostenlos testen. Wenn die 30 Tage vorbei sind, dann kannst du die Testversionen für das nächste Release ebenfalls kostenlos nutzen. Die Downloads sind etwas versteckt aber voll funktionsfähig. Aber auch in IntlliJ Ultimate muss man sich gründlich einarbeiten. Ich habe das nie wirklich gemocht, das kann aber nahezu alles was man sich so vorstellen kann und noch einiges mehr.

Für den Bereich Web ist Eclipse ungeeignet, das ist sehr weit hinterher. Für Java-Entwicklung ist es aber sehr gut geeignet. Auch hier ist eine intensive Einarbeitung notwendig. Es gibt aber für viele Situationen sehr viele detaillierte Anleitungen im Web. Eine funktionierende KI-Unterstützung für Eclipse kenne ich nicht.

Visual Studio für Linux kann ich nicht beurteilen. Ich nutze da max. manchmal den C-Compiler.

kay86 · 26. Dez 2024

Danke für die sehr ausführliche Erläuterung ich werde mir das morgen anschern.Ich lesse ja viel und probiere,sonst wehre ich nicht so weit gekommen .Wie beurteilen sie die Drei dateien.das würde mir als Feedback sehr interessiert

Oneixee5 · 27. Dez 2024

kay86 hat gesagt.:
Wie beurteilen sie die Drei dateien.

Beurteilen - nach welchen Kriterien? Ich weiß zu wenig über das Gesamtprojekt. Der erste Punkt ist - funktioniert alles wie gewünscht, das ist fast das Wichtigste. Der nächste Punkt wäre: verstehst du alles was da so umgesetzt ist? Das ist wichtig, 1. wenn es ein Lernprojekt ist, 2. wenn du es später erweitern oder verändern willst. Dann wäre da noch - ist das Projekt so wartbar genug um es auch in 6 Monaten oder später noch anzupassen?
Natürlich gibt es noch Potential für Verbesserungen. Das wirst du selbst erkennen, wenn du mehr Erfahrung sammelst. Insgesamt denke ich aber, du hast dich da sehr gut in das Thema eingearbeitet, warst auch bereit dazu.
Wenn es ein Projekt ist um Geld zu verdienen, dann solltest du insgesamt so wenig Aufwand wie möglich da rein stecken. Wenn es nicht gerade für den öffentlichen Dienst ist, dann wirst du nicht viel verändern. Wenn der Kunde seine Online-Präsenz umstellt, dann schreibt man idR. sowieso alles neu - in einer moderneren Technologie und wenn möglich mit noch weniger Aufwand.
Wenn es ein Projekt für die Ausbildung ist, dann fehlt noch die gesamte Dokumentation und evtl. Tests.
Wenn es nur ein Projekt für dein Hobby ist, dann würde ich das Versionieren und weiter ausbauen/verbessern oder zu Lernzwecken optimieren.

Falls du erwartest, dass ich die Dateien Zeile für Zeile auseinander nehme und analysiere - dann würdest du mich vermutlich hassen und auf Ignore setzen. Schwere Fehler konnte ich jetzt nicht mehr erkennen - ohne Garantie. Insgesamt bringt so eine Beurteilung aber nichts. Code/Software ist in Ordnung, wenn die Anforderungen erfüllt werden, nicht mehr und nicht weniger. Deine Aufgabe wäre also, deine Anforderungsdokumentation zu nehmen und Punkt für Punkt durchzugehen (und zu ergänzen) - auch wenn du den Code liest und das Projekt testest. Dabei sollte man auch überlegen, was nicht in der Anforderungsdokumentation steht aber trotzdem notwendig ist. Was man nicht benötigt, sollte man auch nicht umsetzen.

kay86 · 27. Dez 2024

Oneixee5 hat gesagt.:
Beurteilen - nach welchen Kriterien? Ich weiß zu wenig über das Gesamtprojekt. Der erste Punkt ist - funktioniert alles wie gewünscht, das ist fast das Wichtigste. Der nächste Punkt wäre: verstehst du alles was da so umgesetzt ist? Das ist wichtig, 1. wenn es ein Lernprojekt ist, 2. wenn du es später erweitern oder verändern willst. Dann wäre da noch - ist das Projekt so wartbar genug um es auch in 6 Monaten oder später noch anzupassen?
Natürlich gibt es noch Potential für Verbesserungen. Das wirst du selbst erkennen, wenn du mehr Erfahrung sammelst. Insgesamt denke ich aber, du hast dich da sehr gut in das Thema eingearbeitet, warst auch bereit dazu.
Wenn es ein Projekt ist um Geld zu verdienen, dann solltest du insgesamt so wenig Aufwand wie möglich da rein stecken. Wenn es nicht gerade für den öffentlichen Dienst ist, dann wirst du nicht viel verändern. Wenn der Kunde seine Online-Präsenz umstellt, dann schreibt man idR. sowieso alles neu - in einer moderneren Technologie und wenn möglich mit noch weniger Aufwand.
Wenn es ein Projekt für die Ausbildung ist, dann fehlt noch die gesamte Dokumentation und evtl. Tests.
Wenn es nur ein Projekt für dein Hobby ist, dann würde ich das Versionieren und weiter ausbauen/verbessern oder zu Lernzwecken optimieren.

Falls du erwartest, dass ich die Dateien Zeile für Zeile auseinander nehme und analysiere - dann würdest du mich vermutlich hassen und auf Ignore setzen. Schwere Fehler konnte ich jetzt nicht mehr erkennen - ohne Garantie. Insgesamt bringt so eine Beurteilung aber nichts. Code/Software ist in Ordnung, wenn die Anforderungen erfüllt werden, nicht mehr und nicht weniger. Deine Aufgabe wäre also, deine Anforderungsdokumentation zu nehmen und Punkt für Punkt durchzugehen (und zu ergänzen) - auch wenn du den Code liest und das Projekt testest. Dabei sollte man auch überlegen, was nicht in der Anforderungsdokumentation steht aber trotzdem notwendig ist. Was man nicht benötigt, sollte man auch nicht umsetze

kay86 · 27. Dez 2024

danke für den ausführlichen Text nein wenn du die mein Inhalt Zeile für Zeile auseinander nehmen würdest wäre ich dir nicht sauer im Gegenteil jeder Hinweis Kritik oder Verbesserung sind willkommen! nein dies ist ein privater Projekt den ich für mein Unternehmen umsetze da ich in mein Unternehmen gerne einen prozessveränderung bewirken möchte. Aktuell bin ich gerade dabei alles aus meiner alten Datei schrit für schritt zu übertragen so das ich wider alle Funktionen habe

kay86 · 28. Dez 2024

ich komme nicht um diesen verdammten Tooltip-Drum herum da alle damit zusammen hängt! So funktioniert alles perfekt. Aber das verdammte V-HTML versaut alles. Den laut Ihrer Empfehlungen soll man das nicht nehmen. das ganze umzuschreiben sorgt nur für probleme

Java:

<template>
  <div class="form-container">
    <!-- Sprachwahl mit Buttons -->
    <div class="language-container">
      <button class="language-button" @click="changeLanguage('DE')">
        <span class="flag-icon flag-icon-de"></span> <!-- Deutschland -->
      </button>
      <button class="language-button" @click="changeLanguage('EN')">
        <span class="flag-icon flag-icon-gb"></span> <!-- Großbritannien -->
      </button>
      <button class="language-button" @click="changeLanguage('PL')">
        <span class="flag-icon flag-icon-pl"></span> <!-- Polen -->
      </button>
    </div>

    <!-- Tooltip für Anleitung -->
    <div class="tooltip-container">
      <button class="tooltip-button" @click="toggleTooltip" aria-describedby="tooltip-content">
        {{ translations.tooltipButton || 'Anleitung anzeigen' }}
      </button>
      <div class="tooltip-content" v-if="showTooltip" id="tooltip-content" role="tooltip">
        <h2>{{ translations.guideTitle }}</h2>
        <p>{{ translations.guideIntro }}</p>
        <h3>{{ translations.formFieldsTitle }}</h3>
        <p>{{ translations.languageSelection }}</p>
        <ul>
          <li v-html="translations.fieldSku"></li>
          <li v-html="translations.fieldDescription"></li>
          <li v-html="translations.fieldColorSize"></li>
        </ul>
        <h3>{{ translations.buttonsShortcutsTitle }}</h3>
        <ul>
          <li v-html="translations.shortcutSubmit.replace('Enter', '<strong>Enter</strong>')"></li>
          <li v-html="translations.shortcutReset.replace('Alt+R', '<strong>Alt+R</strong>')"></li>
          <li v-html="translations.shortcutPrint.replace('Ctrl+P', '<strong>Ctrl+P</strong>')"></li>
        </ul>
        <h3>{{ translations.additionalFunctionsTitle }}</h3>
        <ul>
          <li v-html="translations.autoReset"></li>
          <li v-html="translations.autoResetOn"></li>
          <li v-html="translations.autoResetOff"></li>
          <li v-html="translations.autoInput"></li>
          <li v-html="translations.autoInputOn"></li>
          <li v-html="translations.autoInputOff"></li>
          <li v-html="translations.faulty"></li>
          <li v-html="translations.faultyActivate"></li>
        </ul>
        <h3>{{ translations.screenModesTitle }}</h3>
        <ul>
          <li v-html="translations.portraitMode"></li>
          <li v-html="translations.landscapeMode"></li>
        </ul>
        <p v-html="translations.layoutNote"></p>
      </div>
    </div>

    <!-- Info-Box für den Druckbereich -->
    <div class="info-box info-box-print" id="infoBox">
      <div class="info-content">
        <span class="sku" style="display: block; font-size: 1.2em; font-weight: bold;">{{ form.sku }}</span>
        <svg class="barcode" ref="barcode"></svg>
        <div class="additional-info">
          <span class="size-color">{{ form.color }} / {{ form.size }}</span>
          <div class="description">{{ form.description }}</div>
        </div>
      </div>
    </div>

    <!-- Formular -->
    <form @submit.prevent="submitForm" class="form-grid">
      <label for="sku">SKU:</label>
      <input type="search" v-model="form.sku" required />

      <label for="description">Beschreibung:</label>
      <input type="search" v-model="form.description" required />

      <div class="color-size-container">
        <div>
          <label for="color">Farbe:</label>
          <input type="search" v-model="form.color" />
        </div>
        <div>
          <label for="size">Größe:</label>
          <input type="search" v-model="form.size" />
        </div>
      </div>

      <div class="button-grid">
        <button type="submit">{{ translations.submit }}</button>
        <button type="reset" @click="resetForm">{{ translations.reset }}</button>
        <button type="button" @click="printPage">{{ translations.print }}</button>
      </div>
    </form>

    <!-- Schalter -->
    <div class="schalter-container">
      <div class="schalter-wrapper">
        <label>
          {{ translations.autoReset }}
          <input type="checkbox" v-model="autoReset" />
        </label>
      </div>
      <div class="schalter-wrapper">
        <label>
          {{ translations.faultySwitch }}
          <input type="checkbox" v-model="isFaulty" @change="toggleFaultLabel" />
        </label>
      </div>
      <div class="schalter-wrapper">
        <label>
          {{ translations.autoDisplay }}
          <input type="checkbox" v-model="autoInput" @change="toggleAutoDisplay" />
        </label>
      </div>
    </div>

    <!-- Logo -->
    <div class="logo-container">
      <img class="logo" :src="logoUrl" alt="CEVA Logo" width="200" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        sku: "",
        description: "",
        color: "",
        size: "",
      },
      isFaulty: false,
      autoReset: false,
      autoInput: false,
      showTooltip: false,
      translations: {},
      selectedLanguage: "DE",
      translationsData: {
        DE: {
          description: "Beschreibung",
          color: "Farbe",
          size: "Größe",
          submit: "Absenden",
          reset: "Zurücksetzen",
          print: "Drucken",
          autoReset: "Auto-Reset",
          faultySwitch: "Faulty Label",
          autoDisplay: "Auto Display",
          tooltipButton: "Anleitung anzeigen",
          guideTitle: "Benutzeranleitung für das Formular",
          guideIntro: "Dieses Formular dient zur Eingabe und Verwaltung von Produktdaten wie SKU, Beschreibung, Farbe und Größe. Folgen Sie den Anweisungen, um Daten korrekt zu erfassen.",
          formFieldsTitle: "Formularfelder",
          languageSelection: "Sprache: Wählen Sie Deutsch (DE), Englisch (EN) oder Polnisch (PL). Die Sprache beeinflusst alle Beschriftungen.",
          fieldSku: "<strong>SKU:</strong> Geben Sie die Produktnummer ein.",
          fieldDescription: "<strong>Beschreibung:</strong> Erfassen Sie eine kurze Produktbeschreibung.",
          fieldColorSize: "<strong>Farbe & Größe:</strong> Tragen Sie Farbe und Größe des Produkts in die entsprechenden Felder ein.",
          buttonsShortcutsTitle: "Schaltflächen und Tastenkombinationen",
          shortcutSubmit: "<b>Submit-Button:</b> speichert die eingegebenen Daten, wenn alle Pflichtfelder ausgefüllt sind. Tastenkombination: <em>Enter</em>",
          shortcutReset: "<b>Reset-Button:</b> Löscht alle Eingaben und setzt das Formular zurück. Tastenkombination: <em>Alt+R</em>",
          shortcutPrint: "<b>Print-Button:</b> Öffnet die Druckvorschau des Formulars. Tastenkombination: <em>Ctrl+P</em>",
          additionalFunctionsTitle: "Zusatzfunktionen",
          autoReset: "<b>Auto-Reset:</b>",
          autoResetOn: "<b>Ein:</b> Formular wird nach Absenden automatisch zurückgesetzt.",
          autoResetOff: "<b>Aus:</b> Eingaben bleiben erhalten.",
          autoInput: "<b>Auto Eingabe:</b>",
          autoInputOn: "<b>Ein:</b> Produktdaten werden automatisch befüllt, wenn verfügbar.",
          autoInputOff: "<b>Aus:</b> Manuelle Eingabe erforderlich.",
          faulty: "<b>Faulty:</b>",
          faultyActivate: "Aktivieren Sie diesen Schalter, um ein Produkt als fehlerhaft zu kennzeichnen.",
          screenModesTitle: "Bildschirmmodi",
          portraitMode: "<b>Hochformat:</b> Vertikale Anordnung, geeignet für mobile Geräte.",
          landscapeMode: "<b>Querformat:</b> Breitere Ansicht mit Info-Feld neben den Eingabefeldern.",
          layoutNote: "Hinweis: Das Layout passt sich automatisch an die Bildschirmgröße an.",
        },
        EN: {
          description: "Description",
          color: "Color",
          size: "Size",
          submit: "Submit",
          reset: "Reset",
          print: "Print",
          autoReset: "Auto-Reset",
          faultySwitch: "Faulty Label",
          autoDisplay: "Auto Display",
          tooltipButton: "Show Instructions",
          guideTitle: "User Guide for the Form",
          guideIntro: "This form is used to enter and manage product data such as SKU, description, color, and size. Follow the instructions to ensure accurate data entry.",
          formFieldsTitle: "Form Fields",
          languageSelection: "Language: Choose German (DE), English (EN), or Polish (PL). The language affects all labels.",
          fieldSku: "<strong>SKU:</strong> Enter the product number.",
          fieldDescription: "<strong>Description:</strong> Provide a short product description.",
          fieldColorSize: "<strong>Color & Size:</strong> Enter the product's color and size in the appropriate fields.",
          buttonsShortcutsTitle: "Buttons and Keyboard Shortcuts",
          shortcutSubmit: "<b>Submit-Button:</b> Saves the entered data when all required fields are filled. Shortcut: <em>Enter</em>",
          shortcutReset: "<b>Reset-Button:</b> Clears all inputs and resets the form. Shortcut: <em>Alt+R</em>",
          shortcutPrint: "<b>Print-Button:</b> Opens the print preview of the form. Shortcut: <em>Ctrl+P</em>",
          additionalFunctionsTitle: "Additional Functions",
          autoReset: "<b>Auto-Reset:</b>",
          autoResetOn: "<b>On:</b> The form will automatically reset after submission.",
          autoResetOff: "<b>Off:</b> Inputs remain saved.",
          autoInput: "<b>Auto Input:</b>",
          autoInputOn: "<b>On:</b> Product data is automatically filled if available.",
          autoInputOff: "<b>Off:</b> Manual input is required.",
          faulty: "<b>Faulty:</b>",
          faultyActivate: "Activate this switch to mark a product as faulty.",
          screenModesTitle: "Screen Modes",
          portraitMode: "<b>Portrait Mode:</b> Vertical arrangement, suitable for mobile devices.",
          landscapeMode: "<b>Landscape Mode:</b> Wider view with info box next to input fields.",
          layoutNote: "Note: The layout automatically adjusts to the screen size.",
        },
        PL: {
          description: "Opis",
          color: "Kolor",
          size: "Rozmiar",
          submit: "Zatwierdź",
          reset: "Resetuj",
          print: "Drukuj",
          autoReset: "Autoreset",
          faultySwitch: "Uszkodzony Etykieta",
          autoDisplay: "Automatyczne wyświetlanie",
          tooltipButton: "Pokaż instrukcje",
          guideTitle: "Instrukcja obsługi formularza",
          guideIntro: "Ten formularz służy do wprowadzania i zarządzania danymi produktów, takimi jak SKU, opis, kolor i rozmiar. Postępuj zgodnie z instrukcjami, aby poprawnie wprowadzić dane.",
          formFieldsTitle: "Pola formularza",
          languageSelection: "Język: Wybierz niemiecki (DE), angielski (EN) lub polski (PL). Język wpływa na wszystkie etykiety.",
          fieldSku: "<strong>SKU:</strong> Wprowadź numer produktu.",
          fieldDescription: "<strong>Opis:</strong> Podaj krótki opis produktu.",
          fieldColorSize: "<strong>Kolor i Rozmiar:</strong> Wprowadź kolor i rozmiar produktu w odpowiednich polach.",
          buttonsShortcutsTitle: "Przyciski i skróty klawiszowe",
          shortcutSubmit: "<b>Zatwierdź:</b> Zapisuje wprowadzone dane, jeśli wszystkie wymagane pola są wypełnione. Skrót: <em>Enter</em>",
          shortcutReset: "<b>Resetuj:</b> Czyści wszystkie wpisy i resetuje formularz. Skrót: <em>Alt+R</em>",
          shortcutPrint: "<b>Drukuj:</b> Otwiera podgląd wydruku formularza. Skrót: <em>Ctrl+P</em>",
          additionalFunctionsTitle: "Dodatkowe funkcje",
          autoReset: "<b>Automatyczny reset:</b>",
          autoResetOn: "<b>Włączony:</b> Formularz automatycznie resetuje się po przesłaniu.",
          autoResetOff: "<b>Wyłączony:</b> Dane zostają zapisane.",
          autoInput: "<b>Automatyczne wprowadzanie:</b>",
          autoInputOn: "<b>Włączone:</b> Dane produktów są automatycznie uzupełniane, jeśli są dostępne.",
          autoInputOff: "<b>Wyłączone:</b> Wymagane jest ręczne wprowadzenie danych.",
          faulty: "<b>Uszkodzony:</b>",
          faultyActivate: "Aktywuj ten przełącznik, aby oznaczyć produkt jako uszkodzony.",
          screenModesTitle: "Tryby ekranu",
          portraitMode: "<b>Tryb portretowy:</b> Układ pionowy, odpowiedni dla urządzeń mobilnych.",
          landscapeMode: "<b>Tryb poziomy:</b> Szeroki widok z polem informacyjnym obok pól wprowadzania.",
          layoutNote: "Uwaga: Układ automatycznie dostosowuje się do rozmiaru ekranu.",
        },
      },
      logoUrl: "https://www.shipwire.com/wp-content/uploads/2022/03/CEVA_Logo_White.png",
    };
  },
  computed: {
    sizeColor() {
      return `${this.form.color} / ${this.form.size}`;
    },
  },
  methods: {
    changeLanguage(lang) {
      this.selectedLanguage = lang;
      this.translations = this.translationsData[lang];
    },
    toggleFaultLabel() {
      this.isFaulty = !this.isFaulty;
    },
    toggleAutoDisplay() {
      console.log("Auto Display toggled.");
    },
    toggleTooltip() {
      this.showTooltip = !this.showTooltip;
    },
    submitForm() {
      console.log("Formular abgesendet:", this.form);
      if (this.autoReset) {
        this.resetForm();
      }
    },
    resetForm() {
      this.form = {
        sku: "",
        description: "",
        color: "",
        size: "",
      };
    },
    printPage() {
      window.print();
    },
    generateBarcode() {
      if (this.form.sku) {
        JsBarcode(this.$refs.barcode, this.form.sku, {
          format: "CODE128",
          lineColor: "#000",
          width: 2,
          height: 50,
          displayValue: false,
        });
      }
    },
  },
  mounted() {
    const script = document.createElement("script");
    script.src = "https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js";
    script.onload = this.generateBarcode;
    document.head.appendChild(script);
    this.changeLanguage(this.selectedLanguage);
  },
  updated() {
    this.generateBarcode();
  },
};
</script>

Oneixee5 · 28. Dez 2024

Du musst mehr Details nennen. Was genau ist denn das Problem?
statt:
<li v-html="translations.shortcutSubmit.replace('Enter', '<strong>Enter</strong>')"></li>
einfach:
<my-li strong-label="Enter" :label="translations.shortcutSubmit" />

Du kannst das natürlich noch weiter individualisieren:

Javascript:

translationsData: {
    DE: {
        ...
        shortcutSubmit: "<b>Submit-Button:</b> speichert die eingegebenen Daten, wenn alle Pflichtfelder ausgefüllt sind. Tastenkombination: <em>Enter</em>",
        ...  
    },
    ...
}

Javascript:

translationsData: {
    DE: {
        ...
        shortcutSubmit: [
            "Submit-Button:",
            "speichert die eingegebenen Daten, wenn alle Pflichtfelder ausgefüllt sind. Tastenkombination:",
            "Enter"
        ],
        ...  
    },
    ...
}

Möglicherweise ist es aber nicht mit dem Array getan, da hier die Eigenschaften am Index hängen. Man könnte jedem Element des Arrays seine eigenen Eigenschaften mitgeben, bspw. eine/mehrere Klasse/n:

Javascript:

translationsData: {
    DE: {
        ...
        shortcutSubmit: [
            { label: "Submit-Button:", class: "text-bold" },
            { label: "speichert die eingegebenen Daten, wenn alle Pflichtfelder ausgefüllt sind. Tastenkombination:" },
            { label: "Enter", class: "text-bold text-strong" },
        ],
        ...  
    },
    ...
}

Jetzt müsste dann <my-li ... /> so abgeändert werden, dass eine prop mit dem Array umgehen kann. Oder du baust einfach eine neue Component die das kann. Die einfachste Variante wäre evtl. für jedes Element im Array ein <span> anzulegen, den Text aus label da reinzuschreiben und die class zu übergeben, wenn sie vorhanden ist.

Playground

kay86 · 28. Dez 2024

Oneixee5 hat gesagt.:
Du musst mehr Details nennen. Was genau ist denn das Problem?
statt:
<li v-html="translations.shortcutSubmit.replace('Enter', '<strong>Enter</strong>')"></li>
einfach:
<my-li strong-label="Enter" :label="translations.shortcutSubmit" />

Du kannst das natürlich noch weiter individualisieren:

Javascript:

translationsData: { DE: { ... shortcutSubmit: "<b>Submit-Button:</b> speichert die eingegebenen Daten, wenn alle Pflichtfelder ausgefüllt sind. Tastenkombination: <em>Enter</em>", ... }, ... }

Javascript:

translationsData: { DE: { ... shortcutSubmit: [ "Submit-Button:", "speichert die eingegebenen Daten, wenn alle Pflichtfelder ausgefüllt sind. Tastenkombination:", "Enter" ], ... }, ... }

Möglicherweise ist es aber nicht mit dem Array getan, da hier die Eigenschaften am Index hängen. Man könnte jedem Element des Arrays seine eigenen Eigenschaften mitgeben, bspw. eine/mehrere Klasse/n:

Javascript:

translationsData: { DE: { ... shortcutSubmit: [ { label: "Submit-Button:", class: "text-bold" }, { label: "speichert die eingegebenen Daten, wenn alle Pflichtfelder ausgefüllt sind. Tastenkombination:" }, { label: "Enter", class: "text-bold text-strong" }, ], ... }, ... }

Jetzt müsste dann <my-li ... /> so abgeändert werden, dass eine prop mit dem Array umgehen kann. Oder du baust einfach eine neue Component die das kann. Die einfachste Variante wäre evtl. für jedes Element im Array ein <span> anzulegen, den Text aus label da reinzuschreiben und die class zu übergeben, wenn sie vorhanden ist.

Playground

Ich weiß nicht, wie ich es erklären soll. Bin nicht gerade ein guter Erklärbär mit V-HTML. Hatte alles funktioniert, mit der Sprachumschaltung, sowohl im Tooltip als auch im Formular so wie der Text layut . Das Problem war immer, dass mein Tooltip den Text, bestimmte Wörter und Bereiche fett geschrieben sind, hervorhebt. Leider, wenn ich andere Formen, ich sage mal Schreibweisen, anwende, dann gehen die Texteigenschaften verloren. Was auch Auswirkungen auf die Übersetzungsfunktion im Tooltip und im Formular hattte

Aber ich denke, ich konnte es gestern Nacht mit CSS noch gut lösen, das Problem. Dieser Tooltip hat mir schon so manchen Schlaf geraubt!

Java:

    <!-- Tooltip für Anleitung -->
    <div class="tooltip-container">
      <button class="tooltip-button" @click="toggleTooltip" aria-describedby="tooltip-content">
        {{ translations.tooltipButton || 'Anleitung anzeigen' }}
      </button>
      <div class="tooltip-content" v-if="showTooltip" id="tooltip-content" role="tooltip">
        <h2>{{ translations.guideTitle }}</h2>
        <p>{{ translations.guideIntro }}</p>
        <h3>{{ translations.formFieldsTitle }}</h3>
        <p>{{ translations.languageSelection }}</p>
        <ul>
          <li><span class="tooltip-bold">SKU:</span> {{ translations.fieldSkuText }}</li>
          <li><span class="tooltip-bold">{{ translations.description }}:</span> {{ translations.fieldDescriptionText }}</li>
          <li><span class="tooltip-bold">{{ translations.colorSize }}:</span> {{ translations.fieldColorSizeText }}</li>
        </ul>
        <h3>{{ translations.buttonsShortcutsTitle }}</h3>
        <ul>
          <li>
            <span class="tooltip-bold">Submit-Button:</span>
            {{ translations.submitButtonText }}
            <span class="keyboard-shortcut">Enter</span>
          </li>
          <li>
            <span class="tooltip-bold">Reset-Button:</span>
            {{ translations.resetButtonText }}
            <span class="keyboard-shortcut">Alt+R</span>
          </li>
          <li>
            <span class="tooltip-bold">Print-Button:</span>
            {{ translations.printButtonText }}
            <span class="keyboard-shortcut">Ctrl+P</span>
          </li>
        </ul>
        <h3>{{ translations.additionalFunctionsTitle }}</h3>
        <ul>
          <li>
            <span class="tooltip-bold">{{ translations.autoReset }}</span>
            <div class="sub-item">{{ translations.autoResetOnText }}</div>
            <div class="sub-item">{{ translations.autoResetOffText }}</div>
          </li>
          <li>
            <span class="tooltip-bold">{{ translations.autoInput }}</span>
            <div class="sub-item">{{ translations.autoInputOnText }}</div>
            <div class="sub-item">{{ translations.autoInputOffText }}</div>
          </li>
          <li>
            <span class="tooltip-bold">{{ translations.faulty }}</span>
            <div>{{ translations.faultyActivateText }}</div>
          </li>
        </ul>
        <h3>{{ translations.screenModesTitle }}</h3>
        <ul>
          <li>
            <span class="tooltip-bold">{{ translations.portraitModeTitle }}</span>
            {{ translations.portraitModeText }}
          </li>
          <li>
            <span class="tooltip-bold">{{ translations.landscapeModeTitle }}</span>
            {{ translations.landscapeModeText }}
          </li>
        </ul>
        <p>{{ translations.layoutNote }}</p>
      </div>
    </div>

    <!-- Info-Box für den Druckbereich -->
    <div class="info-box info-box-print" id="infoBox">
      <div class="info-content">
        <span class="sku" style="display: block; font-size: 1.2em; font-weight: bold;">{{ form.sku }}</span>
        <svg class="barcode" ref="barcode"></svg>
        <div class="additional-info">
          <span class="size-color">{{ form.color }} / {{ form.size }}</span>
          <div class="description">{{ form.description }}</div>
        </div>
      </div>
    </div>

    <!-- Formular -->
    <form @submit.prevent="submitForm" class="form-grid">
      <label for="sku">SKU:</label>
      <input type="search" v-model="form.sku" required />

      <label for="description">{{ translations.description }}:</label>
      <input type="search" v-model="form.description" required />

      <div class="color-size-container">
        <div>
          <label for="color">{{ translations.color }}:</label>
          <input type="search" v-model="form.color" />
        </div>
        <div>
          <label for="size">{{ translations.size }}:</label>
          <input type="search" v-model="form.size" />
        </div>
      </div>

      <div class="button-grid">
        <button type="submit">{{ translations.submit }}</button>
        <button type="reset" @click="resetForm">{{ translations.reset }}</button>
        <button type="button" @click="printPage">{{ translations.print }}</button>
      </div>
    </form>

    <!-- Schalter -->
    <div class="schalter-container">
      <div class="schalter-wrapper">
        <label>
          {{ translations.autoReset }}
          <input type="checkbox" v-model="autoReset" />
        </label>
      </div>
      <div class="schalter-wrapper">
        <label>
          {{ translations.faultySwitch }}
          <input type="checkbox" v-model="isFaulty" @change="toggleFaultLabel" />
        </label>
      </div>
      <div class="schalter-wrapper">
        <label>
          {{ translations.autoDisplay }}
          <input type="checkbox" v-model="autoInput" @change="toggleAutoDisplay" />
        </label>
      </div>
    </div>

    <!-- Logo -->
    <div class="logo-container">
      <img class="logo" :src="logoUrl" alt="CEVA Logo" width="200" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        sku: "",
        description: "",
        color: "",
        size: "",
      },
      isFaulty: false,
      autoReset: false,
      autoInput: false,
      showTooltip: false,
      translations: {},
      selectedLanguage: "DE",
      translationsData: {
        DE: {
          description: "Beschreibung",
          color: "Farbe",
          size: "Größe",
          submit: "Absenden",
          reset: "Zurücksetzen",
          print: "Drucken",
          autoReset: "Auto-Reset",
          faultySwitch: "Faulty Label",
          autoDisplay: "Auto Display",
          tooltipButton: "Anleitung anzeigen",
          guideTitle: "Benutzeranleitung für das Formular",
          guideIntro: "Dieses Formular dient zur Eingabe und Verwaltung von Produktdaten wie SKU, Beschreibung, Farbe und Größe. Folgen Sie den Anweisungen, um Daten korrekt zu erfassen.",
          formFieldsTitle: "Formularfelder",
          languageSelection: "Sprache: Wählen Sie Deutsch (DE), Englisch (EN) oder Polnisch (PL). Die Sprache beeinflusst alle Beschriftungen.",
          fieldSkuText: "Geben Sie die Produktnummer ein.",
          fieldDescriptionText: "Erfassen Sie eine kurze Produktbeschreibung.",
          fieldColorSizeText: "Tragen Sie Farbe und Größe des Produkts in die entsprechenden Felder ein.",
          buttonsShortcutsTitle: "Schaltflächen und Tastenkombinationen",
          submitButtonText: "speichert die eingegebenen Daten, wenn alle Pflichtfelder ausgefüllt sind.",
          resetButtonText: "Löscht alle Eingaben und setzt das Formular zurück.",
          printButtonText: "Öffnet die Druckvorschau des Formulars.",
          additionalFunctionsTitle: "Zusatzfunktionen",
          autoResetOnText: "Ein: Formular wird nach Absenden automatisch zurückgesetzt.",
          autoResetOffText: "Aus: Eingaben bleiben erhalten.",
          autoInputOnText: "Ein: Produktdaten werden automatisch befüllt, wenn verfügbar.",
          autoInputOffText: "Aus: Manuelle Eingabe erforderlich.",
          faultyActivateText: "Aktivieren Sie diesen Schalter, um ein Produkt als fehlerhaft zu kennzeichnen.",
          portraitModeTitle: "Hochformat:",
          portraitModeText: "Vertikale Anordnung, geeignet für mobile Geräte.",
          landscapeModeTitle: "Querformat:",
          landscapeModeText: "Breitere Ansicht mit Info-Feld neben den Eingabefeldern.",
          layoutNote: "Hinweis: Das Layout passt sich automatisch an die Bildschirmgröße an.",
          colorSize: "Farbe & Größe"
        },
    EN: {
  description: "Description",
  color: "Color",
  size: "Size",
  submit: "Submit",
  reset: "Reset",
  print: "Print",
  autoReset: "Auto-Reset",
  faultySwitch: "Faulty Label",
  autoDisplay: "Auto Display",
  tooltipButton: "Show Instructions",
  guideTitle: "User Guide for the Form",
  guideIntro: "This form is used to enter and manage product data such as SKU, description, color, and size. Follow the instructions to ensure accurate data entry.",
  formFieldsTitle: "Form Fields",
  languageSelection: "Language: Choose German (DE), English (EN), or Polish (PL). The language affects all labels.",
  fieldSkuText: "Enter the product number.",
  fieldDescriptionText: "Provide a short product description.",
  fieldColorSizeText: "Enter the product's color and size in the appropriate fields.",
  buttonsShortcutsTitle: "Buttons and Keyboard Shortcuts",
  submitButtonText: "saves the entered data when all required fields are filled.",
  resetButtonText: "Clears all inputs and resets the form.",
  printButtonText: "Opens the print preview of the form.",
  additionalFunctionsTitle: "Additional Functions",
  autoResetOnText: "On: The form will automatically reset after submission.",
  autoResetOffText: "Off: Inputs remain saved.",
  autoInputOnText: "On: Product data is automatically filled if available.",
  autoInputOffText: "Off: Manual input is required.",
  faultyActivateText: "Activate this switch to mark a product as faulty.",
  portraitModeTitle: "Portrait Mode:",
  portraitModeText: "Vertical arrangement, suitable for mobile devices.",
  landscapeModeTitle: "Landscape Mode:",
  landscapeModeText: "Wider view with info box next to input fields.",
  layoutNote: "Note: The layout automatically adjusts to the screen size.",
  colorSize: "Color & Size"
},

PL: {
  description: "Opis",
  color: "Kolor",
  size: "Rozmiar",
  submit: "Zatwierdź",
  reset: "Resetuj",
  print: "Drukuj",
  autoReset: "Autoreset",
  faultySwitch: "Uszkodzony Etykieta",
  autoDisplay: "Automatyczne wyświetlanie",
  tooltipButton: "Pokaż instrukcje",
  guideTitle: "Instrukcja obsługi formularza",
  guideIntro: "Ten formularz służy do wprowadzania i zarządzania danymi produktów, takimi jak SKU, opis, kolor i rozmiar. Postępuj zgodnie z instrukcjami, aby poprawnie wprowadzić dane.",
  formFieldsTitle: "Pola formularza",
  languageSelection: "Język: Wybierz niemiecki (DE), angielski (EN) lub polski (PL). Język wpływa na wszystkie etykiety.",
  fieldSkuText: "Wprowadź numer produktu.",
  fieldDescriptionText: "Podaj krótki opis produktu.",
  fieldColorSizeText: "Wprowadź kolor i rozmiar produktu w odpowiednich polach.",
  buttonsShortcutsTitle: "Przyciski i skróty klawiszowe",
  submitButtonText: "zapisuje wprowadzone dane, gdy wszystkie wymagane pola są wypełnione.",
  resetButtonText: "Czyści wszystkie wpisy i resetuje formularz.",
  printButtonText: "Otwiera podgląd wydruku formularza.",
  additionalFunctionsTitle: "Dodatkowe funkcje",
  autoResetOnText: "Włączony: Formularz automatycznie resetuje się po przesłaniu.",
  autoResetOffText: "Wyłączony: Dane zostają zapisane.",
  autoInputOnText: "Włączone: Dane produktów są automatycznie uzupełniane, jeśli są dostępne.",
  autoInputOffText: "Wyłączone: Wymagane jest ręczne wprowadzenie danych.",
  faultyActivateText: "Aktywuj ten przełącznik, aby oznaczyć produkt jako uszkodzony.",
  portraitModeTitle: "Tryb portretowy:",
  portraitModeText: "Układ pionowy, odpowiedni dla urządzeń mobilnych.",
  landscapeModeTitle: "Tryb poziomy:",
  landscapeModeText: "Szeroki widok z polem informacyjnym obok pól wprowadzania.",
  layoutNote: "Uwaga: Układ automatycznie dostosowuje się do rozmiaru ekranu.",
  colorSize: "Kolor i Rozmiar"
}
      },
      logoUrl: "https://www.shipwire.com/wp-content/uploads/2022/03/CEVA_Logo_White.png",
    };
  },
  computed: {
    sizeColor() {
      return `${this.form.color} / ${this.form.size}`;
    },
  },
  methods: {
    changeLanguage(lang) {
      this.selectedLanguage = lang;
      this.translations = this.translationsData[lang];
    },
    toggleFaultLabel() {
      this.isFaulty = !this.isFaulty;
    },
    toggleAutoDisplay() {
      console.log("Auto Display toggled.");
    },
    toggleTooltip() {
      this.showTooltip = !this.showTooltip;
    },
    submitForm() {
      console.log("Formular abgesendet:", this.form);
      if (this.autoReset) {
        this.resetForm();
      }
    },
    resetForm() {
      this.form = {
        sku: "",
        description: "",
        color: "",
        size: "",
      };
    },
    printPage() {
      window.print();
    },
    generateBarcode() {
      if (this.form.sku) {
        JsBarcode(this.$refs.barcode, this.form.sku, {
          format: "CODE128",
          lineColor: "#000",
          width: 2,
          height: 50,
          displayValue: false,
        });
      }
    },
  },
  mounted() {
    const script = document.createElement("script");
    script.src = "https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js";
    script.onload = this.generateBarcode;
    document.head.appendChild(script);
    this.changeLanguage(this.selectedLanguage);
  },
  updated() {
    this.generateBarcode();
  },
};
</script>

<style scoped>
.form-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.tooltip-container {
  position: relative;
  margin-bottom: 20px;
}

.tooltip-button {
  padding: 8px 16px;
  background-color: #4a5568;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.tooltip-content {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  width: 100%;
  max-width: 600px;
  padding: 20px;
  background-color: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.tooltip-bold {
  font-weight: bold;
}

.keyboard-shortcut {
  font-weight: bold;
  padding: 2px 6px;
  background-color: #f1f1f1;
  border-radius: 3px;
  margin-left: 4px;
}

.sub-item {
  margin-left: 20px;
  margin-top: 4px;
}

.language-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.language-button {
  padding: 5px 10px;
  cursor: pointer;
}

.info-box {
  border: 1px solid #ddd;
  padding: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.form-grid {
  display: grid;
  gap: 15px;
}

.color-size-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.button-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.schalter-container {
  margin-top: 20px;
  display: grid;
  gap: 15px;
}

.onoffswitch {
  position: relative;
  width: 60px;
  user-select: none;
}
</style>

Oneixee5 · 28. Dez 2024

Oneixee5 hat gesagt.:
Playground

Hast du das gesehen?

Oneixee5 · 28. Dez 2024

Sieh dir mal deinem Code an:

HTML:

<!-- Tooltip für Anleitung -->
    <div class="tooltip-container">
      ...
    </div>

    <!-- Info-Box für den Druckbereich -->
    <div class="info-box info-box-print" id="infoBox">
      ...
    </div>

    <!-- Formular -->
    <form @submit.prevent="submitForm" class="form-grid">
      ..

    </form>

    <!-- Schalter -->
    <div class="schalter-container">
      ...
    </div>

    <!-- Logo -->
    <div class="logo-container">
      ...
    </div>

Das sind schon mal 130 Zeilen Code in deinem Beispiel und alles in einer Datei! Warum machst du hier nicht 5 Components draus? Dann wären das schon mal 5 Zeilen Code - das scheint mir etwas übersichtlicher - Oder?

Dann folgen 184 Zeilen JS-Code - und genau das ist dein Problem. Wir hatten ja schon festgestellt, das JS-Code über 25 Zeilen unwartbar ist.

Dadurch, dass du so gut wie keine Components verwendest, wirfst du den Vorteil von vue.js einfach weg und steigerst die Komplexität deines Projektes um die Lernkurve eines Frameworks. Du erreichst quasi das Gegenteil von allen deinen Zielen. Wenn man ein Framework verwendet, dann muss man sich darauf einlassen.

Ich verstehe, dass du erreichen willst, dass dein Projekt so schnell wie möglich funktioniert. So erreichst du das nicht. Du hast wieder undurchschaubaren Code und jede Änderung reist neue Löcher auf.

kay86 · 29. Dez 2024

Schnell fertig werden will ich nicht! Aber danke das du so geduldig mit mir bist! was JS-Code betrifft bin ich noch bei das ganze zu änder. Aber JS-Code so wie die Funktion aus meiner alten Datei zu überführen ist nicht einfach

kay86 · 30. Dez 2024

so ich war mal fleisig

Vue Playground

Oneixee5 · 30. Dez 2024

kay86 hat gesagt.:
so ich war mal fleisig
Vue Playground

Die veraltetet Art/Schreibweise der Components ist mir nicht mehr so geläufig, das benutzt man nicht mehr so. Ich verstehe nicht was du da vor hast. Du importierst nur JS-Dateien keine Components. Bitte geh die Doku noch mal durch.

Oneixee5 · 30. Dez 2024

Vue.js

Vue.js - The Progressive JavaScript Framework

vuejs.org

SFC ist ein definierendes Feature von Vue und ist der empfohlene Weg, um Vue-Komponenten zu erstellen ...

Vue.js

Vue.js - The Progressive JavaScript Framework

vuejs.org

kay86 · 30. Dez 2024

Ich habe erstmal begonnen das ganze zu importieren.sehen sie es mir nach das es noch nicht so ist wie es sein sollte.für mich war das eine steile Lernkurve und hat mich ein ganz Nacht gekostet das ganze zu erstellen.aber danke ich werde wen ich morgen aus der Nachtschicht komme.die Fehler beheben

kay86 · 31. Dez 2024

Oneixee5 hat gesagt.:
Vue.js

Vue.js - The Progressive JavaScript Framework

vuejs.org

SFC ist ein definierendes Feature von Vue und ist der empfohlene Weg, um Vue-Komponenten zu erstellen ...

Vue.js

Vue.js - The Progressive JavaScript Framework

vuejs.org

Ich hoffe, das ist jetzt richtig so. https://playcode.io/2208495

Oneixee5 · 31. Dez 2024

Da bei uns alle krank sind und meistens schlafen, und der Hund ängstlich hinter dem Sofa liegt weil es ständig knallt, habe ich mal ein etwas umfangreicheres Beispiel gemacht. Einfach den Anhang (auf Viren scannen, nicht dass du auch eine Grippe bekommst) in einen leeren Ordner entpacken.
Beachte dann die README.md. Die Kurzfassung ist: VSCode/NodeJS wird vorausgesetzt - das ist ein übliches Setup für Webprojekte. Führe zum Start folgendes in dem Ordner aus:

Bash:

npm install
npm run dev

Falls sich der Browser nicht automatisch öffnet, dann findest do die URL in der Konsole.

kay86 · 31. Dez 2024

Oneixee5 hat gesagt.:
Da bei uns alle krank sind und meistens schlafen, und der Hund ängstlich hinter dem Sofa liegt weil es ständig knallt, habe ich mal ein etwas umfangreicheres Beispiel gemacht. Einfach den Anhang (auf Viren scannen, nicht dass du auch eine Grippe bekommst) in einen leeren Ordner entpacken.
Beachte dann die README.md. Die Kurzfassung ist: VSCode/NodeJS wird vorausgesetzt - das ist ein übliches Setup für Webprojekte. Führe zum Start folgendes in dem Ordner aus:

Bash:

npm install npm run dev

Falls sich der Browser nicht automatisch öffnet, dann findest do die URL in der Konsole.

Dann wünsche ich allen eine gute Besserung. Und dass es Ihr Hund heute gut übersteht. Habe nur eine Lehrseite im Browser. Bin vom Umfang dieser Datei erstmal erschlagen und überfordert im ersten Moment

Oneixee5 · 31. Dez 2024

kay86 hat gesagt.:
Dann wünsche ich allen eine gute Besserung. Und dass es Ihr Hund heute gut übersteht. Habe nur eine Lehrseite im Browser. Bin vom Umfang dieser Datei erstmal erschlagen und überfordert im ersten Moment

Danke!
Wir sind hier beim DU.
Mit F12 kommt man zu den Entwicklertools und kann sich mögliche Fehlermeldungen ansehen.

kay86 · 31. Dez 2024

Ich kann zwar in Visual Studio Ihre Datei öffnen und sehe die Baumstruktur und den Inhalt, aber Ihre Datei ist so umfangreich, dass ich noch keinen Plan habe. Bin gerade dabei, herauszufinden, wie ich eine Konsolenansicht bekomme. Habe bisher immer nur Onlineplattformen wie https://playcode.io/vue genutzt. Wal ich damit besser klar kamm

Oneixee5 · 31. Dez 2024

kay86 hat gesagt.:
Ich kann zwar in Visual Studio Ihre Datei öffnen und sehe die Baumstruktur und den Inhalt, aber Ihre Datei ist so umfangreich, dass ich noch keinen Plan habe. Bin gerade dabei, herauszufinden, wie ich eine Konsolenansicht bekomme. Habe bisher immer nur Onlineplattformen wie https://playcode.io/vue genutzt. Wal ich damit besser klar kamm

Im Menü: Neues Terminal

npm Install muss aufgerufen werden, wenn das Terminal auf den Pfad des Projektes steht

kay86 · 31. Dez 2024

Oneixee5 hat gesagt.:
Im Menü: Neues Terminal

npm Install muss aufgerufen werden, wenn das Terminal auf den Pfad des Projektes steht

so ich mache für heute Feierabend – bin ganz schön knülle heute.https://playcode.io/2208627

kay86 · 31. Dez 2024

Leider wird in der Konsole kein Inhalt von ihrer Fleiß Arbeit angezeigt.

kay86 · 31. Dez 2024

Anhang anzeigen 23364

kay86 · 1. Jan 2025

Ich habe es geschafft, Ihre Seite zu öffnen. Ich gehe mal davon aus, dass Sie das als Basis erstellt haben(Ausgangsposition). Um die Vue-Architektur darzustellen. Ich bin da schon etwas weiter, auch wenn es nicht der Vue-Architektur entspricht. Der Inhalt des Tooltips ist vollständig bei Ihnen, hat aber nicht die richtige Formatierung im Layout. Das war der Knackpunkt, wo ich gescheiter war, immer wieder bis ich zu CSS Lösung kam. Zum anderen hängten an dem Tooltip auch der Formular-Textinhalte sowie die Übersetzungsfunktion mit dran. Ich habe mir Mühe gegeben, ihren Empfehlungen zu folgen und sie umzusetzen.

https://playcode.io/2208327

Bildschirmfoto vom 2024-12-31 23-53-30.png

.

Bildschirmfoto vom 2025-01-01 00-22-11.png

Bildschirmfoto vom 2024-12-28 10-09-11.png

Am Ende meines Projekts will ich wieder dahin kommen, siehe Bilder.

Oneixee5 · 1. Jan 2025

Schön, dass du das Projekt starten konntest. Die Aufgabe war die Übersetzung, deshalb habe ich das Styling vernachlässigt. Das sollte aber kein großes Problem sein. Alle HTML-Standard-Attribute (auch: class und style) können überall verwendet werden - auch bei eigenen Components. Bei diesen werden die Attribute entsprechend durchgereicht.
Globale CSS-Klassen können in .../src/assets/main.css definiert werden, dabei befindet sich das Farbschema in .../src/assets/base.css. Man kann sich das auch etwas vereinfachen und nur main.css verwenden. Es ist aber empfehlenswert CSS-Variablen beizubehalten, da dadurch Änderungen vereinfacht werden.
Generell ist CSS aber um einiges komplexer als JavaScript oder Vue.

kay86 · 1. Jan 2025

Oneixee5 hat gesagt.:
Schön, dass du das Projekt starten konntest. Die Aufgabe war die Übersetzung, deshalb habe ich das Styling vernachlässigt. Das sollte aber kein großes Problem sein. Alle HTML-Standard-Attribute (auch: class und style) können überall verwendet werden - auch bei eigenen Components. Bei diesen werden die Attribute entsprechend durchgereicht.
Globale CSS-Klassen können in .../src/assets/main.css definiert werden, dabei befindet sich das Farbschema in .../src/assets/base.css. Man kann sich das auch etwas vereinfachen und nur main.css verwenden. Es ist aber empfehlenswert CSS-Variablen beizubehalten, da dadurch Änderungen vereinfacht werden.
Generell ist CSS aber um einiges komplexer als JavaScript oder Vue.

sorry, wenn ich eine blöde Frage, aber wie kann ich am besten Java, HTML, CSS aus meinem alten Projeckt überführen? Da hier die wichtigsten Funktionen und das Layout enthalten sind. Mir ist natürlich klar, dass eine Copy-Pace nicht funktioniert oder sinnvoll ist.

Oneixee5 · 1. Jan 2025

Du kannst die CSS nach assets kopieren und genauso einbinden wie die main.css eingebunden ist. Es wäre auch möglich nur die Inhalte in die main.css zu übertragen.
Nur die Datei css.css enthält wirklich CSS. Warum die anderen Dateien die Endung css haben ist mir nicht klar. Aus HTML und JS kannst du Components erstellen, welche deinem HTML entsprechen. Wenn Components kompiliert wurden, dann entsteht im Prinzip auch nichts anderes als optimiertes HTML, CSS und JS.

	Titel	Forum	Antworten	Datum
M	fetch - API - Probleme? JavaScript	Angular, React, JQuery - Fragen zu JavaScript	3	21. Dez 2023
M	JavaScript - Fetch Probleme	Angular, React, JQuery - Fragen zu JavaScript	0	20. Dez 2023
M	Fetch Probleme - JavaScript?	Angular, React, JQuery - Fragen zu JavaScript	1	19. Dez 2023
R	Probleme mit Angular \| Gängige Strukturen und Herangehensweisen	Angular, React, JQuery - Fragen zu JavaScript	3	17. Feb 2022
B	Probleme bei der Ausgabe eines Objektes.	Angular, React, JQuery - Fragen zu JavaScript	2	24. Nov 2021
P	Probleme beim Save Operator mit Bootstrap	Angular, React, JQuery - Fragen zu JavaScript	1	9. Jan 2021
Z	Timer Probleme	Angular, React, JQuery - Fragen zu JavaScript	3	21. Mai 2017
S	Probleme beifind method (window)	Angular, React, JQuery - Fragen zu JavaScript	1	3. Dez 2016
	Probleme mit onreadystatechange	Angular, React, JQuery - Fragen zu JavaScript	2	6. Nov 2015
N	Probleme, JavaScript anzupassen	Angular, React, JQuery - Fragen zu JavaScript	5	5. Sep 2010
V	Spritely - Probleme bei mehrzeiliger Bilddatei - momentaner Frame	Angular, React, JQuery - Fragen zu JavaScript	2	17. Jun 2010
O	Probleme mit Web Navigation!	Angular, React, JQuery - Fragen zu JavaScript	6	14. Mai 2009
P	Probleme mit Java Countdown	Angular, React, JQuery - Fragen zu JavaScript	4	6. Dez 2008
M	Probleme mit anzeige	Angular, React, JQuery - Fragen zu JavaScript	5	13. Feb 2008
B	Probleme mit einem JavaScript	Angular, React, JQuery - Fragen zu JavaScript	3	9. Jan 2007
M	probleme mit JavaScript programmierung	Angular, React, JQuery - Fragen zu JavaScript	2	20. Nov 2006
G	Probleme mit window.scrollTo(x, y);	Angular, React, JQuery - Fragen zu JavaScript	2	2. Dez 2005
	Probleme bei Cookies setzen	Angular, React, JQuery - Fragen zu JavaScript	2	27. Jul 2005
G	Probleme mit Voting-Skript	Angular, React, JQuery - Fragen zu JavaScript	2	3. Feb 2005
M	2 PopUps auf einer .htm...Probleme	Angular, React, JQuery - Fragen zu JavaScript	2	7. Mrz 2004
P	Probleme mit POPUP Window	Angular, React, JQuery - Fragen zu JavaScript	2	16. Dez 2003
P	Editor- mit javascript Sonderzeichen beim schreiben vorschlagen	Angular, React, JQuery - Fragen zu JavaScript	0	27. Mai 2021
C	Problem beim Laden des Saalplans	Angular, React, JQuery - Fragen zu JavaScript	5	19. Jun 2012
F	[S] Hilfe beim JavaScript auf Homepage	Angular, React, JQuery - Fragen zu JavaScript	4	20. Dez 2011
C	JavaScript aus Servlet starten beim IE9	Angular, React, JQuery - Fragen zu JavaScript	6	25. Mrz 2011
	Java Script, Problem beim staten	Angular, React, JQuery - Fragen zu JavaScript	22	17. Dez 2009
G	Problem beim Einbinden von JAVA-Dropdown-Menu	Angular, React, JQuery - Fragen zu JavaScript	7	22. Jul 2007
G	anderes KOntextMenü beim rechtsclick auf website!	Angular, React, JQuery - Fragen zu JavaScript	5	17. Dez 2004
D	kleines problemchen beim anfänger	Angular, React, JQuery - Fragen zu JavaScript	13	31. Aug 2004
J	Bild-Link in neuer Seite öffnen, die beim Klicken schließt	Angular, React, JQuery - Fragen zu JavaScript	4	22. Jul 2004
F	Browser-/OS-Abfrage beim Laden einer Internetseite	Angular, React, JQuery - Fragen zu JavaScript	3	8. Jul 2004
T	Alert Box beim window close --> totaler Noob	Angular, React, JQuery - Fragen zu JavaScript	4	27. Feb 2004

Probleme mit Übersetzungen beim Sprachwechsel in einer Webanwendung

Aktives Mitglied

Anhänge

Bekanntes Mitglied

Top Contributor

Aktives Mitglied

Oneixee5: Wie kann ich im Framework die Übersetzungsfunktion für mein Label der Eingabefelder und die Schrift der Buttons im HTML-Bereich mit einbeziehen in die Übersetzungsfunktion?​

Top Contributor

Aktives Mitglied

Top Contributor

Aktives Mitglied

Aktives Mitglied

Bekanntes Mitglied

Top Contributor

Top Contributor

Top Contributor

Aktives Mitglied

Aktives Mitglied

Top Contributor

Aktives Mitglied

Top Contributor

Aktives Mitglied

Top Contributor

Aktives Mitglied

Anhänge

Bekanntes Mitglied

Top Contributor

Aktives Mitglied

Top Contributor

Aktives Mitglied

Aktives Mitglied

Aktives Mitglied

Top Contributor

Aktives Mitglied

Top Contributor

Top Contributor

Aktives Mitglied

Aktives Mitglied

Top Contributor

Top Contributor

Aktives Mitglied

Aktives Mitglied

Top Contributor

Anhänge

Aktives Mitglied

Top Contributor

Aktives Mitglied

Top Contributor

Aktives Mitglied

Aktives Mitglied

Aktives Mitglied

Aktives Mitglied

Top Contributor

Aktives Mitglied

Anhänge

Top Contributor

Ähnliche Java Themen

Oneixee5: Wie kann ich im Framework die Übersetzungsfunktion für mein Label der Eingabefelder und die Schrift der Buttons im HTML-Bereich mit einbeziehen in die Übersetzungsfunktion?