1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/app/main/survey/participate.lua	Thu Feb 03 15:57:22 2022 +0100
     1.3 @@ -0,0 +1,153 @@
     1.4 +local survey = Survey:get_open()
     1.5 +if not survey then
     1.6 +  return execute.view { module = "index", view = "404" }
     1.7 +end
     1.8 +
     1.9 +local survey_member = SurveyMember:by_pk(survey.id, app.session.member_id)
    1.10 +if not survey_member then
    1.11 +  return execute.view { module = "index", view = "404" }
    1.12 +end
    1.13 +
    1.14 +local question
    1.15 +local question_number = #survey.questions
    1.16 +
    1.17 +if survey_member then
    1.18 +  local answer_set = survey_member.answer_set
    1.19 +  if answer_set then
    1.20 +    local answers_by_question_id = {}
    1.21 +    for i, answer in ipairs(answer_set.answers) do
    1.22 +      answers_by_question_id[answer.survey_question_id] = answer
    1.23 +    end
    1.24 +    for i, q in ipairs(survey.questions) do
    1.25 +      if not question and not answers_by_question_id[q.id] then
    1.26 +        question = q
    1.27 +        question_number = i - 1
    1.28 +      end
    1.29 +    end
    1.30 +  end
    1.31 +end
    1.32 +
    1.33 +ui.title(survey.title)
    1.34 +ui.grid{ content = function()
    1.35 +  ui.cell_main{ content = function()
    1.36 +
    1.37 +    ui.container{ attr = { class = "mdl-card mdl-card__fullwidth mdl-shadow--2dp survey" }, content = function()
    1.38 +      ui.container{ attr = { class = "mdl-card__title" }, content = function()
    1.39 +        ui.heading { attr = { class = "mdl-card__title-text" }, level = 2, content = function()
    1.40 +          if survey_member.finished then
    1.41 +            slot.put(survey.finished_title)
    1.42 +          else
    1.43 +            ui.tag{ attr = { class = "survey_counter" }, content = (question_number + 1) .. " / " .. #survey.questions }
    1.44 +            ui.tag{ tag = "span", content = question.question }
    1.45 +          end
    1.46 +        end }
    1.47 +      end }
    1.48 +      slot.put('<div id = "progressbar1" style="width: 100%;" class = "mdl-progress mdl-js-progress"></div>')
    1.49 +      
    1.50 +      ui.script{ script = [[
    1.51 +        document.querySelector('#progressbar1').addEventListener('mdl-componentupgraded', 
    1.52 +            function() {
    1.53 +            this.MaterialProgress.setProgress(]] .. question_number / #survey.questions * 100 .. [[);
    1.54 +         }); 
    1.55 +      
    1.56 +      ]] }
    1.57 +      ui.container{ attr = { class = "mdl-card__content mdl-card--border" }, content = function()
    1.58 +        if survey_member.finished then
    1.59 +          ui.container{ content = function()
    1.60 +            slot.put(survey.finished_text)
    1.61 +          end }
    1.62 +          slot.put("<br>")
    1.63 +          ui.link{
    1.64 +            attr = { class = "mdl-button mdl-js-button mdl-button--raised mdl-button--colored" },
    1.65 +            module = "index", view = "index", content = _"Go to start page"
    1.66 +          }
    1.67 +          return
    1.68 +        else
    1.69 +          if question.description then
    1.70 +            ui.container{ content = question.description }
    1.71 +            slot.put("<br>")
    1.72 +          end
    1.73 +          ui.form{
    1.74 +            module = "survey", action = "answer",
    1.75 +            routing = {
    1.76 +              ok = { mode = "redirect", module = "survey", view = "participate" },
    1.77 +              error = { mode = "forward", module = "survey", view = "participate" },
    1.78 +            },
    1.79 +            content = function()
    1.80 +            
    1.81 +              ui.field.hidden{ name = "question_id", value = question.id }
    1.82 +
    1.83 +              if question.answer_type == "radio" then
    1.84 +                for i, answer_option in ipairs(question.answer_options) do
    1.85 +                  ui.container{ content = function()
    1.86 +                    ui.tag{ tag = "label", attr = {
    1.87 +                        class = "mdl-radio mdl-js-radio mdl-js-ripple-effect",
    1.88 +                        ["for"] = "answer_" .. i
    1.89 +                      },
    1.90 +                      content = function()
    1.91 +                        ui.tag{
    1.92 +                          tag = "input",
    1.93 +                          attr = {
    1.94 +                            id = "answer_" .. i,
    1.95 +                            class = "mdl-radio__button",
    1.96 +                            type = "radio",
    1.97 +                            name = "answer",
    1.98 +                            value = answer_option,
    1.99 +                            checked = param.get("answer") == answer_option and "checked" or nil,
   1.100 +                          }
   1.101 +                        }
   1.102 +                        ui.tag{
   1.103 +                          attr = { class = "mdl-radio__label", ['for'] = "answer_" .. i },
   1.104 +                          content = answer_option
   1.105 +                        }
   1.106 +                      end
   1.107 +                    }
   1.108 +                  end }
   1.109 +                end
   1.110 +
   1.111 +              elseif question.answer_type == "checkbox" then
   1.112 +                for i, answer_option in ipairs(question.answer_options) do
   1.113 +                  ui.container{ content = function()
   1.114 +                    ui.tag{ tag = "label", attr = {
   1.115 +                        class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect",
   1.116 +                        ["for"] = "answer_" .. i
   1.117 +                      },
   1.118 +                      content = function()
   1.119 +                        ui.tag{
   1.120 +                          tag = "input",
   1.121 +                          attr = {
   1.122 +                            id = "answer_" .. i,
   1.123 +                            class = "mdl-checkbox__input",
   1.124 +                            type = "checkbox",
   1.125 +                            name = "answer_" .. answer_option,
   1.126 +                            value = "1",
   1.127 +                            checked = param.get("answer_" .. answer_option) and "checked" or nil,
   1.128 +                          }
   1.129 +                        }
   1.130 +                        ui.tag{
   1.131 +                          attr = { class = "mdl-checkbox__label", ['for'] = "answer_" .. i },
   1.132 +                          content = answer_option
   1.133 +                        }
   1.134 +                      end
   1.135 +                    }
   1.136 +                  end }
   1.137 +                end
   1.138 +              end
   1.139 +
   1.140 +              slot.put("<br>")
   1.141 +              ui.tag{
   1.142 +                tag = "input",
   1.143 +                attr = {
   1.144 +                  type = "submit",
   1.145 +                  class = "mdl-button mdl-js-button mdl-button--raised mdl-button--colored",
   1.146 +                  value = _"Next step"
   1.147 +                },
   1.148 +                content = ""
   1.149 +              }
   1.150 +            end
   1.151 +          }
   1.152 +        end
   1.153 +      end }
   1.154 +    end }
   1.155 +  end }
   1.156 +end }