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         font-weight: normal;
 111 }
 112
 113 h2 {
 114         margin-top: 40px;
 115         color: #374E5A;
 116         color: #D74F25;
 117 }
 118
 119 a {
 120         color: #D74F25;
 121         font-size: 80%;
 122 }
 123
 124 .symposium, .work {
 125         width: 615px;
 126 }
 127
 128 label {
 129         color: #374E5A;
 130 }
 131
 132 .authors-label .name, .authors-label .surname, .authors-label .inst, .authors-label .email {
 133         color: #afafaf;
 134         float: left;
 135         margin: 2px;
 136         padding: 0 6px;
 137 }
 138
 139 .name, .surname, .email {
 140         width: 18%;
 141 }
 142
 143 .inst {
 144         width: 30%;
 145 }
 146
 147 .title, .summary {
 148         width: 93%;
 149 }
 150
 151 .authors {
 152         clear: both;
 153         margin-bottom: 6px;
 154 }
 155
 156 .authors-label {
 157         clear: right;
 158 }
 159
 160
 161
 162 .addNew {
 163         padding-right: 30px;
 164 }
 165
 166 input, textarea
 167 {
 168         font: 14px arial;
 169         color: #000000;
 170         border: solid 1px #dedede;
 171         padding: 6px;
 172         background: #f6f6f6;
 173 }
 174
 175 input:focus, textarea:focus
 176 {
 177
 178         background: #ffffff;
 179         font-family: arial;
 180         color: #000000;
 181         border: 1px solid #46d0fe;
 182 }
 183
 184 input.ng-validation-error {
 185         border: 1px solid #D74F25;
 186         border: 1px solid #FF6666;
 187         border: 1px solid #FF9966;
 188         border: 1px solid #EDC8BC;
 189 }
 190
 191 .warrning {
 192         color: #FF6666;
 193 }
 194
 195 .sworks {
 196         margin-top: 20px;
 197 }
 198
 199 .save {
 200         margin-top: 10px;
 201 }
 202
 203 .save input
 204 {
 205         float: left;
 206         color: #ffffff;
 207         display: block;
 208         text-decoration: none;
 209         background: #d74f25;
 210 }
 211
 212 .save input:hover
 213 {
 214         background: #dc6844;
 215 }
 216
 217 .newWork {
 218         clear: left;
 219         margin-top: 50px;
 220 }
 221 </style>
 222
 223
 224
 225 <h1>Registration and Proposal Submission</h1>
 226
 227 <div ng:controller="Registration" ng:init="$window.$root = this;">
 228
 229 <div id="registration">
 230
 231 <input class="name" name="registration.person.name" ng:required>
 232 <input class="name" name="registration.person.surname" ng:required>
 233
 234 <input name="registration.person.inst">
 235 <input name="registration.person.email" ng:validate="email">
 236
 237 </div>
 238
 239 <div id="submission">
 240
 241 <h2>Type of conference submission:</h2>
 242
 243 <input type="radio" name="registration.type" value="">Just attending conference<br/>
 244 <input type="radio" name="registration.type" value="symposium">Symposia<br/>
 245 <input type="radio" name="registration.type" value="lecture">Oral presentation<br/>
 246 <input type="radio" name="registration.type" value="poster">Poster presentation<br/>
 247 <input type="radio" name="registration.type" value="round">Round table discussion<br/>
 248
 249 <div id="submit_work" ng:show="registration.type">
 250
 251 <div ng:show="registration.type == 'symposium'" style="background:#f0f0f0">
 252
 253 <label>Topic of symposium: <input name="registration.symposium.title" size="60" ng:required></label><br/>
 254
 255 <label>Summary: <br/>
 256 <textarea name="registration.symposium.abstract" cols="50" rows="5"></textarea>
 257 </label>
 258 <br/>
 259
 260 Organizer:
 261 <div ng:repeat="organizer in registration.symposium.organizers">
 262 [<a href="" ng:click="registration.symposium.organizers.$remove(author)">X</a>]
 263 <input name="organizer.name" ng:required>
 264 <input name="organizer.surname" ng:required>
 265 <input name="organizer.inst" >
 266 <input name="organizer.email" ng:required>
 267 </div>
 268 [<a href="" ng:click="registration.symposium.organizers.$add()">Add another organizer</a>]
 269
 270 </div>
 271 <hr>
 272
 273 <div ng:show="symposium">
 274 Works which are part of this symposium:
 275 <ol>
 276 <li ng:repeat="w in symposium.works">
 277 <a ng:show="registration.$id != w.$id" href="#{{w.$id}}" >{{w.title}}</a>
 278 <b ng:show="registration.$id == w.$id">{{w.title}}</b>
 279 </li>
 280 </ol>
 281
 282 </div>
 283
 284 <h2>Autors<span ng:show="registration.type == 'symposium'"> of {{registration.symposium.work_nr}}. work </span></h2>
 285
 286 <div ng:repeat="author in registration.work.authors">
 287 [<a href="" ng:click="registration.work.authors.$remove(author)">X</a>]
 288 <input name="author.name" ng:required>
 289 <input name="author.surname" ng:required>
 290 <input name="author.inst" >
 291 <input name="author.email" ng:required>
 292 </div>
 293 [<a href="" ng:click="registration.work.authors.$add()">Add another author</a>]
 294
 295 <hr>
 296
 297 <label>Title: <input name="registration.work.title" size="60" ng:required></label><br/>
 298
 299 <label>Summary:<br>
 300 <textarea name="registration.work.abstract" cols="50" rows="5"></textarea>
 301 </label>
 302 <br/>
 303
 304 </div>
 305
 306 <div id="buttons">
 307
 308 <span ng:show="$invalidWidgets.visible() == 0">
 309 <input type="submit" value="Save" ng:click="save();" ng:show="! last_saved.$equals(registration)">
 310 <input type="reset" value="Add another work" ng:click="reset()" ng:show="registration && registration.$id">
 311 </span>
 312
 313 <b ng:show="$invalidWidgets.visible() &gt; 0" style="color:#800">{{$invalidWidgets.visible()}} errors to fix in submission form</b>
 314 </div>
 315
 316
 317 <div ng:show="registration.$id">
 318 Permalink to <a href="#{{registration.$id}}">DRZB2011 registration</a> which you can bookmark
 319 </div>
 320
 321 </div><!-- registration.type == just attending -->
 322
 323 <hr>
 324 Debug Information:
 325 {{$window.location.href}}
 326 <pre>
 327 registration = {{registration}}
 328
 329 dirty={{! last_saved.$equals(registration)}}
 330
 331 last_saved = {{last_saved}}
 332
 333 master = {{master}}
 334
 335 symposium = {{symposium}}
 336
 337 $id={{$id}}
 338 registration.$id={{registration.$id}}
 339 </pre>
 340
 341 </div>