/** * Online Ersatzteil Bestellsystem * by Sven Wegerhoff * */ Ext.onReady(function(){ Ext.get("laden").hide(); Ext.QuickTips.init(); /* * kleine func um bei dem onRender evt einen tooltip * an das jeweilige Textfeld anzuhängen. * Beispiel: * items: { * xtype: "textfield", * name: 'artnr', * anchor: '95%', * id: 'artnr', * fieldLabel: "Artikelnummer oder Name", * labelStyle: 'cursor: help;', * tooltipTitle: 'tooltip title', * tooltipText: 'tooltip text', * listeners: { * render: setFormFieldTooltip * } * } * */ function setFormFieldTooltip(component){ var txtField = Ext.get(component.id); Ext.QuickTips.register({ target: txtField, text: component.tooltipText, title: component.tooltipTitle, dismissDelay: 0, autoDismissDelay: 25000, frame: true }); } /* * Euro Geld Format */ Ext.util.Format.euroMoney = function(v) { v = (Math.round((v-0)*100))/100; v = (v == Math.floor(v)) ? v + ".00" : ((v*10 == Math.floor(v*10)) ? v + "0" : v); return (v + ' €').replace(/\./, ','); // aus Punkt ein Komma machen }; /* * Feld Validations Nachrichten immer _UNTER_ * dem jeweiligen Feld anzeigen */ Ext.form.Field.prototype.msgTarget = 'under'; /* * Costum Renderer für die Aufbauanleitungen * eines Artikels */ function manualLinkRenderer(val) { if (val != null) { if (val.indexOf('NONE')>0) { return '-'; } else { return ' ' + 'Aufbauanleitung'; } } return val; } // Datastore fuer die Artikelauswahl artikel_ds = new Ext.data.Store({ proxy : new Ext.data.HttpProxy({ url : 'http://grasekamp-intern.com/ersatzteilbestellung/connectors/getArticles.php' }), reader : new Ext.data.JsonReader({ root : 'results', totalProperty : 'total' }, [{ name : 'artnr' },{ name : 'bez' },{ name : 'manual' }]) }); // Datastore fuer die Ersatzteilauswahl eteil_ds = new Ext.data.Store({ proxy : new Ext.data.HttpProxy({ url : 'http://grasekamp-intern.com/ersatzteilbestellung/connectors/getSpareparts.php' }), reader : new Ext.data.JsonReader({ root : 'results', totalProperty : 'total' }, [{ name : 'eteilname' },{ name : 'preis' },{ name : 'menge' },{ name : 'spedition' }]) }); /* * Grid fuer die Artikelsuche: */ var artikelgrid = new Ext.grid.GridPanel({ store: artikel_ds, region: 'center', split: true, id: 'artikelgrid', autoExpandColumn: 'bez', loadMask: true, columns: [ new Ext.grid.RowNumberer(), { id : 'artnr', header : "Artikelnummer", dataIndex : 'artnr', sortable : true, width: 40 },{ id : 'bez', header : "Bezeichnung", dataIndex : 'bez', sortable : true },{ id : 'manual', header : "Aufbauanleitung", dataIndex : 'manual', renderer: manualLinkRenderer } ], viewConfig:{ forceFit: true }, sm: new Ext.grid.RowSelectionModel({ singleSelect: true }) }); // Der Übernehmen Button ist schlecht zu sehen, desshalb mit einem // kleinem Effekt etwas die Aufmerksamkeit erhöhen. artikelgrid.on('rowclick', function(){ Ext.getCmp('card-next').getEl().frame('#117711', 1); }); /* * Grid fuer die Ersatzteilauswahl: */ var ersatzteilgrid = new Ext.grid.EditorGridPanel({ store: eteil_ds, region: 'center', id: 'eteilgrid', clicksToEdit:1, loadMask: true, autoExpandColumn: 'eteilname', columns: [ new Ext.grid.RowNumberer(), { id : 'eteilname', header : "Ersatzteil Name", dataIndex : 'eteilname', sortable : true },{ id : 'preis', header : "Preis", dataIndex : 'preis', sortable : true, renderer: 'euroMoney' },{ id : 'menge', header : "gewüschte Menge", dataIndex : 'menge', editor: new Ext.form.ComboBox({ typeAhead: true, triggerAction: 'all', lazyRender:true, listClass: 'x-combo-list-small', store: [0,1,2,3,4,5,6,7,8,9,10] }) } ], viewConfig: { forceFit: true }, sm: new Ext.grid.RowSelectionModel({ singleSelect: true }) }); /* * Highlight 'Weiter' Button da er recht schlecht zu sehen ist */ ersatzteilgrid.getSelectionModel().on('rowselect', function(){ Ext.getCmp('card-next').getEl().frame('#117711', 1); }); /* * Suchform, eingabe nur Artikelnummer oder Name */ var artikelsuche_form = new Ext.FormPanel({ labelAlign: 'top', frame:true, region: 'north', monitorValid: true, split: true, width: 'auto', height: 95, items: [{ xtype:'fieldset', title: 'Ich benötige ein Ersatzteil für:   (Ersatzteile werden im nächsten Schritt angezeigt)', autoHeight:true, anchor: "100%", items: [{ layout: "column", anchor: "0", items: [{ columnWidth: .4, layout: "form", items: { xtype: "textfield", name: 'artnr', anchor: '95%', id: 'artnr', fieldLabel: "Ersatzteil für: (Artikelnummer oder Name)", labelStyle: 'cursor: help;', tooltipTitle: 'Noch nichts gefunden ?', tooltipText: 'Bitte suchen Sie hier nach dem Artikel für den Sie ein Ersatzteil benötigen, nicht nach dem Ersatzteil selbst. Ersatzteile werden dann im nächsten Schritt angezeigt.
Sie können auch nur Teile des Namens angeben, z.B. "Schrank", oder "Tisch" um mehr Ergebnisse anzuzeigen. Auch Teile einer Artikelnummer (z.B. "103" für Artikel 10371) sind möglich.', listeners: { render: setFormFieldTooltip } } },{ columnWidth: .4, layout: "form", items: { xtype: 'datefield', anchor: '95%', fieldLabel: 'Kaufdatum', name: 'kaufdatum', id: 'kaufdatum', plugins : 'monthPickerPlugin', editable: false, allowBlank :false, format: 'm.Y' } },{ columnWidth: .2, layout: "form", items: { xtype: 'button', id: 'frmBtnSearch', isFormField: true, text: ' suchen »»', cls: 'x-btn-text-icon', anchor: '95%', icon: 'http://grasekamp-intern.com/ersatzteilbestellung/shared/icons/fam/zoom.png', handler: doSearch, formBind:true, labelSeparator: '', enableKeyEvents: true, hideFieldLabel: true } } ] }] }] }); var kundenInfoForm = new Ext.FormPanel({ labelAlign: 'left', frame:true, url: 'http://grasekamp-intern.com/ersatzteilbestellung/connectors/processAddress.php', method: 'Post', //title: 'Ihre Daten zum Versand', bodyStyle:'padding:5px 5px 0', height: '100%', region: 'center', items: [{ layout:'column', items:[{ columnWidth:.5, layout: 'form', items: [{ xtype:'textfield', fieldLabel: 'Firma', name: 'company', tabIndex:1, anchor:'95%' },{ xtype:'textfield', fieldLabel: 'Vorname', name: 'first', allowBlank:false, tabIndex:2, anchor:'95%' }, { xtype:'textfield', fieldLabel: 'Nachname', name: 'last', anchor:'95%', tabIndex:3, allowBlank:false }, { xtype:'textfield', fieldLabel: 'Strasse', name: 'street', tabIndex:4, anchor:'95%', allowBlank:false }, { xtype:'textfield', fieldLabel: 'Hausnummer', name: 'hausnummer', tabIndex:5, anchor:'95%', allowBlank:false }] },{ columnWidth:.5, layout: 'form', items: [{ xtype:'textfield', fieldLabel: 'PLZ', name: 'PLZ', tabIndex:6, anchor:'95%', allowBlank:false },{ xtype:'textfield', fieldLabel: 'Ort', name: 'ort', tabIndex:7, anchor:'95%', allowBlank:false },{ xtype:'textfield', fieldLabel: 'Email', tabIndex:8, allowBlank:false, name: 'email', vtype:'email', anchor:'95%' },{ xtype:'textfield', fieldLabel: 'Telefonnummer', tabIndex:9, name: 'fon', allowBlank:false, anchor:'95%' },new Ext.form.ComboBox({ name: 'zahlart', tabIndex:10, id: 'zahlart', anchor:'95%', editable: false, fieldLabel: 'Zahlart', triggerAction: 'all', emptyText: 'Bitte wälen...', allowBlank:false, value: 'Vorkasse', lazyRender:true, listClass: 'x-combo-list-small', store: ['Vorkasse', 'Nachnahme (+ 12 EUR)'] }) ] }] },{ xtype:'textarea', id:'txtbemerkung', tabIndex:11, labelAlign: 'top', fieldLabel:'Bemerkungen', anchor:'98%', allowBlank:true }] }); // Dummy center für border layout var centerRegion = new Ext.Container({ title: '', region: 'center', layout: 'fit', margins: '0 0 0 0' }); function setCardText(cardHolder, itemNr){ cardHolder.setActiveItem(itemNr); Ext.DomHelper.overwrite( Ext.get('txthelp'), cardHolder.activeItem.helptext, true ); } /* * Vor & Zurück Handler mit Checks */ var navHandler = function(incr){ var l = Ext.getCmp('tabs').getLayout(); var i = parseInt(l.activeItem.id.split('card-')[1]); // get the active Tab switch (i) { case 0: if (incr==1){ setCardText(l, i+1); } break; case 1: if (incr==1){ if (applySelection()){ setCardText(l, i+1); } } else if (incr==-1){ setCardText(l, i-1); } break; case 2: if (incr==1){ if (doOrder()){ setCardText(l, i+1); } } else if (incr==-1){ setCardText(l, i-1); } break; case 3: if (incr==1){ if (doFormSubmit()){ Ext.getCmp('card-next').setVisible(false); Ext.getCmp('final-step').setVisible(true); Ext.getCmp('chkAGB').setVisible(true); setCardText(l, i+1); } } else if (incr==-1){ setCardText(l, i-1); } break; case 4: if (incr==1){ doFinalOrder(); } else if (incr==-1){ setCardText(l, i-1); Ext.getCmp('chkAGB').setVisible(false); Ext.getCmp('card-next').setVisible(true); Ext.getCmp('final-step').setVisible(false); } break; default: break; } }; var tabs = new Ext.Panel({ layout : 'card', region : 'center', margins : '3 3 3 0', id: 'tabs', name: 'tabs', activeItem : 0, defaults : { autoScroll : true }, bbar: [{ id: 'card-prev', text: 'zurück', cls: 'x-btn-text-icon mybtn', icon: 'http://grasekamp-intern.com/ersatzteilbestellung/shared/icons/fam/arrow_undo.png', handler: navHandler.createDelegate(this, [-1]) }, '->', // greedy spacer so that the buttons are aligned to each side { xtype: 'checkbox', id: 'chkAGB', boxLabel: 'Ich akzeptiere die AGB  ', handler: enableButton, hidden: true },{ id: 'card-next', text: 'Weiter', cls: 'x-btn-text-icon mybtn', icon: 'http://grasekamp-intern.com/ersatzteilbestellung/shared/icons/fam/bullet_go.png', handler: navHandler.createDelegate(this, [1]) },{ id: 'final-step', text: 'Jetzt verbindlich bestellen !', cls: 'x-btn-text-icon mybtn', icon: 'http://grasekamp-intern.com/ersatzteilbestellung/shared/icons/fam/cart.png', hidden: true, disabled: true, handler: navHandler.createDelegate(this, [1]) } ], items: [ { //title : 'Start', id : 'card-0', frame : true, helptext : 'Hier finden Sie nützliche Hinweise zur Bedienung in jedem einzelnen Schritt. Bitte beachten Sie das wir zur Zeit nur innherhalb von Deutschland versenden können.', html : '






' +'

' },{ title : 'Artikelauswahl', id : 'card-1', helptext : 'Zunächst müssen wir wissen für welchen Artikel Sie ein Ersatzteil benötigen. Tragen Sie in das Suchfeld eine Artikelnummer oder einen Artikelnamen (z.B. "Sessel", "Rollo") ein und drücken Sie dann den "suchen" Knopf. ' + 'Zusätzlich wird zu jedem Artikel, falls verfügbar, ein Link zu der entsprechenden Aufbauanleitung zur Verfügung gestellt.' + ' Um einen Artikel auszuwaehlen klicken Sie bitte auf die Tabellenzeile und drücken Sie unter der Tabelle auf "Weiter"', xtype : 'panel', layout : 'border', items : [artikelsuche_form, centerRegion, artikelgrid] },{ title : 'Ersatzteilauswahl', id : 'card-2', helptext : 'Tragen Sie hinter dem gewünschten Ersatzteil die beötigte Menge ein. Klicken Sie danach auf "weiter".
Der Versand beträgt pauschal 6,95 EUR. Falls der Versand durch eine Spedition erfolgen muss, beträgt dieser 34,00 EUR. Alle Preise sind inkl. Mehrwertsteuer.', xtype : 'panel', layout : 'border', items : [ersatzteilgrid] },{ title : 'Ihre Angaben', id : 'card-3', xtype : 'panel', layout : 'border', helptext : 'Wo soll die Lieferung hingehen ? Tragen Sie hier Ihre Adresse ein.
Zur Zeit sind Lieferungen ausschließlich innerhalb von Deutschland möglich. Die deutschen Inseln werden gesondert berechnet.', items : [kundenInfoForm] },{ title : 'Bestellung überprüfen', id : 'card-4', helptext : 'Ueberpruefen Sie hier noch einmal alle Daten auf ihre Korrektheit.', html : '
Noch keine Daten vorhanden
', xtype : 'panel', frame : true, autoLoad : 'http://grasekamp-intern.com/ersatzteilbestellung/connectors/summary.php'/*, bbar: ['->', { xtype: 'button', id: 'btnOrderSpareparts', text: 'Jetzt verbindlich bestellen! »', iconCls:'remove', handler: doFinalOrder, disabled: true, cls: 'x-btn-text-icon', icon: 'http://grasekamp-intern.com/ersatzteilbestellung/shared/icons/fam/bullet_go.png', scope: this }]*/ }] }); // Panel für die Hilfanzeige var nav = new Ext.Panel({ title : 'Hilfe', region : 'south', id : 'nav', split : true, frame : true, height : 99, collapsible : true, margins : '0 0 0 0', padding : '3 3 3 3', cmargins : '3 3 3 3', html: '
 
' }); //var button = Ext.get('show-btn'); var win = new Ext.Window({ title : 'Online Ersatzteilbestellung', closable : true, maximizable: true, resizable: false, width : 785, height : 515, minHeight: 785, minWidth : 525, plain : true, layout : 'border', items : [nav, tabs], id: 'win' }); function doSearch() { var tmpArtNr = Ext.get('artnr').dom.value; if (tmpArtNr.length > 2) { //console.log('vorher: ' + tmpArtNr); // Top Schreibfehler ausmerzen und Wortpaare trennen: query = tmpArtNr.replace(/pavillion/gi, 'pavillon'); query = query.replace(/Pavilon/gi, 'pavillon'); query = query.replace(/pavilion/gi, 'pavillon'); query = query.replace(/antik/gi, 'antik '); query = query.replace(/terassen/gi, ' terassen '); query = query.replace(/terrassen/gi, ' terassen '); query = query.replace(/luxus/gi, 'luxus '); query = query.replace(/\s{2,5}/gi, ''); Ext.get('artnr').dom.value = query; //console.log('nachher: ' + query); artikel_ds.baseParams = { q: query }; artikel_ds.load({ params: { "q":query } }); } return (true); } //Ext.getCmp('artnr').on('specialkey', doSearch, this); function applySelection() { var buydate = Ext.get('kaufdatum').dom.value; if (buydate.length < 4) { Ext.getCmp('kaufdatum').markInvalid('Bitte das Kaufdatum angeben!'); return(false); } var r = artikelgrid.getSelectionModel().getSelected(); eteil_ds.removeAll(); eteil_ds.baseParams = { q: r.data.artnr, n: r.data.bez, kaufdatum: buydate }; eteil_ds.load({ params: { "q":r.data.artnr, "n": r.data.bez, "kaufdatum": buydate } }); return(true); } /* * "Bestellung Abschicken" Knopf erst freigeben, wenn die AGB's * akzeptiert worden sind. * GLOBALE Function */ function enableButton() { (Ext.getCmp('chkAGB').checked) ? Ext.getCmp('final-step').enable(): Ext.getCmp('final-step').disable(); } function doOrder(){ /* * Get everything instead of only the modified * records to allow the user to switch * back and forth between the tabs */ var records = ersatzteilgrid.getStore().getRange(); //alles auf einmal var data = []; // array fertig machen var istLeer = true; Ext.each(records, function(record){ (record.data.menge>0)?istLeer=false:x=''; data.push(record.data); }); if (!istLeer){ Ext.Ajax.request({ url: 'http://grasekamp-intern.com/ersatzteilbestellung/connectors/processOrders.php', params: { data: Ext.encode(data) }, success: function(){ ersatzteilgrid.getStore().commitChanges(); return (true); }, failure: function(){ return(false); } }); } else { // Keine Mengen eingetragen Ext.DomHelper.append( Ext.get('txthelp'), '
Bitte hinter dem gewüschten Ersatzteil eine Menge eintragen!' ); return(false); } return (true); } function doFormSubmit(){ if (kundenInfoForm.getForm().isValid()) { kundenInfoForm.getForm().submit({ success:function(){ Ext.getCmp('card-4').getUpdater().refresh(); return(true); } }); } else { return(false); } return(true); } /* * onClick Handler für Onlineshop */ //var Link = Ext.get('ersatzteilshoplink'); //Link.on('click', function(){ //ersatzteilshoplink win.show(/*Link*/); Ext.getCmp('tabs').getLayout().setActiveItem(4); // dirty hack to let the last tab load setCardText(Ext.getCmp('tabs').getLayout(), 0); //}); }); /* * Alle Informationen sind vorhanden, Bestellung nun einleiten ! */ function doFinalOrder(){ Ext.Ajax.request({ url: 'http://grasekamp-intern.com/ersatzteilbestellung/connectors/finalOrder.php', params: { isFinal: true }, success: doneOrder, failure: function(){ return; } }); } function doneOrder() { Ext.Msg.show({ title:'Ihre Bestellung wurde erfolgreich übermittelt', msg: 'Ihr Bestellung wurde erfolgreich übermittelt. Sie erhalten nun in Kürze eine eMail mit allen weiteren Informationen.', buttons: Ext.Msg.OK, fn: function(){ Ext.getCmp('win').hide(); } }); }