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