viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit ee83012b3162bfe8f03c38eed8feed075f09e9e4

Authored by Jatinder Singh
1 parent 8ab31dc8b1
Exists in master and in 3 other branches amber-development, development, ui-design

changes

Showing 1 changed file with 71 additions and 52 deletions   Show diff stats
src/pages/Dashboard.vue
Diff comments   View file @ee83012
1 <template> 1 <template>
2 <v-tabs 2 <v-tabs
3 slider-color="black" 3 grow
4 slider-color="black"
4 > 5 >
5 <v-spacer></v-spacer> 6
6 <v-tab ripple> 7 <v-tab ripple @click="activeTab('existing')" v-bind:class="{ active: isActive }" id="tab">
7 Existing user 8 Existing user
8 </v-tab> 9 </v-tab>
9 <v-spacer></v-spacer> 10
10 <v-tab ripple> 11 <v-tab ripple @click="activeTab('new')" v-bind:class="{ active: newActive }" id="tab1">
11 Add New Users 12 Add New Users
12 </v-tab> 13 </v-tab>
13 <v-spacer></v-spacer> 14
14 <v-tab-item> 15 <v-tab-item>
15 <v-dialog v-model="dialog" max-width="500px"> 16 <v-dialog v-model="dialog" max-width="500px">
16 <v-toolbar color="white"> 17 <v-toolbar color="white">
17 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
18 <v-toolbar-title>Edit Profile</v-toolbar-title> 19 <v-toolbar-title>Edit Profile</v-toolbar-title>
19 <v-spacer></v-spacer> 20 <v-spacer></v-spacer>
20 </v-toolbar> 21 </v-toolbar>
21 <v-card> 22 <v-card>
22 <v-flex align-center justify-center layout text-xs-center> 23 <v-flex align-center justify-center layout text-xs-center>
23 <v-avatar size="50px" style="position:absolute; top:10px; "> 24 <v-avatar size="50px" style="position:absolute; top:10px; ">
24 <img src="/static/icon/user.png"/> </v-avatar> 25 <img src="/static/icon/user.png"/> </v-avatar>
25 </v-flex> 26 </v-flex>
26 <v-card-text> 27 <v-card-text>
27 <v-container grid-list-md> 28 <v-container grid-list-md>
28 <v-layout wrap justify-center> 29 <v-layout wrap justify-center>
29 <v-flex xs12 sm9> 30 <v-flex xs12 sm9>
30 <v-form> 31 <v-form>
31 <v-text-field 32 <v-text-field
32 v-model="editedItem.Name" 33 v-model="editedItem.Name"
33 v-validate="'required'" 34 v-validate="'required'"
34 :error-messages="errors.collect('Name')" 35 :error-messages="errors.collect('Name')"
35 label="First Name" 36 label="First Name"
36 data-vv-name="Name" 37 data-vv-name="Name"
37 required > 38 required >
38 </v-text-field> 39 </v-text-field>
39 <v-text-field 40 <v-text-field
40 v-validate="'required'" 41 v-validate="'required'"
41 v-model="editedItem.LName" 42 v-model="editedItem.LName"
42 :error-messages="errors.collect('name')" 43 :error-messages="errors.collect('name')"
43 label="Last Name" 44 label="Last Name"
44 data-vv-name="name" 45 data-vv-name="name"
45 required> 46 required>
46 </v-text-field> 47 </v-text-field>
47 <v-text-field 48 <v-text-field
48 v-model="editedItem.Email" 49 v-model="editedItem.Email"
49 v-validate="'required|email'" 50 v-validate="'required|email'"
50 :error-messages="errors.collect('email')" 51 :error-messages="errors.collect('email')"
51 label="E-mail" 52 label="E-mail"
52 data-vv-name="email" 53 data-vv-name="email"
53 required> 54 required>
54 </v-text-field> 55 </v-text-field>
55 <v-text-field 56 <v-text-field
56 v-model="editedItem.DOB" 57 v-model="editedItem.DOB"
57 label="Date of Birth" 58 label="Date of Birth"
58 :rules="[rules.required, rules.min]" 59 :rules="[rules.required, rules.min]"
59 > 60 >
60 </v-text-field> 61 </v-text-field>
61 <v-card-actions> 62 <v-card-actions>
62 63
63 <v-btn round dark @click.native="close">Cancel</v-btn> 64 <v-btn round dark @click.native="close">Cancel</v-btn>
64 <v-spacer></v-spacer> 65 <v-spacer></v-spacer>
65 <v-btn round dark @click.native="save">Save</v-btn> 66 <v-btn round dark @click.native="save">Save</v-btn>
66 67
67 </v-card-actions> 68 </v-card-actions>
68 </v-form> 69 </v-form>
69 </v-flex> 70 </v-flex>
70 </v-layout> 71 </v-layout>
71 </v-container> 72 </v-container>
72 </v-card-text> 73 </v-card-text>
73 </v-card> 74 </v-card>
74 </v-dialog> 75 </v-dialog>
75 76
76 <v-dialog v-model="dialog1" max-width="500px"> 77 <v-dialog v-model="dialog1" max-width="500px">
77 <v-toolbar color="white"> 78 <v-toolbar color="white">
78 <v-spacer></v-spacer> 79 <v-spacer></v-spacer>
79 <v-toolbar-title>Profile</v-toolbar-title> 80 <v-toolbar-title>Profile</v-toolbar-title>
80 <v-spacer></v-spacer> 81 <v-spacer></v-spacer>
81 <v-icon @click="close1">close</v-icon> 82 <v-icon @click="close1">close</v-icon>
82 </v-toolbar> 83 </v-toolbar>
83 84
84 85
85 <v-card> 86 <v-card>
86 <v-flex align-center justify-center layout text-xs-center> 87 <v-flex align-center justify-center layout text-xs-center>
87 <v-avatar size="50px" style="position:absolute; top:10px;"> 88 <v-avatar size="50px" style="position:absolute; top:10px;">
88 <img src="/static/icon/user.png"/> </v-avatar> 89 <img src="/static/icon/user.png"/> </v-avatar>
89 </v-flex> 90 </v-flex>
90 <v-card-text> 91 <v-card-text>
91 <v-container grid-list-md> 92 <v-container grid-list-md>
92 <v-layout wrap justify-center> 93 <v-layout wrap justify-center>
93 <v-flex offset-xs3> 94 <v-flex offset-xs3>
94 95
95 <br><br> 96 <br><br>
96 <table> 97 <table>
97 <th> 98 <th>
98 <tr><h5><b>First Name:</b></h5></tr><br> 99 <tr><h5><b>First Name:</b></h5></tr><br>
99 <tr><h5><b>Last Name:</b></h5></tr><br> 100 <tr><h5><b>Last Name:</b></h5></tr><br>
100 <tr><h5><b>Email:</b></h5></tr><br> 101 <tr><h5><b>Email:</b></h5></tr><br>
101 <tr><h5><b>Date Of Birth:</b></h5></tr> 102 <tr><h5><b>Date Of Birth:</b></h5></tr>
102 </th> 103 </th>
103 <th> 104 <th>
104 <tr><td><h5><b>{{ editedItem.Name }}</b></h5></td></tr><br> 105 <tr><td><h5><b>{{ editedItem.Name }}</b></h5></td></tr><br>
105 <tr> <td><h5><b>{{ editedItem.LName }}</b></h5></td></tr><br> 106 <tr> <td><h5><b>{{ editedItem.LName }}</b></h5></td></tr><br>
106 <tr><td><h5><b>{{ editedItem.Email }}</b></h5></td></tr><br> 107 <tr><td><h5><b>{{ editedItem.Email }}</b></h5></td></tr><br>
107 <tr><td><h5><b>{{ editedItem.DOB }}</b></h5></td></tr> 108 <tr><td><h5><b>{{ editedItem.DOB }}</b></h5></td></tr>
108 </th> 109 </th>
109 110
110 111
111 </table> 112 </table>
112 </v-flex> 113 </v-flex>
113 </v-layout> 114 </v-layout>
114 </v-container> 115 </v-container>
115 </v-card-text> 116 </v-card-text>
116 </v-card> 117 </v-card>
117 </v-dialog> 118 </v-dialog>
118 119
119 <v-dialog v-model="dialog2" max-width="800px"> 120 <v-dialog v-model="dialog2" max-width="800px">
120 121
121 <v-card> 122 <v-card>
122 <div id="dialog"> 123 <div id="dialog">
123 <h4><b> Report </b> </h4> 124 <h4><b> Report </b> </h4>
124 <h5 id="name"><b>Patient Name:</b> {{ editedItem.Name+' '+editedItem.LName }}</h5> 125 <h5 id="name"><b>Patient Name:</b> {{ editedItem.Name+' '+editedItem.LName }}</h5>
125 <h5 id="m">Select Month:</h5> 126 <h5 id="m">Select Month:</h5>
126 <v-btn flat id="G">Generate</v-btn> 127 <v-btn flat id="G">Generate</v-btn>
127 <v-spacer></v-spacer> 128 <v-spacer></v-spacer>
128 <v-icon id="icon" @click="close2">close</v-icon> 129 <v-icon id="icon" @click="close2">close</v-icon>
129 <span id="bt"> 130 <span id="bt">
130 <v-btn flat>1 month</v-btn> 131 <v-btn flat>1 month</v-btn>
131 <v-btn flat>3 Month</v-btn> 132 <v-btn flat>3 Month</v-btn>
132 <v-btn flat>6 Month</v-btn> 133 <v-btn flat>6 Month</v-btn>
133 <v-btn flat>12 Month</v-btn> 134 <v-btn flat>12 Month</v-btn>
134 <img id="e" @click="mail" src="/static/icon/email1.png"/> 135 <img id="e" @click="mail" src="/static/icon/email1.png"/>
135 136
136 <img id="d" @click="download" src="/static/icon/download1.png"/> 137 <img id="d" @click="download" src="/static/icon/download1.png"/>
137 </span> 138 </span>
138 <v-card-text> 139 <v-card-text>
139 <h5 style="position: absolute; top:275px; left:270px"><b>Select month to generate report</b></h5> 140 <h5 style="position: absolute; top:275px; left:270px"><b>Select month to generate report</b></h5>
140 </v-card-text> 141 </v-card-text>
141 </div> 142 </div>
142 </v-card> 143 </v-card>
143 144
144 </v-dialog> 145 </v-dialog>
145 146
146 <v-data-table 147 <v-data-table
147 :headers="headers" 148 :headers="headers"
148 :items="desserts" 149 :items="desserts"
149 > 150 >
150 <template slot="items" slot-scope="props"> 151 <template slot="items" slot-scope="props">
151 <td id="td">{{ props.item.No }}</td> 152 <td id="td">{{ props.item.No }}</td>
152 <td id="td">{{ props.item.Name+' '+props.item.LName }}</td> 153 <td id="td">{{ props.item.Name+' '+props.item.LName }}</td>
153 <td id="td">{{ props.item.Email }}</td> 154 <td id="td">{{ props.item.Email }}</td>
154 155
155 156
156 <td> 157 <td>
157 158
158 <span> 159 <span>
159 <img style="cursor:pointer; height:20px; " class="mr-2" @click="report(props.item)" src="/static/icon/List1.png"/> 160 <img style="cursor:pointer; height:20px; " class="mr-2" @click="report(props.item)" src="/static/icon/List1.png"/>
160 <img style="cursor:pointer; width:25px; height:18px; " class="mr-2" @click="profile(props.item)" src="/static/icon/eye1.png"/> 161 <img style="cursor:pointer; width:25px; height:18px; " class="mr-2" @click="profile(props.item)" src="/static/icon/eye1.png"/>
161 <img style="cursor:pointer; width:20px; height:18px; " class="mr-2" @click="editItem(props.item)" src="/static/icon/edit1.png"/> 162 <img style="cursor:pointer; width:20px; height:18px; " class="mr-2" @click="editItem(props.item)" src="/static/icon/edit1.png"/>
162 <img style="cursor:pointer; height:20px; " class="mr-2" @click="deleteItem(props.item)" src="/static/icon/delete1.png"/> 163 <img style="cursor:pointer; height:20px; " class="mr-2" @click="deleteItem(props.item)" src="/static/icon/delete1.png"/>
163 </span> 164 </span>
164 </td> 165 </td>
165 166
166 </template> 167 </template>
167 </v-data-table> 168 </v-data-table>
168 </v-tab-item> 169 </v-tab-item>
169 <v-tab-item> 170 <v-tab-item>
170 <v-flex xs12 sm6 offset-sm3> 171 <v-flex xs12 sm6 offset-sm3>
171 172
172 173
173 <v-card flat> 174 <v-card flat>
174 <!-- <v-card-text>Contents for Item 2 go here</v-card-text> --> 175 <!-- <v-card-text>Contents for Item 2 go here</v-card-text> -->
175 <v-container fluid fill-height> 176 <v-container fluid fill-height>
176 <v-layout align-center> 177 <v-layout align-center>
177 <v-flex xs12 sm8 offset-sm2> 178 <v-flex xs12 sm8 offset-sm2>
178 <v-flex offset-sm5> 179 <v-flex offset-sm5>
179 <v-avatar size="55px"> 180 <v-avatar size="55px">
180 <img src="/static/icon/user.png"/> </v-avatar> 181 <img src="/static/icon/user.png"/> </v-avatar>
181 </v-flex> 182 </v-flex>
182 <v-form ref="form" v-model="valid" lazy-validation> 183 <v-form ref="form" v-model="valid" lazy-validation>
183 <v-text-field 184 <v-text-field
184 v-model="Name" 185 v-model="Name"
185 :rules="nameRules" 186 :rules="nameRules"
186 label="First Name" 187 label="First Name"
187 required 188 required
188 ></v-text-field> 189 ></v-text-field>
189 <v-text-field 190 <v-text-field
190 :rules="nameRules" 191 :rules="nameRules"
191 v-model="LName" 192 v-model="LName"
192 label="Last name" 193 label="Last name"
193 required 194 required
194 ></v-text-field> 195 ></v-text-field>
195 <v-text-field 196 <v-text-field
196 v-model="email" 197 v-model="email"
197 :rules="emailRules" 198 :rules="emailRules"
198 label="E-mail" 199 label="E-mail"
199 required 200 required
200 ></v-text-field> 201 ></v-text-field>
201 <v-text-field 202 <v-text-field
202 :rules="[rules.required, rules.min]" 203 :rules="[rules.required, rules.min]"
203 label="Date of Birth" 204 label="Date of Birth"
204 v-model="DOB" 205 v-model="DOB"
205 required > 206 required >
206 </v-text-field> 207 </v-text-field>
207 <v-card-actions> 208 <v-card-actions>
208 <v-btn @click="clear" round dark>clear</v-btn> 209 <v-btn @click="clear" round dark>clear</v-btn>
209 <v-spacer></v-spacer> 210 <v-spacer></v-spacer>
210 <v-btn @click="submit" round dark> Add </v-btn> 211 <v-btn @click="submit" round dark> Add </v-btn>
211 212
212 </v-card-actions> 213 </v-card-actions>
213 </v-form> 214 </v-form>
214 </v-flex> 215 </v-flex>
215 </v-layout> 216 </v-layout>
216 </v-container> 217 </v-container>
217 </v-card> 218 </v-card>
218 </v-flex> 219 </v-flex>
219 </v-tab-item> 220 </v-tab-item>
220 </v-tabs> 221 </v-tabs>
221 222
222 223
223 </template> 224 </template>
224 225
225 <script> 226 <script>
226 import axios from 'axios'; 227 import axios from 'axios';
227 export default { 228 export default {
228 data: () => ({ 229 data: () => ({
229 No: '', 230 No: '',
230 Name: '', 231 Name: '',
231 LName: '', 232 LName: '',
232 Email: '', 233 Email: '',
233 DOB: '', 234 DOB: '',
234 clear: '', 235 clear: '',
235 search: '', 236 search: '',
236 dialog: false, 237 dialog: false,
237 dialog1: false, 238 dialog1: false,
238 dialog2: false, 239 dialog2: false,
239 valid: true, 240 valid: true,
241 isActive: true,
242 newActive: false,
240 rules: { 243 rules: {
241 required: value => !!value || 'This field is Required.', 244 required: value => !!value || 'This field is Required.',
242 min: v => (/^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/).test(v) && v.length > 0 || 'Please enter a date in the format dd/mm/yyyy' 245 min: v =>
246 (/^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/.test(
247 v
248 ) &&
249 v.length > 0) ||
250 'Please enter a date in the format dd/mm/yyyy'
243 }, 251 },
244 nameRules: [ 252 nameRules: [v => !!v || 'Name is required'],
245 v => !!v || 'Name is required',
246 ],
247 email: '', 253 email: '',
248 emailRules: [ 254 emailRules: [
249 v => !!v || 'E-mail is required', 255 v => !!v || 'E-mail is required',
250 v => /.+@.+/.test(v) || 'E-mail must be valid' 256 v => /.+@.+/.test(v) || 'E-mail must be valid'
251 ], 257 ],
252 headers: [ 258 headers: [
253 { 259 {
254 text: 'No', 260 text: 'No',
255 align: 'left', 261 align: 'left',
256 sortable: false, 262 sortable: false,
257 value: 'No' 263 value: 'No'
258 }, 264 },
259 { text: 'Name', value: 'Name', sortable: false }, 265 { text: 'Name', value: 'Name', sortable: false },
260 { text: 'Email', value: 'Email', sortable: false }, 266 { text: 'Email', value: 'Email', sortable: false },
261 { text: '', value: '', sortable: false }, 267 { text: '', value: '', sortable: false }
262 ], 268 ],
263 desserts: [ 269 desserts: [
264 { 270 {
265 No: 1, 271 No: 1,
266 Name: 'Amit', 272 Name: 'Amit',
267 LName: 'goyal', 273 LName: 'goyal',
268 Email: 'jsi@gmail.com', 274 Email: 'jsi@gmail.com',
269 DOB: '22/09/1996' 275 DOB: '22/09/1996'
270 }, 276 },
271 { 277 {
272 No: 2, 278 No: 2,
273 Name: 'Sumit', 279 Name: 'Sumit',
274 LName: 'kumar', 280 LName: 'kumar',
275 Email: 'aasi@gmail.com', 281 Email: 'aasi@gmail.com',
276 DOB: '16/09/1997' 282 DOB: '16/09/1997'
277 } 283 }
278 ], 284 ],
279 editedIndex: -1, 285 editedIndex: -1,
280 editedItem: { 286 editedItem: {
281 No: '', 287 No: '',
282 Name: '', 288 Name: '',
283 LName: '', 289 LName: '',
284 Email: '', 290 Email: ''
285 }, 291 },
286 defaultItem: { 292 defaultItem: {
287 No: '', 293 No: '',
288 Name: '', 294 Name: '',
289 LName: '', 295 LName: '',
290 Email: '', 296 Email: ''
291 } 297 }
292 }), 298 }),
293 methods: { 299 methods: {
294 editItem (item) { 300 editItem (item) {
295 this.editedIndex = this.desserts.indexOf(item); 301 this.editedIndex = this.desserts.indexOf(item);
296 this.editedItem = Object.assign({}, item); 302 this.editedItem = Object.assign({}, item);
297 this.dialog = true; 303 this.dialog = true;
298 }, 304 },
299 profile (item) { 305 profile (item) {
300 this.editedIndex = this.desserts.indexOf(item); 306 this.editedIndex = this.desserts.indexOf(item);
301 this.editedItem = Object.assign({}, item); 307 this.editedItem = Object.assign({}, item);
302 this.dialog1 = true; 308 this.dialog1 = true;
303 }, 309 },
304 report (item) { 310 report (item) {
305 this.editedIndex = this.desserts.indexOf(item); 311 this.editedIndex = this.desserts.indexOf(item);
306 this.editedItem = Object.assign({}, item); 312 this.editedItem = Object.assign({}, item);
307 this.dialog2 = true; 313 this.dialog2 = true;
308 }, 314 },
309 315
310 deleteItem (item) { 316 deleteItem (item) {
311 const index = this.desserts.indexOf(item); 317 const index = this.desserts.indexOf(item);
312 confirm('Are you sure you want to delete this item?') && 318 confirm('Are you sure you want to delete this item?') &&
313 this.desserts.splice(index, 1); 319 this.desserts.splice(index, 1);
314 }, 320 },
321 activeTab (type) {
322 switch (type) {
323 case 'existing':
324 this.newActive = false;
325 this.isActive = true;
326 break;
327
328 default:
329 this.newActive = true;
330 this.isActive = false;
331 break;
332 }
333 },
315 334
316 close () { 335 close () {
317 this.dialog = false; 336 this.dialog = false;
318 setTimeout(() => { 337 setTimeout(() => {
319 this.editedItem = Object.assign({}, this.defaultItem); 338 this.editedItem = Object.assign({}, this.defaultItem);
320 this.editedIndex = -1; 339 this.editedIndex = -1;
321 }, 300); 340 }, 300);
322 }, 341 },
323 close1 () { 342 close1 () {
324 this.dialog1 = false; 343 this.dialog1 = false;
325 }, 344 },
326 close2 () { 345 close2 () {
327 this.dialog2 = false; 346 this.dialog2 = false;
328 }, 347 },
329 submit () { 348 submit () {
330 if (this.$refs.form.validate()) { 349 if (this.$refs.form.validate()) {
331 // Native form submission is not yet supported 350 // Native form submission is not yet supported
332 axios.post('/api/submit', { 351 axios.post('/api/submit', {
333 Name: this.Name, 352 Name: this.Name,
334 LName: this.LName, 353 LName: this.LName,
335 Email: this.Email, 354 Email: this.Email,
336 DOB: this.DOB, 355 DOB: this.DOB
337
338 }); 356 });
339 } 357 }
340 }, 358 },
341 mail () { 359 mail () {
342 this.editedIndex = this.desserts.indexOf(); 360 this.editedIndex = this.desserts.indexOf();
343 }, 361 },
344 download () { 362 download () {
345 this.editedIndex = this.desserts.indexOf(); 363 this.editedIndex = this.desserts.indexOf();
346 }, 364 },
347 // clear () { 365 clear () {
348 // this.$refs.form.reset(); 366 this.$refs.form.reset();
349 // }, 367 },
350
351 368
352 save () { 369 save () {
353 if (this.editedIndex > -1) { 370 if (this.editedIndex > -1) {
354 Object.assign(this.desserts[this.editedIndex], this.editedItem); 371 Object.assign(this.desserts[this.editedIndex], this.editedItem);
355 } else { 372 } else {
356 this.desserts.push(this.editedItem); 373 this.desserts.push(this.editedItem);
357 } 374 }
358 this.close(); 375 this.close();
359 } 376 }
360 } 377 }
361 }; 378 };
362
363 </script> 379 </script>
364 <style scoped> 380 <style scoped>
365 .v-card__actions .v-btn{ 381 .v-card__actions .v-btn {
366 margin: 0 15px; 382 margin: 0 15px;
367 min-width: 120px; 383 min-width: 120px;
368 } 384 }
369 385
370 h4{ 386 h4 {
371 background-repeat: no-repeat; 387 background-repeat: no-repeat;
372 padding: 8px; 388 padding: 8px;
373 margin: auto; 389 margin: auto;
374 font-size: 25px; 390 font-size: 25px;
375 } 391 }
376 #name{ 392 #name {
377 position: absolute; 393 position: absolute;
378 left: 100px; 394 left: 100px;
379 top: 17px 395 top: 17px;
380 } 396 }
381 #icon{ 397 #icon {
382 position: absolute; 398 position: absolute;
383 right: 8px; 399 right: 8px;
384 top: 8px; 400 top: 8px;
385 } 401 }
386 #m{ 402 #m {
387 position: relative; 403 position: relative;
388 left: 135px; 404 left: 135px;
389 top: -11px; 405 top: -11px;
390 } 406 }
391 #G{ 407 #G {
392 position: absolute; 408 position: absolute;
393 top: 38px; 409 top: 38px;
394 } 410 }
395 #bt{ 411 #bt {
396 position: relative; 412 position: relative;
397 top: -20px; 413 top: -20px;
398 left:115px; 414 left: 115px;
399 } 415 }
400 #e{ 416 #e {
401 position: relative; 417 position: relative;
402 right: -110px; 418 right: -110px;
403 height: 17px; 419 height: 17px;
404 cursor: pointer; 420 cursor: pointer;
405 } 421 }
406 #d{ 422 #d {
407 position: relative; 423 position: relative;
408 right: -150px; 424 right: -150px;
409 height: 17px; 425 height: 17px;
410 cursor: pointer; 426 cursor: pointer;
411 } 427 }
412 #td { 428 #td {
413 border: 1px solid #dddddd; 429 border: 1px solid #dddddd;
414 text-align: left; 430 text-align: left;
415 padding: 8px; 431 padding: 8px;
416 } 432 }
417 #dialog{ 433 #dialog {
418 height:550px; 434 height: 550px;
419 435 }