0

Java Skript in Grid Container

Ich würde gerne mehr Details bei click auf den Grid Container anzeigen lassen. Bekomm es aber einfach nicht hin. Kann mir da einer von euch helfen?

An bei die DB aus dem Ursprung Beitrag von https://forum.ninox.de/t/q6hvnzc/html-tabellen

16 Antworten

null
    • Michi.1
    • vor 10 Monaten
    • Gemeldet - anzeigen
      • mirko3
      • vor 10 Monaten
      • Gemeldet - anzeigen

       Manchmal macht Wissen teilen glücklich ;-)

      • Michi.1
      • vor 10 Monaten
      • Gemeldet - anzeigen

      kommt natürlich sofort. Die test DB hab ich gelöscht, daher das ganze skript.

      let me := this;
      let cc := if 'Ort der Veranstaltung wählen' < 3 or 'Ort der Veranstaltung wählen' = 5 then
              text('Ort der Veranstaltung wählen')
          else
              if 'Ort der Veranstaltung wählen' = 3 then
                  Kunde.'Straße + Nr.' + "" + "/" + "" + Kunde.Ort
              else
                  if 'Ort der Veranstaltung wählen' = 4 then
                      Bezeichnung + "" + "/" + "" + 'Straße + Nr.' + "" + "/" + "" + Ort
                  end
              end
          end;
      let css := "
      <style>
      .grid-container {
          display:grid;
          /*hier kann die Spaltenanzahl festgelegt werden*/
          grid-template-columns:repeat(auto-fill, minmax(20em, 1fr));
          grid-gap:5px;
      }
      .gridFormat, .gridHeader, .gridHeader1{
          font-size:large;
          text-align:center;
          border-radius:.5em;
          padding:1em;
          box-shadow:4px -4px 7px DimGray inset;
          color:black;
      }
      .gridHeader {
          grid-column: 1 / -4;
          background:Silver;
          font-size:x-large;
      
      }
      .gridHeader1 {
          grid-column: 1 / -1;
          background:Silver;
          font-size:x-large;
      
      }
      .gridOne {background-color:#b0aac0;}
      .gridTwo {background-color:#ddeedd;}
      .gridThree {background-color:#c2d4dd;}
      .gridFour {background-color:#AD5C62;color:black;}
      
      table{
          width:100%;
      }
      .tableFixHead {
          overflow-y: auto;
             height: 378px;
            }
      .right {
          text-align: right
      }
      .center {
          text-align: center
      }
      th {
          font-size:small;
          padding: .5em .5em .5em .5em;
          border-radius: .5em .5em .5em .5em;
      }
      td{
          font-size:small;
          background-color: #ddeedd;
          padding: .1em .5em .1em .5em;
          text-align: center;
          border-radius: .5em .5em .5em .5em;
      }
      button{
          font-size:large;
          background-color:#AD5C62;color:black;
          padding: .1em .5em .1em .5em;
          text-align: center;
          border-radius: .5em .5em .5em .5em;
      }
      thead,tfoot{
            background-color:#ddeedd;
          position: sticky;
          font-size:small;
      }
      thead {
          top: -.2em;
          text-align:center;
      }
      tfoot{
            bottom: -.2em;
      }
      tr:nth-child(odd) td{ /*ungerade Zeile einfärben*/
            background-color: #b0aac0;
      }
      p {
          visibility: hidden
      }
      <meta name=viewport content=width=device-width, initial-scale=1>
      body {font-family: Arial, Helvetica, sans-serif;}
      /* The Modal (background) */
      .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 100px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
      }
      /* Modal Content */
      .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
      }
      /* The Close Button */
      .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
      }
      .close:hover,
      .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
      }
      
      </style>
      ";
      let content := "
      <aside class = 'grid-container'>
      <header class = 'gridHeader'><button onclick='myFunction()'>Bearbeitung wieder freigeben?</button>
      <p>" +
          Sichtbarkeit +
          "</p>
      <script>
      function myFunction() {
      let jnValue = document.querySelector('p').innerHTML;
      let idx = '" +
          raw(Nr) +
          "';
      if (jnValue === 'Nein') {
      database.update(idx, 'OD' , true)
      } else {
      database.update(idx, 'OD' , false)
      };
      }
      </script>  Veranstaltungsort: " +
          cc +
          "</header>
      <aside class = 'gridFormat gridTwo'> Dokument-Nr:<br><br><b>" +
          if 'Dokument Art wählen' = 1 then
              Angebotsnummer
          else
              if 'Dokument Art wählen' = 2 then
                  Rechnungsnummer
              end
          end +
          "</b></aside>
      <aside class = 'gridFormat gridTwo'> Kunde<br><br><b>" +
          Kunde.Firma +
          Kunde.Name +
          "</b></aside>
      <aside class = 'gridFormat gridTwo'> Dokument-Art<br><br><b>" +
          text('Dokument Art wählen') +
          "</b></aside>
      <aside class = 'gridFormat gridTwo'> Erwachsene / Kinder<br><br><b>" +
          Erwachsene +
          " / " +
          if 'Kinderzahl unter 12' = null then
              0
          else
              'Kinderzahl unter 12'
          end +
          "</b></aside>
      <aside class = 'gridFormat gridTwo'> Event-Art<br><br><b>" +
          'Bitte art der Feier oder Anlass eingeben.' +
          "</b></aside>
      <aside class = 'gridFormat gridTwo'> Beginn<br><br><b>" +
          text('Datum beginn') +
          " " +
          "-" +
          'Uhrzeit von' +
          "</b></aside>
      <aside class = 'gridFormat gridTwo'> Ende <br><br><b>" +
          text('Datum ende') +
          " " +
          "-" +
          'Uhrzeit bis' +
          "</b></aside>
      <aside class = 'gridFormat gridTwo'> Dokumenten-Datum <br><br><b>" +
          if 'Dokument Art wählen' = 1 then
              Angebotsdatum
          else
              if 'Dokument Art wählen' = 2 then
                  Rechnungsdatum
              end
          end +
          "</b></aside>
      <aside class = 'gridFormat gridThree'>Wert <br><br><b>" +
          'Brutto Gesamt' +
          "</b></aside>
      <aside class = 'gridFormat gridFour'> Buffet <br><br><b>" +
          "<table>" +
          for i in numbers('Buffet auswahl') do
              if record(Buffet,i).number(Nr) > 0 then
                  "<tr><td>" + record(Buffet,i).Position + "</td></tr>"
              end
          end +
          "</table>" +
          "</td></tr>" +
          "</b></aside>
      <aside class = 'gridFormat gridFour'> Buffet beilagen <br><br><b>" +
          "<table>" +
          for i in numbers('Buffet auswahl') do
              if record(Buffet,i).number(Nr) > 0 then
                  "<tr><td>" + record(Buffet,i).Position + "</td></tr>"
              end
          end +
          "</table>" +
          "</td></tr>" +
          "</b></aside>
      <aside class = 'gridFormat gridFour'> Salatbar <br><br><b>" +
          "<table>" +
          for i in numbers('Salatbar auswahl') do
              if record(Salatbar,i).number(Nr) > 0 then
                  "<tr><td>" + record(Salatbar,i).Position + "</td></tr>"
              end
          end +
          "</table>" +
          "</td></tr>" +
          "</b></aside>
      <aside class = 'gridFormat gridFour'> Snack`s <br><br><b>" +
          "<table>" +
          for i in numbers('Snack auswahl') do
              if record(Snacks,i).number(Nr) > 0 then
                  "<tr><td>" + record(Snacks,i).Position + "</td></tr>"
              end
          end +
          "</table>" +
          "</td></tr>" +
          "</b></aside>
      <aside class = 'gridFormat gridFour'> Dessert <br><br><b>" +
          "<table>" +
          for i in numbers('Dessert auswahl') do
              if record(Dessert,i).number(Nr) > 0 then
                  "<tr><td>" + record(Dessert,i).Position + "</td></tr>"
              end
          end +
          "</table>" +
          "</td></tr>" +
          "</b></aside>
      <aside class = 'gridFormat gridFour'> Getränke <br><br><b>" +
          "<table>" +
          for i in numbers('Getränke wählen') do
              if record('Getränke',i).number(Nr) > 0 then
                  "<tr><td>" + record('Getränke',i).Position + "</td></tr>"
              end
          end +
          "</table>" +
          "</td></tr>" +
          "</b></aside>
      <header class = 'gridFormat gridTwo gridHeader1'><!-- Trigger/Open The Modal -->
      <button id= myBtn >Rechnungspositionen anzeigen</button>
      <!-- The Modal -->
      <aside id= myModal class= modal>
        <!-- Modal content -->
        <aside class= modal-content>
          <span class=close>&times;</span>
      <table ><thead>
              <tr>
                  <th> POS.</th>
                  <th> Leistung </th>
                  <th> Menge </th>
                  <th> Einzelpreis </th>
                  <th> netto gesamt </th>
                  <th> brutto gesamt </th>
              </tr>
          </thead><tbody>
      <script>
      // Get the modal
      var modal = document.getElementById('myModal');
      // Get the button that opens the modal
      var btn = document.getElementById('myBtn');
      // Get the <span> element that closes the modal
      var span = document.getElementsByClassName('close')[0];
      // When the user clicks the button, open the modal
      btn.onclick = function() {
        modal.style.display = 'block';
      }
      // When the user clicks on <span> (x), close the modal
      span.onclick = function() {
        modal.style.display = 'none';
      }
      // When the user clicks anywhere outside of the modal, close it
      window.onclick = function(event) {
        if (event.target == modal) {
          modal.style.display = 'none';
        }
      }
      </script>";
      let mitte := if 'Datum beginn' then
              let AA := (Rechnungspositionen order by number('Pos.'));
              for aa in AA do
                  "<tr>
                  <td  style=background-color:>" +
                  aa.text('Pos.') +
                  " </td>
              <td  style=background-color:>" +
                  aa.Leistungsbeschreibung +
                  " </td>
              <td  style=background-color:>" +
                  aa.Menge +
                  " </td>
                  <td  style=background-color:>" +
                  aa.'Netto preis pro einheit' +
                  " </td>
                  <td  style=background-color:>" +
                  aa.'Netto gesamt' +
                  " </td>
               <td  style=background-color:>" +
                  aa.'Brutto gesamt' +
                  " </td>
      
              </tr>"
              end
          end +
          "</header>";
      html(css + content + mitte)
      
      • Rafael_Sanchis
      • vor 10 Monaten
      • Gemeldet - anzeigen

      Hi, To much for me 😞 if a test database. great work Michi.

    • Michi.1
    • vor 10 Monaten
    • Gemeldet - anzeigen

    Um Platz zu sparen wollte ich die Container noch drehen, das drehen klappt zwar, aber ich bekomme kein "2." Container auf die Rückseite der Karte. Da wird der Container nur gedreht und spiegelverkehrt angezeigt.

    Das Skript dazu ist hier: 

    https://www.w3schools.com/howto/howto_css_flip_card.asp

     

    eine test db muss ich erst erstellen, das wird vor Montag nichts.

    • Michi.1
    • vor 10 Monaten
    • Gemeldet - anzeigen

    Anbei die DB. Vielleicht kann mir der Schwarm bei 2 Dingen in der DB helfen. Das eine ist die Vorlage für Carbone.... hier bekomme ich den Umbruch nicht "ausgeblendet"

    Das 2. ist im Dashboard das Verhalten von java... sobald man die Sperre  wieder entfernt, funktioniert das Skript nicht mehr.

      • Rafael_Sanchis
      • vor 10 Monaten
      • Gemeldet - anzeigen

       Thanks Michi appreciate 👍

      • Michi.1
      • vor 10 Monaten
      • Gemeldet - anzeigen

      Teilen macht glücklich, aber kannst du mir eventuell helfen bei den 2 verbliebenen Problemen? Ok 3 😁 

      Das sich überlagernde Java Skript bekomme ich nicht gelöst, auch nicht wenn ich die Variablen umbenenne. Es gehen nie beide gleichzeitig, eines tut an irgendeiner Stelle nie was es soll. Auch bekomme ich das dmulti nicht über den änderungstricker beim Datum beginn gefüllt. Ninox mag einfach text(year(Datum beginn) oder auch ohne text akzeptieren. Beim Monat klappt das ohne Probleme.

      Am ende ist dann noch das Dokument was einfach den Seiten bzw. Absatz Umbruch nicht ausblenden mag, sondern nur den Text, was zu leer Seiten führt. Da hatte ich schon mal mit getextet... bin aber noch nicht dahinter gekommen warum nicht.

      Aber vielleicht hilft ja die test DB, hab in liebevoller kleinarbeit versucht alles raus zu machen was nicht interessiert bzw. Private daten enthält ohne den Charakter der DB zu verlieren.

       Möglichst alles über ein Dashboard steuern ohne in sich in Tabellen zu verlieren.

      Danke Michi

      • Michi.1
      • vor 10 Monaten
      • Gemeldet - anzeigen

      Ach so.. fast vergessen, über "<form> könnte man doch eigentlich schöne und vor allem übersichtliche " Eingabe Masken " erstellen und die Felder in ninox über die id füllen. Bekom das aber nicht zum laufen. Ist das überhaupt möglich mit ninox?

    • Rafael_Sanchis
    • vor 10 Monaten
    • Gemeldet - anzeigen

    little by little I'm learning something

    • Rafael_Sanchis
    • vor 10 Monaten
    • Gemeldet - anzeigen

    Michi

    Hi Michi, I Place a Rafael Datum 06.09.2023 and place Sonntag  ? Your Muster and Hogo is OK.

    Something about this

     

    But on the other picture is OK 

      • Michi.1
      • vor 10 Monaten
      • Gemeldet - anzeigen

      Bitte ändere number zu date . Möchtest du die Wochentage in einer anderen Sprache haben, so ändere das Land.

      Zeile 48 und Zeile 60  :   .....  weekdayName(date(k), "de")

      let myYearsItem := {};
      for i in (select Jahr) order by Jahr do
          setItem(myYearsItem, i.Jahr, number(i.Nr))
      end;
      let me := this;
      let y := Jahr;
      let m := Monat;
      let myObject := do as server
              ((select Dashboard) order by 'Datum beginn').{
                  nid: raw(Nr),
                  name: Kunde.Firma + Kunde.Name,
                  art: 'Bitte art der Feier oder Anlass eingeben.',
                  ort: text('Ort der Veranstaltung wählen'),
                  Pers: "Erwachsene: " + Erwachsene + " / " + "Kinder: " + 'Kinderzahl unter 12',
                  wert: 'Brutto Gesamt',
                  anzahl: "",
                  dateNumber: join(for i in range(days('Datum beginn', 'Datum ende') + 1) do
                      let myDate := date(year('Datum beginn'), month('Datum beginn'), day('Datum beginn') + i);
                      if (not y or chosen(me.Jahr, number(item(myYearsItem, text(year(myDate)))))) and
                          (not m or chosen(me.Monat, number(month(myDate)))) then
                          text(number(myDate))
                      end
                  end, "<br>"),
                  date: join(for i in range(days('Datum beginn', 'Datum ende') + 1) do
                      let myDate := date(year('Datum beginn'), month('Datum beginn'), day('Datum beginn') + i);
                      if (not y or chosen(me.Jahr, number(item(myYearsItem, text(year(myDate)))))) and
                          (not m or chosen(me.Monat, number(month(myDate)))) then
                          format(myDate, "DD.MM.YYYY")
                      end
                  end, "<br>")
              }
          end;
      myObject := myObject[date];
      let datesArray := split(join(myObject.text(dateNumber), "<br>"), "<br>");
      let datesOb := for i in datesArray do
              {
                  dateNumber: i
              }
          end;
      let dubles := {};
      for i in unique(datesArray) do
          if cnt(datesOb[text(dateNumber) = text(i)]) > 1 then
              setItem(dubles, text(i), 1)
          end
      end;
      for i in myObject do
          let newTag := join(for k in split(text(i.dateNumber), "<br>") do
                  weekdayName(date(k), "de") +
                  if item(dubles, text(k)) then
                      " " + "➔"
                  else
                      ""
                  end
              end, "<br>");
          let newEvent := join(for k in split(text(i.dateNumber), "<br>") do
                  let myItem := number(item(dubles, text(k)));
                  if myItem then
                      myItem := myItem + 1;
                      setItem(dubles, text(k), myItem);
                      "event " + (myItem - 1) + " am " + weekdayName(date(k), "de") + " " +
                      format(date(number(k)), "DD.MM.YYYY")
                  else
                      ""
                  end
              end, "<br>");
          setItem(i, "tag", newTag);
          setItem(i, "event", newEvent);
          debug(formatJSON(dubles))
      end;
      
      • Rafael_Sanchis
      • vor 10 Monaten
      • Gemeldet - anzeigen

       Hi Again

      The problem is other, the 06.09.2023 is not Sonntag is Wednesday.

      • Michi.1
      • vor 10 Monaten
      • Gemeldet - anzeigen

      daher bitte das Skript ändern, hier war ein kleiner Fehler enthalten.

      • Rafael_Sanchis
      • vor 10 Monaten
      • Gemeldet - anzeigen

       Thanks Michi.

      One Question Michi, you use Global Function in your DB ?, I try to use and adap the search on the Aufträge/Kunden Table. 

      Thanks you and sorry for the inconvenience.

      • Michi.1
      • vor 10 Monaten
      • Gemeldet - anzeigen

      Hier wird nur nach Öffnen der Datenbank nach leeren Datensätzen bei den DMULTI Tabellen gesucht und falls vorhanden gelöscht.

Content aside

  • Status Answered
  • vor 10 MonatenZuletzt aktiv
  • 16Antworten
  • 245Ansichten
  • 4 Folge bereits