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