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