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