templates/conference/Registration.html.ep

   1 <script>
   2
   3 if (typeof (console) === 'undefined') console = { debug: function() {} }; // mock console.debug
   4
   5 function Registration($resource){
   6         this.master = {
   7                 person: {
   8                         name: '', surname: '', inst: '', email: '',
   9                 },
  10                 type: '', // just attending
  11                 work: {
  12                         title: '',
  13                         abstract: '',
  14                         authors:[ { name:'', surname:'', inst:'', email:'' } ],
  15                 },
  16                 symposium: { organizers: [ {name:'', surname:'', inst:'', email:'' } ], work_nr: 1, },
  17         };
  18         this.Registration = $resource( '/data/conference/Registration/:id', { id:'' } );
  19         this.Symposium = $resource( '/data/conference/Symposium/:id', { id:'' } );
  20         this.reset();
  21         this.$watch('$location.hashPath', this.hash_change);
  22 }
  23 Registration.$inject=['$resource'];
  24
  25 Registration.prototype = {
  26         hash_change: function() {
  27                 var id = this.$location.hashPath;
  28 console.debug( 'hash_change', id, this.registration.$id );
  29                 if ( id != this.registration.$id ) {
  30                         if (id) {
  31                                 var self = this;
  32                                 this.registration = this.Registration.get({ id: id }, function(registration) {
  33                                         self.last_saved = angular.copy(registration);
  34                                         if ( registration.type == 'symposium' ) {
  35                                                 var s_id = registration.symposium.$id || registration.$id;
  36                                                 // first registration doesn't have symposium.$id, but we used same $id
  37 console.debug( 'load symposium ', s_id );
  38                                                 self.symposium = self.Symposium.get({ id: s_id });
  39                                         }
  40                                 });
  41                         }
  42                         else this.reset();
  43                 }
  44         },
  45         reset: function() {
  46                 console.debug( this.Registration );
  47                 var last = this.registration;
  48                 if ( last && last.type == 'symposium' ) {
  49                         if ( last.$id ) last.symposium.work_nr++; // only if saved
  50                 }
  51                 this.registration = new this.Registration( this.master );
  52                 if ( last ) {
  53                         this.registration.category  = last.category;
  54                         this.registration.type      = last.type;
  55                         this.registration.person    = last.person;
  56
  57                         if ( last.type == 'symposium' )
  58                         this.registration.symposium = last.symposium;
  59                 }
  60                 this.last_saved = {};
  61 console.debug( 'reset', this.registration, this.$location.hashPath, last );
  62         },
  63         save: function(){
  64                 var self = this;
  65                 this.registration.$save(function(registration){
  66                         self.$location.hashPath = registration.$id;
  67
  68                         // save symposium to separate resource
  69                         if ( registration.type == 'symposium' ) {
  70                                 if ( ! self.symposium ) {
  71                                         self.registration.symposium.$id = registration.$id; // reuse $id of first work for symposium
  72                                         self.symposium = new self.Symposium( registration.symposium );
  73                                         self.symposium.works = [];
  74                                 }
  75                                 registration.work.$id = registration.$id; // preserve $id
  76                                 self.symposium.works[ registration.symposium.work_nr - 1 ] = registration.work;
  77 console.debug('save_symposium', self.symposium );
  78                                 self.symposium.$save();
  79                         }
  80
  81                         self.last_saved = angular.copy(registration);
  82                 });
  83         },
  84 };
  85
  86 angular.validator.max_length = function(input, len) {
  87         var ok = input.length <= len;
  88 console.debug( 'max_length', ok, input.length, len );
  89         return ok ? '' : 'must be shorter than '+len+' characters';
  90 }
  91
  92 </script>
  93
  94
  95 <style type="text/css">
  96
  97 body {
  98         background: #F6F6F6;
  99         margin: 40px;
 100         font-family: Arial;
 101         color: #374E5A;
 102         font-size: 14px;
 103         line-height: 16px;
 104 }
 105 label, h2 {
 106         display: block;
 107         color: #D74F25;
 108         color: #374E5A;
 109         color: #afafaf;
 110         margin-top: 10px;
 111         font-size: 14px;
 112         font-family: Arial;
 113 }
 114
 115 h2 {
 116         margin-top: 40px;
 117         color: #374E5A;
 118         color: #D74F25;
 119 }
 120
 121 a {
 122         color: #D74F25;
 123 }
 124
 125 label {
 126         color: #374E5A;
 127 }
 128
 129 .fl {
 130         color: #afafaf;
 131         float: left;
 132         margin: 2px;
 133         padding: 0 6px;
 134 }
 135
 136 .fl1 {
 137         width: 40.8em;
 138 }
 139
 140 .fl2 {
 141         width: 8em;
 142 }
 143
 144 .fl3 {
 145         width: 13em;
 146 }
 147
 148 .flClear {
 149         clear: both;
 150 }
 151
 152 .labelTop .pname, .labelTop .name, .labelTop .surname, .labelTop .pinst, .labelTop .email, .labelTop .city, .labelTop .address, .labelTop .contact {
 153         color: #afafaf;
 154         float: left;
 155         margin: 2px;
 156         padding: 0 6px;
 157 }
 158
 159 .pname, .name, .surname, .email {
 160         width: 10em;
 161 }
 162
 163 .pinst {
 164         width: 21.4em;
 165 }
 166
 167 .address {
 168         width: 14.1em;
 169 }
 170
 171 .city {
 172         width: 9em;
 173 }
 174
 175 .contact {
 176         width: 10em;
 177 }
 178
 179 .title, .summary {
 180         width: 93%;
 181 }
 182
 183 .authors {
 184         clear: both;
 185         margin-bottom: 6px;
 186 }
 187
 188 .addPerson {
 189         color: #D74F25;
 190         color: #EDC8BC;
 191         color: #EAB3A2;
 192         font-size: 90%;
 193 }
 194
 195 input, textarea
 196 {
 197         font: 14px arial;
 198         color: #000000;
 199         border: solid 1px #dedede;
 200         padding: 6px;
 201         background: #f6f6f6;
 202 }
 203
 204 input:focus, textarea:focus
 205 {
 206
 207         background: #ffffff;
 208         font-family: arial;
 209         color: #000000;
 210         border: 1px solid #46d0fe;
 211 }
 212
 213 input.ng-validation-error {
 214         border: 1px solid #D74F25;
 215         border: 1px solid #FF6666;
 216         border: 1px solid #EDC8BC;
 217         border: 1px solid #FF9966;
 218         border: 1px solid #EAB3A2;
 219 }
 220
 221 .warrning {
 222         color: #FF6666;
 223 }
 224
 225 .sworks {
 226         margin-top: 20px;
 227 }
 228
 229 .save {
 230         margin-top: 10px;
 231 }
 232
 233 .save input
 234 {
 235         float: left;
 236         color: #ffffff;
 237         display: block;
 238         text-decoration: none;
 239         background: #d74f25;
 240 }
 241
 242 .save input:hover
 243 {
 244         background: #dc6844;
 245 }
 246
 247 .newWork {
 248         clear: left;
 249         margin-top: 50px;
 250 }
 251 .saved {
 252         color: #D74F25;
 253         margin-top: 20px;
 254 }
 255 #buttons {
 256         margin-top: 20px;
 257 }
 258 </style>
 259
 260
 261
 262 <h1>Registration and Proposal Submission</h1>
 263
 264 <div ng:controller="Registration" ng:init="$window.$root = this;">
 265
 266
 267 <div id="choose"> <!-- ng:show="! registration.symposium.$id"> -->
 268         <h2>Please choose:</h2>
 269         <label><input type="radio" name="registration.category" value="participant" ng:required>Just attending the conference</label>
 270         <label><input type="radio" name="registration.category" value="submission">I want to submit a work</label>
 271 </div>
 272
 273
 274 <div id="participant" ng:show="registration.category">
 275         <h2>Contact Information</h2>
 276         <div class="labelTop">
 277                 <div class="pname">First name</div>
 278                 <div class="pname">Surname</div>
 279         </div>
 280         <div style="clear: both">
 281                 <input class="pname" name="registration.person.name" ng:required>
 282                 <input class="pname" name="registration.person.surname">
 283         </div>
 284         <div class="labelTop">
 285                 <div class="pinst">Institution</div>
 286         </div>
 287         <div style="clear: both">
 288                 <input class="pinst" name="registration.person.inst">
 289         </div>
 290         <div class="labelTop">
 291                 <div class="address">Address</div>
 292         </div>
 293         <div style="clear: both">
 294                 <input class="address" name="registration.person.address1">
 295                 <input class="address" name="registration.person.address2">
 296         </div>
 297         <div class="labelTop">
 298                 <div class="city">City</div>
 299                 <div class="city">ZIP</div>
 300                 <div class="city">Country</div>
 301         </div>
 302         <div style="clear: both">
 303                 <input class="city" name="registration.person.city">
 304                 <input class="city" name="registration.person.zip">
 305                 <input class="city" name="registration.person.country">
 306         </div>
 307         <div class="labelTop">
 308                 <div class="contact">E-mail</div>
 309                 <div class="contact">Phone number</div>
 310         </div>
 311         <div style="clear: both">
 312                 <input class="contact" name="registration.person.email" ng:validate="email" ng:required>
 313                 <input class="contact" name="registration.person.phone">
 314         </div>
 315 </div>
 316
 317
 318 <div id="submission" ng:show="registration.category == 'submission'">
 319         <div>
 320                 <h2>Choose submittion type:</h2>
 321                 <input type="radio" name="registration.type" value="symposium" ng:required>Symposia<br/>
 322                 <input type="radio" name="registration.type" value="lecture" ng:required>Oral presentation<br/>
 323                 <input type="radio" name="registration.type" value="poster" ng:required>Poster presentation<br/>
 324                 <input type="radio" name="registration.type" value="round" ng:required>Round table discussion<br/>
 325         </div>
 326 </div>
 327
 328
 329
 330
 331 <div id="work" ng:show="registration.categegory == 'submission'">
 332         <div ng:show="registration.type == 'symposium'">
 333
 334                 <h2>Symposia Submission</h2>
 335                 <label>Topic:</label>
 336                         <input class="fl1" name="registration.symposium.title" ng:required>
 337                 <label>Organizer:</label>
 338                 <div>
 339                         <div class="fl fl2">First name</div><div class="fl fl2">Surname</div><div class="fl fl3">Institution</div><div class="fl fl2">E-mail</div>
 340                 </div>
 341                 <div class="flClear" ng:repeat="organizer in registration.symposium.organizers">
 342                         <input class="fl2" name="organizer.name" ng:required>
 343                         <input class="fl2" name="organizer.surname" ng:required>
 344                         <input class="fl3" name="organizer.inst" >
 345                         <input class="fl2" name="organizer.email" ng:required>
 346                         <a href="" ng:click="registration.symposium.organizers.$remove(organizer)">X</a>
 347                 </div>
 348                 <a class="addPerson" href="" ng:click="registration.symposium.organizers.$add()">Add another organizer</a>
 349                 <label>Summary:</label>
 350                         <textarea class="fl1" name="registration.symposium.abstract" rows="5" ng:validate="max_length:2000"></textarea>
 351                 <div ng:show="symposium">
 352                         <label>List of already submitted works</label>
 353                         <ol>
 354                         <li ng:repeat="w in symposium.works">
 355                         <a ng:show="registration.$id != w.$id" href="#{{w.$id}}" >{{w.title}}</a>
 356                         <b ng:show="registration.$id == w.$id">{{w.title}}</b>
 357                         </li>
 358                         </ol>
 359                 </div>
 360         </div>
 361         <h2 ng:show="registration.type == 'symposium'">Work no. {{registration.symposium.work_nr}}.  in <i>{{registration.symposium.title}}</i> </h2>
 362         <h2 ng:show="registration.type == 'lecture'">Oral Presentation Sumbission</h2>
 363         <h2 ng:show="registration.type == 'poster'">Poster Presentation Sumbission</h2>
 364         <h2 ng:show="registration.type == 'round'">Round Table Disscussion Sumbission</h2>
 365
 366         <label>Title:</label>
 367                 <input class="fl1" name="registration.work.title" ng:required>
 368         <label>Authors</label>
 369         <div>
 370                 <div class="fl fl2">First name</div><div class="fl fl2">Surname</div><div class="fl fl3">Institution</div><div class="fl fl2">E-mail</div>
 371         </div>
 372         <div class="flClear" ng:repeat="author in registration.work.authors">
 373                 <input class="fl2" name="author.name" ng:required>
 374                 <input class="fl2" name="author.surname" ng:required>
 375                 <input class="fl3" name="author.inst" >
 376                 <input class="fl2" name="author.email" ng:required>
 377                 <a href="" ng:click="registration.work.authors.$remove(author)">X</a>
 378         </div>
 379         <a class="addPerson" href="" ng:click="registration.work.authors.$add()">Add another author</a>
 380
 381
 382         <label>Summary:</label>
 383                 <textarea class="fl1" name="registration.work.abstract" rows="5" ng:validate="max_length:2000"></textarea>
 384
 385
 386         <div ng:show="registration.$id" class="saved">
 387                 <i>{{registration.work.title}}</i> has been submited successfully.<br>
 388         </div>
 389
 390 </div>
 391
 392 <input type="submit" value="Save" ng:click="save();" ng:show="! last_saved.$equals(registration) && $invalidWidgets.visible() == 0">
 393
 394 <div ng:show="$invalidWidgets.visible() &gt; 0" style="color:red; margin-top: 20px">Please fill all required fields ({{$invalidWidgets.visible()}} fields left).
 395 </div>
 396
 397
 398
 399
 400 <div style="margin-bottom: 40px" ng:show="registration.$id && last_saved.$equals(registration)">
 401         <div class="saved" ng:show="registration.category == 'participant'">
 402         Your registration has been submitted successfully.
 403         </div>
 404         Please review your data, correct and save if needed or <a href="http://psihologija.ffzg.hr/drzb2011/">go to conference home page</a>.
 405         <div>
 406         Registration ID: <a href="#{{registration.$id}}">{{registration.$id}}</a>.<br>You can bookmark this page and review it later.
 407         </div>
 408 </div>
 409
 410
 411 <input type="reset" value="Another work proposal to submit?" ng:click="reset()" ng:show="registration.$id && registration.category == 'submission'">
 412
 413 <!--
 414 <div ng:show="registration.$id">
 415 Permalink to <a href="#{{registration.$id}}">DRZB2011 registration</a> which you can bookmark
 416 </div>
 417 -->
 418
 419 <hr>
 420 Debug Information:
 421 {{$window.location.href}}
 422 <pre>
 423 registration = {{registration}}
 424
 425 dirty={{! last_saved.$equals(registration)}}
 426
 427 last_saved = {{last_saved}}
 428
 429 master = {{master}}
 430
 431 symposium = {{symposium}}
 432
 433 $id={{$id}}
 434 registration.$id={{registration.$id}}
 435 </pre>
 436
 437 </div>