DatabaseParametersCard.MySQL.js (8427B)
1 /** 2 * This card displays the database parameters for the MySQL database. 3 */ 4 Ext.define('PartKeeprSetup.DatabaseParametersCard.MySQL', { 5 extend: 'Ext.panel.Panel', 6 7 /* 8 * Various style settings 9 */ 10 border: false, 11 layout: 'column', 12 bodyStyle: { 13 background: "none" 14 }, 15 defaults: { 16 labelWidth: 120 17 }, 18 initial: false, 19 20 /** 21 * Initializes the component and creates the various fields 22 */ 23 initComponent: function () 24 { 25 this.createHintTemplate = Ext.create("Ext.Template", [ 26 "CREATE DATABASE {name} CHARACTER SET UTF8;\nGRANT USAGE ON *.* TO {user}@{localhost} IDENTIFIED BY '{password}';\nGRANT ALL PRIVILEGES ON {name}.* TO {user}@{localhost};" 27 ]); 28 29 this.hostname = Ext.create("Ext.form.field.Text", { 30 fieldLabel: 'Database Hostname', 31 labelWidth: this.defaults.labelWidth, 32 value: PartKeeprSetup.getApplication().getSetupConfig().values.database_host 33 }); 34 35 this.hostname.on("change", this.onUpdateParameters, this); 36 37 this.username = Ext.create("Ext.form.field.Text", { 38 fieldLabel: 'Database Username', 39 labelWidth: this.defaults.labelWidth, 40 value: PartKeeprSetup.getApplication().getSetupConfig().values.database_user 41 }); 42 43 this.username.on("change", this.onUpdateParameters, this); 44 45 this.password = Ext.create("Ext.form.field.Text", { 46 fieldLabel: 'Database Password', 47 inputType: "password", 48 labelWidth: this.defaults.labelWidth, 49 value: PartKeeprSetup.getApplication().getSetupConfig().values.database_password 50 }); 51 52 this.password.on("change", this.onUpdateParameters, this); 53 54 this.databaseName = Ext.create("Ext.form.field.Text", { 55 fieldLabel: 'Database Name', 56 labelWidth: this.defaults.labelWidth, 57 value: PartKeeprSetup.getApplication().getSetupConfig().values.database_name 58 }); 59 60 this.databaseName.on("change", this.onUpdateParameters, this); 61 62 this.port = Ext.create("Ext.form.field.Number", { 63 minValue: 0, 64 flex: 1, 65 disabled: true, 66 value: '3306', 67 labelWidth: this.defaults.labelWidth, 68 validateOnBlur: true, 69 validateOnChange: false, 70 validator: function (value) 71 { 72 if (value === "" || value === 0) { 73 this.setValue(PartKeeprSetup.getApplication().getSetupConfig().values.database_port); 74 } 75 return true; 76 }, 77 listeners: { 78 change: "onUpdateParameters", 79 scope: this 80 } 81 }); 82 83 this.port.on("change", this.onUpdateParameters, this); 84 85 this.portDefault = Ext.create("Ext.form.field.Checkbox", { 86 boxLabel: 'Default', 87 flex: 1, 88 checked: (PartKeeprSetup.getApplication().getSetupConfig().values.database_port === 3306), 89 listeners: { 90 change: function (field) 91 { 92 if (field.getValue()) { 93 this.port.disable(); 94 this.port.setValue(3306); 95 } else { 96 this.port.enable(); 97 } 98 99 this.onUpdateParameters(); 100 }, 101 scope: this 102 } 103 }); 104 105 this.showHintCheckbox = Ext.create("Ext.form.field.Checkbox", { 106 xtype: 'checkboxfield', 107 boxLabel: 'Show commands to create the database', 108 listeners: { 109 change: this.onUpdateParameters, 110 scope: this 111 } 112 }); 113 114 this.items = [ 115 { 116 xtype: 'panel', 117 border: false, 118 width: "300px", 119 bodyStyle: { 120 background: "none" 121 }, 122 items: [ 123 this.hostname, 124 this.databaseName, 125 this.username, 126 this.password, 127 { 128 xtype: 'fieldcontainer', 129 labelWidth: this.defaults.labelWidth, 130 layout: 'hbox', 131 width: 300, 132 fieldLabel: 'Database Port', 133 items: [this.port, this.portDefault] 134 } 135 136 ] 137 }, { 138 xtype: 'panel', 139 border: false, 140 bodyStyle: { 141 background: "none" 142 }, 143 items: [ 144 this.showHintCheckbox, 145 { 146 xtype: 'textarea', 147 border: false, 148 width: "450px", 149 height: "100px", 150 autoScroll: true, 151 layout: 'fit', 152 hidden: true, 153 id: 'mysql-parameters-hint' 154 }, 155 { 156 xtype: 'container', 157 border: false, 158 style: 'overflow: auto;', 159 width: "450px", 160 height: "100px", 161 autoScroll: true, 162 layout: 'fit', 163 html: "The database must be manually created prior installation." 164 } 165 ] 166 } 167 ]; 168 169 this.callParent(); 170 171 this.on("activate", this.onActivate, this); 172 this.on("activate", this.onUpdateParameters, this); 173 }, 174 onActivate: function () { 175 this.initial = true; 176 this.hostname.setValue(PartKeeprSetup.getApplication().getSetupConfig().values.database_host); 177 this.username.setValue(PartKeeprSetup.getApplication().getSetupConfig().values.database_user); 178 this.password.setValue(PartKeeprSetup.getApplication().getSetupConfig().values.database_password); 179 this.databaseName.setValue(PartKeeprSetup.getApplication().getSetupConfig().values.database_name); 180 181 if (PartKeeprSetup.getApplication().getSetupConfig().values.database_port) { 182 this.port.setValue(PartKeeprSetup.getApplication().getSetupConfig().values.database_port); 183 this.portDefault.setValue(false); 184 this.port.setDisabled(false); 185 } 186 this.initial = false; 187 }, 188 /** 189 * This method gets fired as soon as something in the form was changed. 190 * 191 * We do this because of the real-time update of the "hints" message, which 192 * assists the user with commands to execute on the database. 193 */ 194 onUpdateParameters: function () 195 { 196 if (this.initial) { return; } 197 198 if (this.showHintCheckbox.checked) { 199 var host; 200 201 if (this.hostname.getValue() == "localhost" || this.hostname.getValue() == "127.0.0.1") { 202 host = this.hostname.getValue(); 203 } else { 204 host = "<YOUR-CONNECTING-IP>"; 205 } 206 207 Ext.getCmp("mysql-parameters-hint").show(); 208 209 Ext.getCmp("mysql-parameters-hint").setValue( 210 this.createHintTemplate.apply( 211 { 212 localhost: host, 213 user: this.username.getValue(), 214 password: this.password.getValue(), 215 name: this.databaseName.getValue() 216 })); 217 } else { 218 Ext.getCmp("mysql-parameters-hint").hide(); 219 } 220 221 if (this.hostname.getValue() !== "" && this.username.getValue() !== "" && this.password.getValue() !== "" && 222 this.databaseName.getValue() !== "") { 223 Ext.ComponentQuery.query('#nextBtn')[0].enable(); 224 } 225 226 var config = PartKeeprSetup.getApplication().getSetupConfig(); 227 228 Ext.merge(config, { 229 values: { 230 database_driver: 'pdo_mysql', 231 database_host: this.hostname.getValue(), 232 database_user: this.username.getValue(), 233 database_password: this.password.getValue(), 234 database_name: this.databaseName.getValue(), 235 database_port: this.port.getValue() 236 } 237 }); 238 239 } 240 });