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