css/design40/manual/form-elements-special.html

   1 <!DOCTYPE html>
   2 <html lang="de">
   3 <head>
   4   <meta charset="utf-8" />
   5   <link href="../style.css" rel="stylesheet">
   6
   7   <script type="text/javascript" src="../../js/jquery.js"></script>
   8   <script type="text/javascript" src="../../js/common.js"></script>
   9   <script type="text/javascript" src="../../js/namespace.js"></script>
  10   <script type="text/javascript" src="../../js/kivi.js"></script>
  11   <script type="text/javascript" src="../../js/locale/de.js"></script>
  12   <script type="text/javascript" src="../../js/jquery-ui.js"></script>
  13   <script type="text/javascript" src="../../js/kivi.QuickSearch.js"></script>
  14   <script type="text/javascript" src="../../js/kivi.ActionBar.js"></script>
  15   <script type="text/javascript" src="../../js/kivi.Draft.js"></script>
  16   <script type="text/javascript" src="../../js/kivi.File.js"></script>
  17   <script type="text/javascript" src="../../js/kivi.SalesPurchase.js"></script>
  18   <script type="text/javascript" src="../../js/kivi.Part.js"></script>
  19   <script type="text/javascript" src="../../js/ckeditor/ckeditor.js"></script>
  20   <script type="text/javascript" src="../../js/ckeditor/adapters/jquery.js"></script>
  21   <script type="text/javascript" src="../../js/kivi.io.js"></script>
  22   <script type="text/javascript" src="../../js/autocomplete_customer.js"></script>
  23   <script type="text/javascript" src="../../js/client_js.js"></script>
  24   <script type="text/javascript" src="../../js/jquery.cookie.js"></script>
  25   <script type="text/javascript" src="../../js/jquery.checkall.js"></script>
  26   <script type="text/javascript" src="../../js/jquery.download.js"></script>
  27   <script type="text/javascript" src="../../js/jquery/jquery.form.js"></script>
  28   <script type="text/javascript" src="../../js/jquery/fixes.js"></script>
  29   <script type="text/javascript" src="../../js/jquery/jquery.tooltipster.min.js"></script>
  30   <script type="text/javascript" src="../../js/jquery/ui/i18n/jquery.ui.datepicker-de.js"></script>
  31   <script type="text/javascript" src="../../js/jquery.multiselect2side.js"></script>
  32   <script type="text/javascript" src="../../js/jquery.selectboxes.js"></script>
  33
  34   <title>Spezielle Formular-Elemente</title>
  35 </head>
  36 <body class="developing">
  37 <header>
  38   <h1>Spezielle Formular-Elemente</h1>
  39   <nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav>
  40 </header>
  41 <form action="#">
  42
  43 <div class="wrapper">
  44
  45
  46 <div class="col">
  47 <h2>ms2side (.ms2side / MultiSelect2Side)</h2>
  48
  49 <div class="ms2side">
  50   <p>Folgende Elemente können einer Gruppe zugeordnet werden:</p>
  51   <!-- vormals:.clearfix -->
  52   <select name="group_usersms2side__orig" multiple="" id="group_users" style="display: none;">
  53     <option value="2">Element 2</option>
  54     <option value="1">Element 1</option>
  55   </select>
  56   <script type="text/javascript">
  57     $().ready(function() {
  58       $('#group_users').multiselect2side({ moveOptions: false, labeldx: "Gruppenmitglieder", labelsx: "Alle BenutzerInnen" });
  59     });
  60   </script>
  61   <div class="ms2side__div">
  62     <div class="ms2side__select">
  63       <div class="ms2side__header">
  64         Alle verfügbaren Elemente
  65       </div>
  66       <select title="Alle BenutzerInnen" name="group_usersms2side__sx" id="group_usersms2side__sx" size="undefined" multiple="multiple">
  67         <option value="2">Element 2</option>
  68         <option value="1">Element 1</option>
  69       </select>
  70     </div>
  71     <div class="ms2side__options" style="padding-top: 7.333333492279053px;">
  72       <p class="AddOne ms2side__hide" title="Add Selected">›</p>
  73       <p class="AddAll" title="Add All">»</p>
  74       <p class="RemoveOne ms2side__hide" title="Remove Selected">‹</p>
  75       <p class="RemoveAll ms2side__hide" title="Remove All">«</p>
  76     </div>
  77     <div class="ms2side__select">
  78       <div class="ms2side__header">
  79         Zugeordnete Elemente
  80       </div>
  81       <select title="Gruppenmitglieder" name="group_usersms2side__dx" id="group_usersms2side__dx" size="undefined" multiple="multiple">
  82       </select>
  83     </div>
  84     <span id="group_usersms2side_hidden" style="display: none;"></span>
  85   </div>
  86   <script type="text/javascript">
  87     $().ready(function() {
  88       $('#group_clients').multiselect2side({ moveOptions: false, labeldx: "Mandanten, für die diese Gruppe gültig ist", labelsx: "Alle Mandanten" });
  89     });
  90   </script>
  91
  92 </div>
  93
  94 <div class="buttons">
  95   <a class="button neutral" href="#">Zurück</a>
  96   <input value="Speichern" type="button">
  97 </div>
  98
  99 </div>
 100
 101
 102
 103 <div class="col wi-wide">
 104 <h2>Boxes (.boxes)</h2>
 105 <div class="boxes">
 106   <h3 title="Select/Deselect all"><input title="Select/Deselect" value="1" name="dummy1" type="checkbox" id="dummy1">
 107     <label for="dummy1">Überschrift (Select all)</label>
 108     <script type="text/javascript">$('#dummy1').checkall('.checkallgroup1');</script>
 109   </h3>
 110   <div>
 111     <input value="1" class="checkallgroup1" id="group_rights_map_customer_vendor_edit" name="group.rights_map.customer_vendor_edit" type="checkbox">
 112     <label for="group_rights_map_customer_vendor_edit">Option 1</label>
 113   </div>
 114   <div>
 115     <input value="1" id="group_rights_map_customer_vendor_all_edit" class="checkallgroup1" name="group.rights_map.customer_vendor_all_edit" type="checkbox">
 116     <label for="group_rights_map_customer_vendor_all_edit">Option 2</label>
 117   </div>
 118   <div>
 119     <input value="1" name="group.rights_map.part_service_assembly_edit" id="group_rights_map_part_service_assembly_edit" type="checkbox" class="checkallgroup1">
 120     <label for="group_rights_map_part_service_assembly_edit">Option 3</label>
 121   </div>
 122   <div>
 123     <input value="1" name="group.rights_map.part_service_assembly_details" id="group_rights_map_part_service_assembly_details" class="checkallgroup1" type="checkbox">
 124     <label for="group_rights_map_part_service_assembly_details">Option 4</label>
 125   </div>
 126   <div>
 127     <input value="1" id="group_rights_map_project_edit" type="checkbox" name="group.rights_map.project_edit" class="checkallgroup1">
 128     <label for="group_rights_map_project_edit">Option 4</label>
 129   </div>
 130 </div>
 131 </div>
 132
 133
 134 </div><!-- /.wrapper -->
 135
 136
 137
 138 <div class="form-addition">
 139   <h3 class="h4">In Bericht aufnehmen</h3>
 140   <div class="list col">
 141     <h4> Numbers &amp; IDs </h4>
 142     <div>
 143       <input name="l_id" id="l_id" type="checkbox" value="Y">
 144       <label for="l_id"> Buchungsnummer </label>
 145     </div>
 146     <div>
 147       <input name="l_customernumber" id="l_customernumber" type="checkbox" value="Y" checked="">
 148       <label for="l_customernumber"> Kundennummer </label>
 149     </div>
 150     <div>
 151       <input name="l_taxnumber" id="l_taxnumber" type="checkbox" value="Y">
 152       <label for="l_taxnumber"> Steuernummer </label>
 153     </div>
 154     <div>
 155       <input name="l_invnumber" id="l_invnumber" type="checkbox" value="Y">
 156       <label for="l_invnumber"> Rechnungen </label>
 157     </div>
 158   </div>
 159   <div class="list col">
 160     <h4> Kunde </h4>
 161     <div>
 162       <input name="l_name" id="l_name" type="checkbox" value="Y" checked="">
 163       <label for="l_name"> Kundenname </label>
 164     </div>
 165     <div>
 166       <input name="l_contact" id="l_contact" type="checkbox" value="Y" checked="">
 167       <label for="l_contact"> Kontakt </label>
 168     </div>
 169   </div>
 170   <div class="list col">
 171     <h4> Adresse </h4>
 172     <div>
 173       <input name="l_street" id="l_street" type="checkbox" value="Y" checked="">
 174       <label for="l_street"> Straße </label>
 175     </div>
 176     <div>
 177       <input name="l_zipcode" id="l_zipcode" type="checkbox" value="Y" checked="">
 178       <label for="l_zipcode"> PLZ </label>
 179     </div>
 180     <div>
 181       <input name="l_city" id="l_city" type="checkbox" value="Y" checked="">
 182       <label for="l_city"> Stadt </label>
 183     </div>
 184     <div>
 185       <input name="l_country" id="l_country" type="checkbox" value="Y" checked="">
 186       <label for="l_country"> Land </label>
 187     </div>
 188     <div>
 189       <input name="l_gln" id="l_gln" type="checkbox" value="Y" checked="">
 190       <label for="l_gln"> GLN </label>
 191     </div>
 192   </div>
 193   <div class="list col">
 194     <h4> Benutzerdefinierte Variablen </h4>
 195 <!-- PENDENT: bessere Loesung suchen -->
 196     <input type="checkbox" name="l_cvar_Geburtsdatum" id="l_cvar_Geburtsdatum" value="Y">
 197     <label for="l_cvar_Geburtsdatum">Geburtsdatum</label>
 198   </div>
 199 </div>
 200
 201
 202 <div class="wrapper">
 203   <div class="filter_toggle" style="display: block;">
 204     <a href="#" onclick="javascript:$('.filter_toggle').toggle()" class="button toggle off neutral">Filter zeigen</a>
 205   </div>
 206   <div class="filter_toggle" style="display: none;">
 207     <a href="#" onclick="javascript:$('.filter_toggle').toggle()" class="button toggle on neutral with-panel">Filter verbergen</a>
 208 <!-- PENDENT: Panel einbauen -->
 209     <div class="filter-toggle-panel">
 210       <table id="filter_table" class="tbl-horizontal">
 211         <caption>Ware</caption>
 212         <tbody>
 213           <tr>
 214             <th>Beschreibung</th>
 215             <td><input value="" name="filter.name:substr::ilike" type="text" id="filter_name_substr_ilike" class="wi-normal" size="20">
 216             </td>
 217           </tr>
 218           <tr>
 219             <th>Typ</th>
 220             <td>
 221             <select name="filter.type" id="price_rule_filter_type" class="wi-normal">
 222               <option value=""></option>
 223               <option value="customer">Preisregeln (Verkauf)</option>
 224               <option value="vendor">Preisregeln (Einkauf)</option>
 225             </select>
 226             </td>
 227           </tr>
 228           <tr>
 229             <th>Ware</th>
 230             <td><span class="part_picker"><input data-part-picker-data="{'class':'wi-normal'}" value="" name="filter.item_type_matches[].part" id="filter_item_type_matches5719277_part" type="hidden" class="wi-normal part_autocomplete">
 231             <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input value="" name="" type="text" class="wi-normal ui-autocomplete-input" id="filter_item_type_matches5719277_part_name" autocomplete="off">
 232             <span class="ppp_popup_button"></span></span></td>
 233           </tr>
 234           <tr>
 235             <th>Warengruppe</th>
 236             <td>
 237             <select name="filter.item_type_matches[].partsgroup" id="filter_item_type_matches5719278_partsgroup" class="wi-normal">
 238               <option value=""></option>
 239               <option value="447">Computer Occasion</option>
 240               <option value="448">Hardwareteile Occasion</option>
 241               <option value="449">Computer neu</option>
 242               <option value="450">Hardwareteile neu</option>
 243               <option value="451">Peripheriegeräte neu</option>
 244               <option value="452">Peripheriegeräte Occasion</option>
 245               <option value="528">Dienstleistung</option>
 246               <option value="594">Lizenzgebühren</option>
 247               <option value="635">Zubehör</option>
 248               <option value="681">Verbrauchsmaterial</option>
 249               <option value="920">Geldbetraege</option>
 250               <option value="13376">0Kundengerät</option>
 251               <option value="27265">Dienstleistung (Stunden)</option>
 252             </select>
 253             </td>
 254           </tr>
 255           <tr>
 256             <th>Menge</th>
 257             <td><input value="" name="filter.item_type_matches[].qty" type="text" id="filter_item_type_matches5719279_qty" class="wi-normal">
 258             </td>
 259           </tr>
 260           <tr id="price_rule_filter_customer_tr" style="display:none">
 261             <th>Kunde</th>
 262             <td><span class="customer_vendor_picker"><input value="" name="filter.item_type_matches[].customer" id="price_rule_filter_customer" type="hidden" class="wi-normal customer_vendor_autocomplete" data-customer-vendor-picker-data="{'type':'customer','class':'wi-normal'}">
 263             <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input value="" name="" class="wi-normal ui-autocomplete-input" type="customer" id="price_rule_filter_customer_name" autocomplete="off">
 264             </span></td>
 265           </tr>
 266           <tr id="price_rule_filter_vendor_tr" style="display:none">
 267 <!-- PENDENT: Korrekt mit customer? -->
 268             <th>Lieferant</th>
 269             <td><span class="customer_vendor_picker"><input value="" name="filter.item_type_matches[].vendor" id="price_rule_filter_vendor" type="hidden" class="wi-normal customer_vendor_autocomplete" data-customer-vendor-picker-data="{'type':'vendor','class':'wi-normal'}">
 270             <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input value="" name="" class="wi-normal ui-autocomplete-input" type="vendor" id="price_rule_filter_vendor_name" autocomplete="off">
 271             </span></td>
 272           </tr>
 273           <tr>
 274             <th>Kunden-/Lieferantentyp</th>
 275             <td>
 276             <select name="filter.item_type_matches[].business" id="filter_item_type_matches5719280_business" class="wi-normal">
 277               <option value=""></option>
 278               <option value="23353">LehrerInnen</option>
 279               <option value="23347">IT-Firma</option>
 280               <option value="41723">Behörde</option>
 281               <option value="158">Firma</option>
 282               <option value="157">Privatperson</option>
 283             </select>
 284             </td>
 285           </tr>
 286         </tbody>
 287       </table>
 288       <table id="filter_table" class="tbl-horizontal">
 289         <caption>Dates</caption>
 290         <tbody>
 291           <tr>
 292             <th>Liefertermin</th>
 293             <td><input value="" name="filter.item_type_matches[].reqdate" type="text" class="datepicker wi-date hasDatepicker" id="filter_item_type_matches5719281_reqdate" data-validate="date" size="11">
 294             <img class="ui-datepicker-trigger" src="image/calendar.png" alt="..." title="..."></td>
 295           </tr>
 296           <tr>
 297             <th>Buchungsdatum Beleg</th>
 298             <td><input value="" name="filter.item_type_matches[].transdate" type="text" class="datepicker wi-date hasDatepicker" id="filter_item_type_matches5719282_transdate" data-validate="date" size="11">
 299             <img class="ui-datepicker-trigger" src="image/calendar.png" alt="..." title="..."></td>
 300           </tr>
 301           <tr>
 302             <th class="caption" colspan="2">Prices &amp; Discounts</th>
 303           </tr>
 304           <tr>
 305             <th>Preisgruppe</th>
 306             <td>
 307             <select name="filter.item_type_matches[].pricegroup" id="filter_item_type_matches5719283_pricegroup" class="wi-normal">
 308               <option value=""></option>
 309               <option value="0">keine Preisgruppe</option>
 310               <option value="27267">50 CHF pro Stunde</option>
 311               <option value="27268">100 CHF pro Stunde</option>
 312             </select>
 313             <br>
 314             </td>
 315           </tr>
 316           <tr>
 317             <th>Preis</th>
 318             <td><input value="" name="filter.price:number" type="text" id="filter_price_number" class="wi-normal" size="20">
 319             </td>
 320           </tr>
 321           <tr>
 322             <th>Abschlag</th>
 323             <td><input value="" name="filter.reduction:number" type="text" id="filter_reduction_number" class="wi-normal" size="20">
 324             </td>
 325           </tr>
 326           <tr>
 327             <th>Rabatt</th>
 328             <td><input value="" name="filter.discount:number" type="text" id="filter_discount_number" class="wi-normal" size="20">
 329             </td>
 330           </tr>
 331           <tr>
 332             <th class="caption" colspan="2">Status</th>
 333           </tr>
 334           <tr>
 335             <th>Priorität</th>
 336             <td>
 337             <select name="filter.priority" id="filter_priority" class="wi-normal">
 338               <option value="" selected="">Alle</option>
 339               <option value="3">Normal</option>
 340               <option value="4">Override</option>
 341             </select>
 342             </td>
 343           </tr>
 344           <tr>
 345             <th>Ungültig</th>
 346             <td>
 347             <select name="filter.obsolete" id="filter_obsolete" class="wi-normal">
 348               <option value="">Beide</option>
 349               <option value="0" selected="">Gültig</option>
 350               <option value="1">Ungültig</option>
 351             </select>
 352             </td>
 353           </tr>
 354         </tbody>
 355       </table>
 356       <div class="col list">
 357         <h3 class="caption">Hat Regeltypen</h3>
 358         <div>
 359           <input value="part" name="filter.has_item_type[]" id="filter_has_item_type5719284" type="checkbox">
 360           <label for="filter_has_item_type5719284">Ware</label>
 361           <br>
 362           <input value="customer" name="filter.has_item_type[]" id="filter_has_item_type5719285" type="checkbox">
 363           <label for="filter_has_item_type5719285">Kunde</label>
 364           <br>
 365           <input value="vendor" name="filter.has_item_type[]" id="filter_has_item_type5719286" type="checkbox">
 366           <label for="filter_has_item_type5719286">Lieferant</label>
 367           <br>
 368           <input value="business" name="filter.has_item_type[]" id="filter_has_item_type5719287" type="checkbox">
 369           <label for="filter_has_item_type5719287">Kunden-/Lieferantentyp</label>
 370           <br>
 371           <input value="partsgroup" name="filter.has_item_type[]" id="filter_has_item_type5719288" type="checkbox">
 372           <label for="filter_has_item_type5719288">Warengruppe</label>
 373           <br>
 374           <input value="qty" name="filter.has_item_type[]" id="filter_has_item_type5719289" type="checkbox">
 375           <label for="filter_has_item_type5719289">Menge</label>
 376           <br>
 377           <input value="reqdate" name="filter.has_item_type[]" id="filter_has_item_type5719290" type="checkbox">
 378           <label for="filter_has_item_type5719290">Liefertermin</label>
 379           <br>
 380           <input value="transdate" name="filter.has_item_type[]" id="filter_has_item_type5719291" type="checkbox">
 381           <label for="filter_has_item_type5719291">Buchungsdatum</label>
 382           <br>
 383           <input value="pricegroup" name="filter.has_item_type[]" id="filter_has_item_type5719292" type="checkbox">
 384           <label for="filter_has_item_type5719292">Preisgruppe</label>
 385           <br>
 386         </div>
 387       </div>
 388       <input value="name" name="sort_by" id="sort_by" type="hidden">
 389       <input value="0" name="sort_dir" id="sort_dir" type="hidden">
 390       <input value="1" name="page" id="page" type="hidden">
 391       <div class="buttons">
 392         <input value="Reset Filter" class="neutral" type="reset" onclick="$('#search_form').resetForm()">
 393       </div>
 394     </div>
 395 <!-- /.filter-toggle-panel -->
 396   </div>
 397 <!-- /.filter_toggle -->
 398 </div>
 399
 400
 401
 402
 403
 404 </form>
 405 </body>
 406 </html>