contrib/opportunity/src/templates/meetup.nit

   1 # This file is part of NIT ( http://www.nitlanguage.org ).
   2 #
   3 # Licensed under the Apache License, Version 2.0 (the "License");
   4 # you may not use this file except in compliance with the License.
   5 # You may obtain a copy of the License at
   6 #
   7 #     http://www.apache.org/licenses/LICENSE-2.0
   8 #
   9 # Unless required by applicable law or agreed to in writing, software
  10 # distributed under the License is distributed on an "AS IS" BASIS,
  11 # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12 # See the License for the specific language governing permissions and
  13 # limitations under the License
  14
  15 # Shows a meetup and allows to modify its participants
  16 module meetup
  17
  18 import opportunity_model
  19 import boilerplate
  20 import welcome
  21 import template
  22
  23 # Shows a meetup and allows to modify its participants
  24 class OpportunityMeetupPage
  25         super OpportunityPage
  26
  27         # Meetup the page is supposed to show
  28         var meetup: nullable Meetup = null
  29         # Answer mode for the meetup
  30         var mode = 0
  31
  32         init from_id(id: String) do
  33                 var db = new OpportunityDB.open("opportunity")
  34                 meetup = db.find_meetup_by_id(id)
  35                 db.close
  36                 if meetup != null then mode = meetup.answer_mode
  37                 init
  38         end
  39
  40         init do
  41                 header.page_js = "mode = {mode};\n"
  42                 header.page_js += """
  43                 function change_answer(ele, id){
  44                         // modify only the currently selected entry
  45                         if (in_modification_id != id) return;
  46
  47                         var e = document.getElementById(ele.id);
  48                         var i = e.innerHTML;
  49                         var ans = true;
  50                         if(i === "<center>✔</center>"){
  51                                 ans = 1;
  52                                 e.innerHTML = "<center>❓</center>"
  53                                 e.style.color = "orange";
  54                         }else if(i === "<center>❓</center>"){
  55                                 ans = 0;
  56                                 e.innerHTML = "<center>✘</center>"
  57                                 e.style.color = "red";
  58                         }else{
  59                                 ans = 2;
  60                                 e.innerHTML = "<center>✔</center>";
  61                                 e.style.color = "green";
  62                         }
  63                         var a = ele.id.split('_')
  64                         var pid = a[1]
  65                         var aid = a[2]
  66                         $.ajax({
  67                                 type: "POST",
  68                                 url: "./rest/answer",
  69                                 data: {
  70                                         answer_id: aid,
  71                                         pers_id: pid,
  72                                         answer: ans
  73                                 }
  74                         });
  75                 }
  76                 function change_temp_answer(ele){
  77                         var e = document.getElementById(ele.id);
  78                         var i = e.innerHTML;"""
  79                 if mode == 0 then
  80                         header.page_js += """
  81                         if(i === "<center>✔</center>"){
  82                                 e.innerHTML = "<center>✘</center>"
  83                                 e.style.color = "red";
  84                         }else{
  85                                 e.innerHTML = "<center>✔</center>";
  86                                 e.style.color = "green";
  87                         }
  88                         """
  89                 else
  90                         header.page_js += """
  91                         if(i === "<center>✔</center>"){
  92                                 e.innerHTML = "<center>❓</center>";
  93                                 e.style.color = "orange";
  94                         }else if(i === "<center>❓</center>"){
  95                                 e.innerHTML = "<center>✘</center>"
  96                                 e.style.color = "red";
  97                         }else{
  98                                 e.innerHTML = "<center>✔</center>";
  99                                 e.style.color = "green";
 100                         }
 101                         """
 102                 end
 103                 header.page_js += """
 104                 }
 105                 function add_part(ele){
 106                         var e = document.getElementById(ele.id);
 107                         var pname = document.getElementById("new_name").value;
 108                         var arr = e.id.split("_");
 109                         var mid = arr[1];
 110                         var ans = $('#' + ele.id).parent().parent().parent().children(".answer");
 111                         ansmap = {};
 112                         for(i=0;i<ans.length;i++){
 113                                 var curr = ans.eq(i)
 114                         """
 115                 if mode == 0 then
 116                         header.page_js += """
 117                                 if(curr[0].innerHTML === "<center>✔</center>"){
 118                                         ansmap[curr.attr('id')] = 1
 119                                 }else{
 120                                         ansmap[curr.attr('id')] = 0
 121                                 }"""
 122                 else
 123                         header.page_js += """
 124                                 if(curr[0].innerHTML === "<center>✔</center>"){
 125                                         ansmap[curr.attr('id')] = 2
 126                                 }else if(curr[0].innerHTML === "<center>❓</center>"){
 127                                         ansmap[curr.attr('id')] = 1
 128                                 }else{
 129                                         ansmap[curr.attr('id')] = 0
 130                                 }"""
 131                 end
 132                 header.page_js += """
 133                         }
 134                         $.ajax({
 135                                 type: "POST",
 136                                 url: "./rest/meetup/new_pers",
 137                                 data: {
 138                                         meetup_id: mid,
 139                                         persname: pname,
 140                                         answers: $.param(ansmap)
 141                                 }
 142                                 })
 143                                 .done(function(data){
 144                                         location.reload();
 145                                 })
 146                                 .fail(function(data){
 147                                         //TODO: Notify of failure
 148                                 });
 149                 }
 150                 function remove_people(ele){
 151                         var arr = ele.id.split("_")
 152                         var pid = arr[1]
 153                         $('#' + ele.id).parent().parent().parent().remove();
 154                         $.ajax({
 155                                 type: "POST",
 156                                 url: "./rest/people",
 157                                 data: {
 158                                         method: "DELETE",
 159                                         p_id: pid
 160                                 }
 161                         });
 162                 }
 163
 164                 // ID of line currently open for modification
 165                 var in_modification_id = null;
 166                 function modify_people(ele, id){
 167                         if (in_modification_id != null) {
 168                                 // reset to normal values
 169                                 $('#modify_'+in_modification_id).text("Modify or delete");
 170                                 $('#modify_'+in_modification_id).attr("class", "btn btn-xs btn-warning");
 171                                 $('#line_'+in_modification_id).css("background-color", "");
 172                                 $('#delete_'+in_modification_id).css("display", "none");
 173                         }
 174                         if (in_modification_id != id) {
 175                                 // activate modifiable mode
 176                                 $('#modify_'+id).text("Done");
 177                                 $('#modify_'+id).attr("class", "btn btn-xs btn-success");
 178                                 $('#line_'+id).css("background-color", "LightYellow");
 179                                 $('#delete_'+id).show();
 180
 181                                 in_modification_id = id;
 182                         } else {
 183                                 in_modification_id = null;
 184                         }
 185                 }
 186                 """
 187         end
 188
 189         redef fun rendering do
 190                 if meetup == null then
 191                         add((new OpportunityHomePage).write_to_string)
 192                         return
 193                 end
 194                 add header
 195                 var db = new OpportunityDB.open("opportunity")
 196                 add meetup.to_html(db)
 197                 db.close
 198                 add footer
 199         end
 200 end
 201
 202 redef class Meetup
 203         # Build the HTML for `self`
 204         fun to_html(db: OpportunityDB): Streamable do
 205                 var t = new Template
 206                 t.add """
 207 <div class="container">
 208 <div class="page-header">
 209         <center><h1>{{{name}}}</h1></center>
 210 """
 211                 if not date.is_empty then t.add """
 212         <center><h4>When: {{{date}}}</h4></center>"""
 213
 214                 if not place.is_empty then t.add """
 215         <center><h4>Where: {{{place}}}</h4></center>"""
 216
 217                 t.add """
 218 </div>
 219 <table class="table">
 220 """
 221                 t.add "<th>Participant name</th>"
 222                 for i in answers(db) do
 223                         t.add "<th class=\"text-center\">"
 224                         t.add i.to_s
 225                         t.add "</th>"
 226                 end
 227                 t.add "<th></th>"
 228                 t.add "</tr>"
 229                 for i in participants(db) do
 230                         i.load_answers(db, self)
 231                         t.add "<tr id=\"line_{i.id}\">"
 232                         t.add "<td>"
 233                         t.add i.to_s
 234                         t.add "</td>"
 235                         for j, k in i.answers do
 236                                 var color
 237                                 if answer_mode == 0 then
 238                                         if k == 1 then
 239                                                 color = "green"
 240                                         else
 241                                                 color = "red"
 242                                         end
 243                                 else
 244                                         if k == 2 then
 245                                                 color = "green"
 246                                         else if k == 1 then
 247                                                 color = "#B8860B"
 248                                         else
 249                                                 color = "red"
 250                                         end
 251                                 end
 252                                 t.add """<td class="answer" onclick="change_answer(this, {{{i.id}}})" id="answer_{{{j.id}}}_{{{i.id}}}" style="color:{{{color}}}">"""
 253                                 t.add "<center>"
 254                                 if answer_mode == 0 then
 255                                         if k == 1 then
 256                                                 t.add "✔"
 257                                         else
 258                                                 t.add "✘"
 259                                         end
 260                                 else
 261                                         if k == 2 then
 262                                                 t.add "✔"
 263                                         else if k == 1 then
 264                                                 t.add "❓"
 265                                         else
 266                                                 t.add "✘"
 267                                         end
 268                                 end
 269                                 t.add "</center></td>"
 270                         end
 271                         t.add """<td class="opportunity-action"><center><button class="btn btn-xs btn-warning" type="button" onclick="modify_people(this, {{{i.id}}})" id="modify_{{{i.id}}}">Modify or delete</button>&nbsp;"""
 272                         t.add """<button class="btn btn-xs btn-danger" type="button" onclick="remove_people(this)" id="delete_{{{i.id}}}" style="display: none;">Delete</button></center></td>"""
 273                         t.add "</tr>"
 274                 end
 275                 t.add """
 276 <tr id="newrow" style="background-color: LightYellow">
 277         <td><input id="new_name" type="text" placeholder="Your name" class="input-large"></td>
 278                 """
 279                 for i in answers(db) do
 280                         t.add "<td class=\"answer\" id=\"newans_{i.id}\" onclick=\"change_temp_answer(this)\" style=\"color:red;\"><center>✘</center></td>"
 281                 end
 282                 t.add """
 283         <td><center><span id="add_{{{id}}}" onclick="add_part(this)" style="color:green;" class="action"><button class="btn btn-xs btn-success" type="button">Done</button></span></center></td>"""
 284                 t.add "</tr>"
 285                 t.add "</table>"
 286                 t.add "</div>"
 287                 return t
 288         end
 289 end