[ SKETCHUP plugins ] Attribut_rapport : Rapport quantitatif et estimatif d'un modèle dans Excel

Je vais voir si en remplaçant les valeurs par défaut directement par la valeurs calculée si je peux m'affranchir du redraw! et voir si cela fait gagner du temps du coup il fut que je face un boite de dialogue pour saisir directement les valeurs de prix unitaire de nom . c'est même plus pratique pour du traitement de lot !
Je rajoute à la todo !

Par contre si le composant est définit avant c'est plus rapide les instances copiées en profite

Bonsoir Simon

Simple vérification : tu utilises bien le

Code:

Sketchup.active_model.start_operation

quand tu fais des traitements par lot ?

Hello
Oui mon cher maitre et un commit à la fin

Code:


model = Sketchup.active_model
#On indique le début de l'opération pour une éventuelle annulation
model.start_operation('créer attribut', true,true,false)


Code:


   status = model.commit_operation
   if status == true
       UI.messagebox('7 Attributs créés',MB_OK)
   end
end


Hello
Je bloque sur le javascript pour une boite de dialoque qui afficherai les attributs rapport pour chaque éléments de la sélection.

J'ai créer des fonctions javascript mais elles ne semblent pas être reconnu comme définit
je pense que c'est la syntaxe de l'enchainement de la définition des  fonctions qui bug.

Le concept j'itère chaque instances sélectionnées
je créer un json des valeurs par défault

j'ai passé le json en valeur d'une variable javascript via ruby
les inputs du formulaire reçoivent en dure les valeurs par ruby

je veux qu'en je clic sur le bouton suivant changer les valeurs des inputs avec les valeurs de l'enregistrement suivant.
les valeurs initiales ne sont pas chargées correctement après le chargement de la boite de dialogue.
avec les outils de développement on voit bien que ruby à écrit en dure le json dans le script

J'ai aussi une fonction qui recalcule le sous total âpres changement des qtt ou du prix unitaire.
quand dan le script elle est seul cela fonctionne mais pas avec les autres fonctions

mais là j'ai rien qui fonctionne


​[/code]



Voila le code de mon module
si une âme charitable genre @Samuel peux y jeter un œil ! voir les deux !

merci
Juste le code su script

Code:


# Préparation du code JS (syntaxe HEREDOC).
            js = <<-JS
            
               
               
               

                  // Mise en place d'un espace de noms pour éviter les conflits...
                  SimJoubert = {}

                  /**
                   * Renvoie les valeurs saisies.
                   *
                   * @returns {object}
                   */
                  SimJoubert.obtenirValeursSaisies = () => {

                        var valeursSaisies = [];
                        
                        // Pour chaque élément HTML de type input :
                        var numenr = getElementById("attribut_rapport").elements["num"].value
                        document.querySelectorAll('input,select,textarea').forEach(elementInput => {
                              valeursSaisies[numenr].elementInput.name = elementInput.value
                        })

                        return valeursSaisies

                  }

                  // Gestion des évènements.

                  // Dès que le document HTML est chargé :
                  document.addEventListener('DOMContentLoaded', _evenement => {
                        
                        // Declaration des variables
                        var numenr = 0;
                        var values_json = #{default_values_json};
                        var article, commentaire, poste, fournisseur, qtt, unite, prixunitaire, soustotal, id, num, num_max;
                                                
                        // Lors d'un clic sur le bouton APPLIQUER :
                        document.getElementById('bt_appliquer').addEventListener('click', _evenement => {

                              // On appelle le callback défini en Ruby un peu plus bas...
                              sketchup.enregistrerValeursSaisies(SimJoubert.obtenirValeursSaisies())

                        })

                        // Lors d'un clic sur le bouton RESET :
                        document.getElementById('bt_reset').addEventListener('click', _evenement => {

                              // On appelle le callback défini en Ruby un peu plus bas...
                              sketchup.effacerValeursSaisies()

                        })

                        // Lors d'un clic sur le bouton ANNULER :
                        document.getElementById('bt_annuler').addEventListener('click', _evenement => {

                              // On appelle le callback défini en Ruby un peu plus bas...
                              sketchup.annuler()

                        })
                        
                        //Lors d'un clic sur le Bouton Next
                        document.getElementById('bt_next').addEventListener('click', fonctionNext()
                        {
                           // on incremente la variable numenr
                           numenr = numenr + 1;
                           
                           // On extrait du tableau values_json les valeurs de l'enregistrement
                           article = values_json[numenr].article;
                           commentaire = values_json[numenr].commentaire.;
                           poste = values_json[numenr].poste;
                           fournisseur = values_json[numenr].fournisseur;
                           qtt = values_json[numenr].qtt;
                           unite = values_json[numenr].unite;
                           prixunitaire = values_json[numenr].prixunitaire;
                           soustotal = parseFloat(qtt)*parseFloat(prixunitaire);
                           id = values_json[numenr].id;
                           num = values_json[numenr].num;
                           num_max = values_json[numenr].num_max;
                           
                           //on change les valeurs des inputs
                           document.getElementById("attribut_rapport").elements["ra_1_article"].value = article;
                           document.getElementById("attribut_rapport").elements["ra_1_commentaire"].value = commentaire;
                           document.getElementById("attribut_rapport").elements["ra_1_fournisseur"].value = fournisseur;
                           document.getElementById("attribut_rapport").elements["ra_1_poste"].value = poste;
                           document.getElementById("attribut_rapport").elements["ra_4_qtt"].value = qtt;
                           document.getElementById("attribut_rapport").elements["ra_4_unite"].value = unite;
                           document.getElementById("attribut_rapport").elements["ra_5_prixunitaire"].value = prixunitaire;
                           document.getElementById("attribut_rapport").elements["ra_6_soustotal"].value = soustotal;
                        })
                        
                        //Lors du changement de valeur de qtt
                        document.getElementById('ra_4_qtt').addEventListener('onchange',  _evenement =>{
                           //   Mise à jour du sous total
                           document.getElementById("attribut_rapport").elements["ra_6_soustotal"].value = parseFloat(document.getElementById("attribut_rapport").elements["ra_4_qtt"].value) * parseFloat(document.getElementById("attribut_rapport").elements["ra_5_prixunitaire"].value);
                        })
                        //Lors du changement de valeur de prix unitaire
                        document.getElementById('ra_5_prixunitaire').addEventListener('onchange',  _evenement =>{
                           //   Mise à jour du sous total
                           document.getElementById("attribut_rapport").elements["ra_6_soustotal"].value = parseFloat(document.getElementById("attribut_rapport").elements["ra_4_qtt"].value) * parseFloat(document.getElementById("attribut_rapport").elements["ra_5_prixunitaire"].value);
                        })
                  })

            JS


Le code complet

Code:


# encoding: UTF-8
#
# file "sj_attribut_rapport/DiagAttribut.rb"

module SimJoubert
  module AttributRapport
    module DiagAttribut

      #include SharedConstants # mixin the constant module
         DCDICT = "dynamic_attributes"
         extend self

         def self.diag_attribut_quantite_cmd
            model = Sketchup::active_model
            
            #Preparation des listes déroulantes pour les elements select du formulaire

            fournisseurs_liste = model.get_attribute('AttributRapport', 'fournisseurs',"")
            fournisseurs_liste_array = fournisseurs_liste.split("|")
            fournisseurs_liste_option = fournisseurs_liste_array.map {|a|'<option value="'+a+'">'+a+'</option>'}.join('\n')
                  
            postes_liste = model.get_attribute('AttributRapport', 'postes',"")
            postes_liste_array = postes_liste.split("|")
            postes_liste_option = postes_liste_array.map {|a|'<option value="'+a+'">'+a+'</option>'}.join('\n')
                  
            unites_liste = 'u|h|ft|m|m²|m³|l|t|'
            unites_liste_array = unites_liste.split('|')
            unites_liste_option = unites_liste_array.map {|a|'<option value="' + a + '">' + a + '</option>'}.join('\n')
            
            #Definition de l'url de l'icone pour le css
            urlico = Sketchup.find_support_file("Unite.svg", "Plugins/sj_attribut_rapport/Toolbar Icons/")
            
            #Initialistation des variables de boucle
            i_max = model.selection.grep(Sketchup::ComponentInstance).count
            i = 0
            default_values = []
            
            #Itération sur chaques instances de composants sélectionnées
            model.selection.grep(Sketchup::ComponentInstance){ |inst|
            
               #On récupère la définition de l'instance
                     inst_d = inst.definition
                     
                     #On récupère l'identifiant unique de l'instance il ne change jamais
                     id = inst.guid
                     
                     # sauf si l'attribut est abscent de l'instance
                     unless inst.get_attribute(DCDICT,"ra_1_poste",false)
                     #on prend celui de la définition
                        poste = inst_d.get_attribute(DCDICT,"ra_1_poste","")
                     else
                     #sinon celui de l'instance
                        poste = inst.get_attribute(DCDICT,"ra_1_poste","")
                     end
                     
                     unless inst.get_attribute(DCDICT,"ra_1_article",false)
                        unless inst_d.get_attribute(DCDICT,"ra_1_article",false)
                           inst_d_name =inst_d.name
                           inst_d_name_a = inst_d_name.split(/#/)
                           article = inst_d_name_a[0]
                        else
                           article = inst_d.get_attribute(DCDICT,"ra_1_article","")
                        end
                     else
                        article = inst.get_attribute(DCDICT,"ra_1_article","")
                     end
                     
                     unless inst.get_attribute(DCDICT,"ra_4_qtt",false)
                        qtt = inst_d.get_attribute(DCDICT,"ra_4_qtt",1.0)
                     else
                        qtt = inst.get_attribute(DCDICT,"ra_4_qtt",1.0)
                     end
                     
                     unless inst.get_attribute(DCDICT,"ra_4_unite",false)
                        unite = inst_d.get_attribute(DCDICT,"ra_4_unite","u")
                     else
                        unite = inst.get_attribute(DCDICT,"ra_4_unite","u")
                     end
                     
                     unless inst.get_attribute(DCDICT,"ra_5_prix_unitaire",false)
                        unless inst_d.get_attribute(DCDICT,"ra_5_prix_unitaire",false)
                           prix_unitaire = inst_d.get_attribute("SU_DefinitionSet", "Price", 0)
                        else
                           prix_unitaire = inst_d.get_attribute(DCDICT,"ra_5_prix_unitaire",0.0)
                        end
                     else
                        prix_unitaire = inst.get_attribute(DCDICT,"ra_5_prix_unitaire",0.0)
                     end
                     
                     unless inst.get_attribute(DCDICT,"ra_5_sous_total",false)
                        sous_total = inst_d.get_attribute(DCDICT,"ra_5_sous_total",0.0)
                     else
                        sous_total = inst.get_attribute(DCDICT,"ra_5_sous_total",0.0)
                     end
                     
                     unless inst.get_attribute(DCDICT,"ra_1_fournisseur",false)
                        fournisseur = inst_d.get_attribute(DCDICT,"ra_1_fournisseur","")
                     else
                        fournisseur = inst.get_attribute(DCDICT,"ra_1_fournisseur","")
                     end
                     
                     unless inst.get_attribute(DCDICT,"ra_1_commentaire",false)
                        commentaire = inst_d.get_attribute(DCDICT,"ra_1_commentaire","")
                     else
                        commentaire = inst.get_attribute(DCDICT,"ra_1_commentaire","")
                     end
                  
                     #On ajoute la ligne numéro i au tableau default_values
                     default_values[i] = {
                        'num_max': i_max,
                        'num': i.to_i + 1,
                        'id': id,
                        'article': article,
                        'commentaire': commentaire,
                        'fournisseur': fournisseur,
                        'poste': poste,
                        'qtt': qtt,
                        'unite': unite,
                        'prixunitaire': prix_unitaire,
                        'soustotal': qtt.to_f * prix_unitaire.to_f
                        }
                     
                     #On incrémente le compteur i
                     i += 1
                     
                  }#fin de l'itération des instances
                  
               i = 0
               #On transforme le tableau en tableau JSON
               default_values_json = JSON.generate(default_values)
               
               
            # Les valeurs saisies seront stockées là.
            entered_values = []

            # Préparation du code CSS (syntaxe HEREDOC).
            css = <<-CSS

            body{
               font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif
               }
               
            .main{
               background-color: #0E649B;
               background-image: url("#{urlico}");
               background-repeat: no-repeat;
               background-position: 3%;
               background-size: 15% 15%;
               padding: 10px 0px 10px 10px;
               text-align: right
            }
            
            h1{
               text-align: center;
               color: #FFFFFF;
               font-size: 24px;
               margin-left: 25%
            }
            
            h1>span{
               color: #F35E06
            }
            
            .textGras{
               font-weight: bold;
               font-size : 16px
            }
            
            form{  
               margin-left: 25%;
               margin-right: 0px;
               text-align: left    
            }
            
            label,input,textarea,select{
               width: 100%;
               padding: 5 5 5 5;
            }
            .inputhalf{
               width: 40%
            }
            
            label{
               font-size: 12px;
               padding: 5 0 5 0;
               font-style: italic
            }
            
            input[name='ra_6_soustotal'],input[name='ra_5_prixunitaire'],input[name='ra_4_qtt']{
               text-align: right
            }
            
            input::placehoder{
               text-align: left;
               color: #065FD8
            }
            
            input[name='ra_6_soustotal']{
               font-size: 24px;
               font-style: italic;
               background-color: #666666;
               color: #FC5103
            }
            
            #data{
               background-color: #7CBCE5;
               margin-bottom: 30px;
               margin-right: 0px;
               padding: 20px
            }
            
            #bt_reset{
               background-color: #FFFFFF;
               border: none
            }
            #bt_appliquer{
               background-color: #EFD423;
               border: none
            }
            
            .desactive{
               font-style: italic;
               background-color: #63729a;
               color: #89a5f7
            }
            
            .invisible{
               display: none
            }

            CSS

            # Préparation du code JS (syntaxe HEREDOC).
            js = <<-JS
            
               
               
               

                  // Mise en place d'un espace de noms pour éviter les conflits...
                  SimJoubert = {}

                  /**
                   * Renvoie les valeurs saisies.
                   *
                   * @returns {object}
                   */
                  SimJoubert.obtenirValeursSaisies = () => {

                        var valeursSaisies = [];
                        
                        // Pour chaque élément HTML de type input :
                        var numenr = getElementById("attribut_rapport").elements["num"].value
                        document.querySelectorAll('input,select,textarea').forEach(elementInput => {
                              valeursSaisies[numenr].elementInput.name = elementInput.value
                        })

                        return valeursSaisies

                  }

                  // Gestion des évènements.

                  // Dès que le document HTML est chargé :
                  document.addEventListener('DOMContentLoaded', _evenement => {
                        
                        // Declaration des variables
                        var numenr = 0;
                        var values_json = #{default_values_json};
                        var article, commentaire, poste, fournisseur, qtt, unite, prixunitaire, soustotal, id, num, num_max;
                                                
                        // Lors d'un clic sur le bouton APPLIQUER :
                        document.getElementById('bt_appliquer').addEventListener('click', _evenement => {

                              // On appelle le callback défini en Ruby un peu plus bas...
                              sketchup.enregistrerValeursSaisies(SimJoubert.obtenirValeursSaisies())

                        })

                        // Lors d'un clic sur le bouton RESET :
                        document.getElementById('bt_reset').addEventListener('click', _evenement => {

                              // On appelle le callback défini en Ruby un peu plus bas...
                              sketchup.effacerValeursSaisies()

                        })

                        // Lors d'un clic sur le bouton ANNULER :
                        document.getElementById('bt_annuler').addEventListener('click', _evenement => {

                              // On appelle le callback défini en Ruby un peu plus bas...
                              sketchup.annuler()

                        })
                        
                        //Lors d'un clic sur le Bouton Next
                        document.getElementById('bt_next').addEventListener('click', fonctionNext()
                        {
                           // on incremente la variable numenr
                           numenr = numenr + 1;
                           
                           // On extrait du tableau values_json les valeurs de l'enregistrement
                           article = values_json[numenr].article;
                           commentaire = values_json[numenr].commentaire.;
                           poste = values_json[numenr].poste;
                           fournisseur = values_json[numenr].fournisseur;
                           qtt = values_json[numenr].qtt;
                           unite = values_json[numenr].unite;
                           prixunitaire = values_json[numenr].prixunitaire;
                           soustotal = parseFloat(qtt)*parseFloat(prixunitaire);
                           id = values_json[numenr].id;
                           num = values_json[numenr].num;
                           num_max = values_json[numenr].num_max;
                           
                           //on change les valeurs des inputs
                           document.getElementById("attribut_rapport").elements["ra_1_article"].value = article;
                           document.getElementById("attribut_rapport").elements["ra_1_commentaire"].value = commentaire;
                           document.getElementById("attribut_rapport").elements["ra_1_fournisseur"].value = fournisseur;
                           document.getElementById("attribut_rapport").elements["ra_1_poste"].value = poste;
                           document.getElementById("attribut_rapport").elements["ra_4_qtt"].value = qtt;
                           document.getElementById("attribut_rapport").elements["ra_4_unite"].value = unite;
                           document.getElementById("attribut_rapport").elements["ra_5_prixunitaire"].value = prixunitaire;
                           document.getElementById("attribut_rapport").elements["ra_6_soustotal"].value = soustotal;
                        })
                        
                        //Lors du changement de valeur de qtt
                        document.getElementById('ra_4_qtt').addEventListener('onchange',  _evenement =>{
                           //   Mise à jour du sous total
                           document.getElementById("attribut_rapport").elements["ra_6_soustotal"].value = parseFloat(document.getElementById("attribut_rapport").elements["ra_4_qtt"].value) * parseFloat(document.getElementById("attribut_rapport").elements["ra_5_prixunitaire"].value);
                        })
                        //Lors du changement de valeur de prix unitaire
                        document.getElementById('ra_5_prixunitaire').addEventListener('onchange',  _evenement =>{
                           //   Mise à jour du sous total
                           document.getElementById("attribut_rapport").elements["ra_6_soustotal"].value = parseFloat(document.getElementById("attribut_rapport").elements["ra_4_qtt"].value) * parseFloat(document.getElementById("attribut_rapport").elements["ra_5_prixunitaire"].value);
                        })
                  })

            JS

            # Préparation du code HTML (syntaxe HEREDOC).
            html = <<-HTML
               <html>

                  <head>
                     <meta charset="utf-8">
                     <!-- Le CSS est inclus dans le HTML -->
                     <style>#{css}</style>

                     <!-- Le JS aussi -->
                     <script>#{js}</script>
                  </head>

                  <body>
                     
                     <div class="main">
                        <h1>Attribut <span>Rapport</span></h1>
                     
                        <form id="attribut_rapport">
                           <table width="100%" border="0" cellspacing="0" cellpadding="5" id="data">
                              <tbody>
                                 <tr>
                                    <td colspan="4">
                                       <input type="number" id="num" name="num" value="#{default_values[i][:num]} class="inputhalf">
                                       <input type="number" id="num_max" name="num_max" value="#{default_values[i][:num_max]} class="inputhalf">
                                    </td>
                                 </tr>
                                 
                                 <tr>
                                    <td colspan="4">
                                       <label>Article</label>
                                       <input type="text" name="ra_1_article" placeholder="Nom d'article" value="#{default_values[i][:article]}" class="textGras">
                                    </td>
                                 </tr>
                                 <tr>
                                    <td colspan="4" >
                                       <label>Commentaire</label>
                                       <textarea name="ra_commentaire" placeholder="Saississez un commentaire">#{default_values[i][:commentaire]}</textarea>
                                    </td>
                                 </tr>
                                 <tr>
                                    <td colspan="4" >
                                       <label>Fournisseur</label>
                                       <select name="ra_1_fournisseur" placeholder="Selectionnez un fournisseur existant" value="#{default_values[i][:fournisseur]}">
                                          #{fournisseurs_liste_option}
                                       </select>      
                                    </td>
                                 </tr>
                                 <tr>    
                                    <td colspan="4">
                                       <label>Poste</label>
                                       <select name="ra_1_poste"  placeholder="Selectionnez un poste existant"  value="#{default_values[i][:poste]}">
                                             #{postes_liste_option}
                                       </select>                  
                                    </td>
                                 </tr>  
                                 <tr>
                                    <td width="30%">
                                       <label>Quantité</label>
                                       <input type="text" id="ra_4_qtt" name="ra_4_qtt" placeholder="Quantité d'article" value="#{default_values[i][:qtt]}">
                                    </td>
                                    <td width="25%">
                                       <label>Unité</label>
                                       <select name="ra_4_unite" value="#{default_values[i][:unite]}">
                                          #{unites_liste_option}
                                       </select>
                                    </td>
                                    <td>
                                       <label>Prix unitaire</label>
                                       <input type="text" id="ra_5_prixunitaire" name="ra_5_prixunitaire" placeholder="Prix unitaire" value="#{default_values[i][:prixunitaire]}">
                                    </td>
                                     <td><br>€</td>
                                 </tr>
                                 <tr>
                                     <td colspan="3"> </td>
                                 </tr>
                                 <tr>
                                    <td>
                                       <label>Sous total</label>
                                    </td>
                                    <td colspan="2">
                                       <input id="ra_6_soustotal" name="ra_6_soustotal" type="text"   readonly="readonly" value="#{default_values[i][:soustotal]}">
                                    </td>
                                    <td>€</td>
                                 </tr>
                              </tbody>
                           </table>
                           
                           <table width="100%" border="0" cellspacing="10" cellpadding="0">
                              <tbody>    
                                 <tr>
                                    <td><input type="button" name="first" value="|<" id="bt_first"></td>
                                    <td><input type="button" name="previous" value="<" id="bt_previous"></td>
                                    <td><input type="text" name="position" value="#{default_values[i][:num]} / #{default_values[i][:num_max]}" id="position"></td>
                                    <td><input type="button" name="next" value=">" id="bt_next"></td>
                                    <td><input type="button" name="last" value=">|" id="bt_last"></td>
                                 </tr>
                              </tbody>
                           </table>

                           
                           <table width="100%" border="0" cellspacing="10" cellpadding="0">
                              <tbody>    
                                 <tr>      
                                    <td><input type="button" name="reset" value="RESET" id="bt_reset"></td>
                                    <td><input type="button" name="annuler" value="ANNULER" id="bt_annuler"></td>
                                    <td><input name="appliquer" type="button" id="bt_appliquer" value="APPLIQUER"></td>
                                 </tr>
                              </tbody>
                           </table>    
                        </form>  
                     </div>  
                  </body>
               </html>
            HTML

            # Initialisation de la boîte de dialogue.
            dialog = UI::HtmlDialog.new(

               dialog_title: "Dialog Example",
               preferences_key: "my_name_my_extension_my_dialog",
               scrollable: false,
               resizable: false,
               width: 520,
               height: 800,
               left: 100,
               top: 100,
               min_width: 520,
               min_height: 690,
               max_width: 1000,
               max_height: 1000,
               style: UI::HtmlDialog::STYLE_DIALOG

            )

            # Paramétrage de la boîte de dialogue.

            dialog.add_action_callback('enregistrerValeursSaisies') do |_contexte, valeurs_saisies|

               # Enregistrement des valeurs saisies.
               entered_values = valeurs_saisies

               # Fermeture de la boîte de dialogue.
               dialog.close

               # Affichage des valeurs saisies.
               UI.messagebox(entered_values)

            end

            dialog.add_action_callback('effacerValeursSaisies') do |_contexte|

               # Effacement des valeurs saisies.
               entered_values = {}
            end
      
          dialog.add_action_callback('annuler') do |_contexte|

               # Effacement des valeurs saisies.
               entered_values = {}

               # Fermeture de la boîte de dialogue.
               dialog.close

            end

            # Remplissage de la boîte de dialogue.
            dialog.set_html(html)

            # Affichage de la boîte de dialogue.
            dialog.show

      
         end




    end#fin sous module
  end#fin module plugin
end#fin module espace de nom


Bonjour Simon,

Je viens de regarder ton code. J'ai plusieurs remarques :

- L'indentation n'est pas bonne. Ca complique la relecture.

- Dans le code Ruby/HTML, tu utilises la variable i.

Code:


html = <<-HTML
...
<input type="number" id="num" name="num" value="#{default_values[i][:num]}" width="40%">
...


Ne devrais-tu pas forcer l'index à 0 vu que les données suivantes sont chargées en JS ?

Code:


html = <<-HTML
...
<input type="number" id="num" name="num" value="#{default_values[0][:num]}" width="40%">
...


- Concernant le code JS : je te conseille de déclarer tes variables globales et tes fonctions dans ton espace de noms. Ca pourrait t'éviter des conflits de noms ou un problème de portée de variable.

Code:


// Déclaration des variables.
SimJoubert.numenr = 0
...
// Déclaration des fonctions.
SimJoubert.fonctionNext = () => {
...
SimJoubert.numenr = SimJoubert.numenr + 1
...
}


- Toujours concernant le code JS, il y a une erreur de syntaxe ici.

Code:


// document.getElementById('ra_4_qtt').addEventListener('onchange', calculerSousTotal())
document.getElementById('ra_4_qtt').addEventListener('change', _evenement => { calculerSousTotal() })


Bon courage !

Merci Samuel
je vais essayer de compiler tes conseils et corrections !
Ne pars pas trop loin !

Il doit y avoir encore des coquilles
j'ai mis les variables et les fonctions dans l'espace de nom mais c'est comme au mastermind bonne forme mauvaise place ou mauvaise syntaxe
En l'état rien ne fonctionne
j'ai changé le i en 0 pour la définition initiale des valeurs. le formulaire s'ouvre mais aucun évenement n'est pris en compte.
l'appel des fonctions doit être sous la forme espacedenom.nomfonction() ou seulement nomfonction() ?
à quel endroit precis je doit faire mes déclaration de variable et de fonction ?
Merci

*code modifié mais non fonctionnel:

Code:

        # Préparation du code JS (syntaxe HEREDOC).
        js = <<-JS
       
         
         
         

            // Mise en place d'un espace de noms pour éviter les conflits...
            SimJoubert = {}
                     

            /**
            * Renvoie les valeurs saisies.
            *
            * @returns {object}
            */
            SimJoubert.obtenirValeursSaisies = () => {

                var valeursSaisies = [];
               
                // Pour chaque élément HTML de type input :
                var numenr = getElementById("attribut_rapport").elements["num"].value;
                document.querySelectorAll('input,select,textarea').forEach(elementInput => {
                    valeursSaisies[numenr].elementInput.name = elementInput.value
                })

                return valeursSaisies

            }

            // Gestion des évènements.

            // Dès que le document HTML est chargé :
            document.addEventListener('DOMContentLoaded', _evenement => {
               
              // Declaration des variables
              SimJoubert.numenr = 0;
              SimJoubert.values_json = #{default_values_json};
           
              //Declaration des fonctions
             
              //Mise à jour du sous total
              SimJoubert.calculerSousTotal = () => {             
              document.getElementById("attribut_rapport").elements["ra_6_soustotal"].value = parseFloat(document.getElementById("attribut_rapport").elements["ra_4_qtt"].value) * parseFloat(document.getElementById("attribut_rapport").elements["ra_5_prixunitaire"].value);
              }
                         
              SimJoubert.Next = () => {
              // on incremente la variable numenr
                numenr = numenr + 1;
               
                // On extrait du tableau values_json les valeurs de l'enregistrement
                article = values_json[numenr].article;
                commentaire = values_json[numenr].commentaire.;
                poste = values_json[numenr].poste;
                fournisseur = values_json[numenr].fournisseur;
                qtt = values_json[numenr].qtt;
                unite = values_json[numenr].unite;
                prixunitaire = values_json[numenr].prixunitaire;
                soustotal = parseFloat(qtt)*parseFloat(prixunitaire);
                id = values_json[numenr].id;
                num = values_json[numenr].num;
                num_max = values_json[numenr].num_max;
               
                //on change les valeurs des inputs
                document.getElementById("attribut_rapport").elements["ra_1_article"].value = article;
                document.getElementById("attribut_rapport").elements["ra_1_commentaire"].value = commentaire;
                document.getElementById("attribut_rapport").elements["ra_1_fournisseur"].value = fournisseur;
                document.getElementById("attribut_rapport").elements["ra_1_poste"].value = poste;
                document.getElementById("attribut_rapport").elements["ra_4_qtt"].value = qtt;
                document.getElementById("attribut_rapport").elements["ra_4_unite"].value = unite;
                document.getElementById("attribut_rapport").elements["ra_5_prixunitaire"].value = prixunitaire;
                document.getElementById("attribut_rapport").elements["ra_6_soustotal"].value = soustotal;
              }
                               
                // Lors d'un clic sur le bouton APPLIQUER :
                document.getElementById('bt_appliquer').addEventListener('click', _evenement => {

                    // On appelle le callback défini en Ruby un peu plus bas...
                    sketchup.enregistrerValeursSaisies(SimJoubert.obtenirValeursSaisies())

                })

                // Lors d'un clic sur le bouton RESET :
                document.getElementById('bt_reset').addEventListener('click', _evenement => {

                    // On appelle le callback défini en Ruby un peu plus bas...
                    sketchup.effacerValeursSaisies()

                })

                // Lors d'un clic sur le bouton ANNULER :
                document.getElementById('bt_annuler').addEventListener('click', _evenement => {

                    // On appelle le callback défini en Ruby un peu plus bas...
                    sketchup.annuler()

                })
               
                //Lors d'un clic sur le Bouton Next
                document.getElementById('bt_next').addEventListener('click', _evenement =>{ SimJoubert.Next() })
               
                //Lors du changement de valeur de qtt
                document.getElementById('ra_4_qtt').addEventListener('change',  _evenement =>{ SimJoubert.calculerSousTotal() })
               
                //Lors du changement de valeur de prix unitaire
                document.getElementById('ra_5_prixunitaire').addEventListener('change',  _evenement =>{ SimJoubert.calculerSousTotal() })
               
            })

        JS

simjoubert a écrit:à quel endroit precis je doit faire mes déclaration de variable et de fonction ?

Je te conseille de déclarer tes variables et fonctions juste après la mise en place de ton espace de noms.

simjoubert a écrit:l'appel des fonctions doit être sous la forme espacedenom.nomfonction() ou seulement nomfonction() ?

Code:


EspaceDeNoms.nomFonction()


Attention ! Regarde bien le corps de ta fonction SimJoubert.Next. Il manque l'espace de noms SimJoubert avant les variables numenr et values_json...

EUREKA !
après avoir trouvé un point après "commentaire" que je prenais pour une saleté sur mes lunettes!
Après avoir rajouté var devant la création de l'espace de nom !
après avoir rajouter le préfixe de l'espace de nom sur toutes les variables!
après avoir redémarrer 150 Sketchup!
J'ai enfin les enregistrement qui sont chargés en javascript instantanément en provenance du Json.  

Je suis en train de rajouter précédent 1er et dernier pour la navigation
Prochaine étape
récupérer la saisie dans la variable qui initialise le formulaire au changement d'enregistrement si on veux revenir en arrière.
Puis la sortie pour l'enregistrement dans le dictionnaire de sketchup !

On lâche rien !

Merci Samuel

Je code avec Notepad++ c'est suffisant mais j'ai pas la coloration syntaxique à l'intérieur des Heredocs !

Il y a une astuce de vieux sioux pour l'obtenir ?
Sinon il y a une alternative à notepad++ qui rendrait les heredoc digest ?

J'utilise VSCode depuis quelques mois et j'en suis plutôt satisfait. Il a l'avantage indéniable d'être gratuit Il gère la coloration syntaxique dans les blocs heredoc, je crois... J'avoue ne pas avoir fait attention à ça.

J'attends la prochaine version pour voir s'il y a eu de l'amélioration question vitesse / nombre de composants à traiter!

Hello Pilou
Tu sera pas déçu !
On fait dans l’instantané, maintenant !
Plus de latences dues aux redraw de chaque instances !
Je calcule en amont avant d’injecter l’attribut!

Je finis ma boîte de dialogue JavaScript
Je fais 3 tests et je vous soumets
Il pleut moins donc peut-être ce week-end ou avant si je suis insomniaque ‍

Samuel Tallet-Sabathé a écrit:J'utilise VSCode depuis quelques mois et j'en suis plutôt satisfait. Il a l'avantage indéniable d'être gratuit Il gère la coloration syntaxique dans les blocs heredoc, je crois... J'avoue ne pas avoir fait attention à ça.

VS CODE = Visualstudio Code ?
j'ai installé visual studio code c'est top! Les heredocs ont leurs syntaxes colorées ! c'est vraiment plus lisible ! Et la lumière fut !

Hello @Samuel Tallet-Sabathé
J'avance bien avec le javascript

Mais j'arrive pas à appliquer un readOnly conditionnel à un input
j'ai tester plusieurs possibilité mais je n'y arrive pas sauf si c'est codé en dur

Code:


// On modifie l'état de modification de la valeur de qtt selon le type
                  if (seltype == "Quantité") {
                     document.getElementById("ra_4_unite").removeAttribute("readonly");
                  } else {
                     document.getElementById("ra_4_unite").setAttribute("readonly", true);
                  }


un petit coup de main

Laisse tombé je ciblais le mauvis input depuis tout à l'heure c'est en relisant le poste  !
c'etait ra_4_qtt et non ra_4_unite
Bonne couleur, mauvaise place !

Hello
J'ai plus de mal à avancé sur le plugin car je suis en mode chantier !
je m’endors devant mon pc  !

Ce soir je suis sur un événement on clic d'un bouton htm.
le but du bouton est de copier la valeur d'un attribut à l'ensemble de la sélection via une boite de dialogue.

addEventListner

Code:

//Lors dun clic sur le Bouton copie article
                         document.getElementById('bt_copy_article').addEventListener('click', _evenement =>{
                            var valeur = document.getElementById('ra_1_article').value;
                            var attribut = 'article';
                            SimJoubert.copyAttribut(attribut, valeur);
                        })

le souci vient de la variable attribut c'est une string
et dans la fonction il faudrait que la string soit interprétée sans les quotes ! car c'est pour se substituer à une clef de hashage
j'essaye de faire une fonction générique pour alléger le code sinon je ferai une fonction pour chaque bouton copie d'attribut.

code de la fonction

Code:

SimJoubert.copyAttribut = (attribut, valeur) => {
                        var imax = SimJoubert.numenrMax;
                        var i = 0
                      
                        while (i <= imax) {
                            
                        SimJoubert.values_saisies[i].attribut = valeur ;
                        i = i+1
                        }


                    }

Bonne nuit les amis !

Je veux bien un petit coup de pouce !

Bon je crois avoir finalement trouvé
j'ai remplacer la syntaxe par point par la syntaxe entre crochet

Code:

SimJoubert.copyAttribut = (attribut, valeur) => {
                        var imax = SimJoubert.numenrMax;
                        var i = 0
                     
                        while (i <= imax) {
                           
                        SimJoubert.values_saisies[i][attribut] = valeur ;
                        i = i+1
                        }


                    }

Javascript est intransigeant ! il faut être vigilant et bien réveillé !