decidim-time_tracker 0.3

data/README.md

@@ -0,0 +1,174 @@
+# Decidim::TimeTracker
+
+[![Test](https://github.com/Platoniq/decidim-module-time_tracker/workflows/Test/badge.svg)](https://github.com/Platoniq/decidim-module-time_tracker/actions)
+[![Maintainability](https://api.codeclimate.com/v1/badges/9372a7def91c50d04e8c/maintainability)](https://codeclimate.com/github/Platoniq/decidim-module-time_tracker/maintainability)
+[![codecov](https://codecov.io/gh/Platoniq/decidim-module-time_tracker/branch/master/graph/badge.svg)](https://codecov.io/gh/Platoniq/decidim-module-time_tracker)
+
+> **WARNING** This is not ready for production usage yet (though soon will be).
+
+A tool for Decidim that allows to track time dedicated by volunteers doing any arbitrary task.
+
+## Usage
+
+TimeTracker will be available as a Component for a Participatory
+Space.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem "decidim-time_tracker", git: "https://github.com/Platoniq/decidim-module-time_tracker"
+```
+
+And then execute:
+
+```bash
+bundle
+bundle exec rails decidim_time_tracker:install:migrations
+bundle exec rails db:migrate
+```
+
+## About Time tracker and attached questionnaires
+
+By default, every time tracker component has an attached questionnaire for the volunteer to fill with their personal data and to give their consent to the T&C (further referenced as **questionnaire for assignees**). Activities have also an attached questionnaire for the volunteer to fill when they request to be assigned to that activity (further referenced as **questionnaire for activities**). This is a very simple questionnaire with questions about how certain tasks may usually be perceived as related to certain genders. This can be useful to have a better understanding of the perception of tasks and their real gender assignation.
+
+Both questionnaires are enabled by default and can be customized. You may also disable the questionnaire shown for activities. However, take into account that administrators can always modify or create custom questionnaires.
+
+If you want to customize the default questionnaires or disable the questionnaire for activities, just create a new initializer in `config/initializers/time_tracker.rb` with the following content:
+
+**To use your own questionnaire for _assignees_** (use [config/default_assignee_questionnaire.yml](config/default_assignee_questionnaire.yml) as an example guide):
+```ruby
+# config/initializers/time_tracker.rb
+
+# Initialize my custom questionnaire placed in config/my_questionnaire.yml
+Decidim::TimeTracker.configure do |config|
+  config.default_assignee_questionnaire_seeds = YAML.load_file File.join(Rails.root, 'config', 'my_assignee_questionnaire.yml')
+end
+```
+
+**To use your own questionnaire for _activities_** (use [config/default_activity_questionnaire.yml](config/default_activity_questionnaire.yml) as an example guide):
+```ruby
+# config/initializers/time_tracker.rb
+
+# Initialize my custom questionnaire placed in config/my_questionnaire.yml
+Decidim::TimeTracker.configure do |config|
+  config.default_activity_questionnaire_seeds = YAML.load_file File.join(Rails.root, 'config', 'my_activities_questionnaire.yml')
+end
+```
+
+**To completely disable the default questionnaire for _activities_**:
+```ruby
+# config/initializers/time_tracker.rb
+
+# Disable the default questionnaire for time tracker
+Decidim::TimeTracker.configure do |config|
+  config.default_activity_questionnaire_seeds = nil
+end
+```
+
+> **NOTE:** If you customize your questionnaires, you can use any I18n key to translate it. Just add it to your locales.
+> You also can just put a direct text with no translations, then it will be used for all languages.
+
+## Contributing
+
+See [Decidim](https://github.com/decidim/decidim).
+
+### Developing
+
+To start contributing to this project, first:
+
+- Install the basic dependencies (such as Ruby and PostgreSQL)
+- Clone this repository
+
+Decidim's main repository also provides a Docker configuration file if you
+prefer to use Docker instead of installing the dependencies locally on your
+machine.
+
+You can create the development app by running the following commands after
+cloning this project:
+
+```bash
+bundle
+DATABASE_USERNAME=<username> DATABASE_PASSWORD=<password> bundle exec rake development_app
+```
+
+Note that the database user has to have rights to create and drop a database in
+order to create the dummy test app database.
+
+Then to test how the module works in Decidim, start the development server:
+
+```bash
+cd development_app
+DATABASE_USERNAME=<username> DATABASE_PASSWORD=<password> bundle exec rails s
+```
+
+In case you are using [rbenv](https://github.com/rbenv/rbenv) and have the
+[rbenv-vars](https://github.com/rbenv/rbenv-vars) plugin installed for it, you
+can add the environment variables to the root directory of the project in a file
+named `.rbenv-vars`. If these are defined for the environment, you can omit
+defining these in the commands shown above.
+
+#### Code Styling
+
+Please follow the code styling defined by the different linters that ensure we
+are all talking with the same language collaborating on the same project. This
+project is set to follow the same rules that Decidim itself follows.
+
+[Rubocop](https://rubocop.readthedocs.io/) linter is used for the Ruby language.
+
+You can run the code styling checks by running the following commands from the
+console:
+
+```
+bundle exec rubocop
+```
+
+To ease up following the style guide, you should install the plugin to your
+favorite editor, such as:
+
+- Atom - [linter-rubocop](https://atom.io/packages/linter-rubocop)
+- Sublime Text - [Sublime RuboCop](https://github.com/pderichs/sublime_rubocop)
+- Visual Studio Code - [Rubocop for Visual Studio Code](https://github.com/misogi/vscode-ruby-rubocop)
+
+### Testing
+
+To run the tests run the following in the gem development path:
+
+```bash
+bundle
+DATABASE_USERNAME=<username> DATABASE_PASSWORD=<password> bundle exec rake test_app
+DATABASE_USERNAME=<username> DATABASE_PASSWORD=<password> bundle exec rspec
+```
+
+Note that the database user has to have rights to create and drop a database in
+order to create the dummy test app database.
+
+In case you are using [rbenv](https://github.com/rbenv/rbenv) and have the
+[rbenv-vars](https://github.com/rbenv/rbenv-vars) plugin installed for it, you
+can add these environment variables to the root directory of the project in a
+file named `.rbenv-vars`. In this case, you can omit defining these in the
+commands shown above.
+
+### Test code coverage
+
+If you want to generate the code coverage report for the tests, you can use
+the `SIMPLECOV=1` environment variable in the rspec command as follows:
+
+```bash
+SIMPLECOV=1 bundle exec rspec
+```
+
+This will generate a folder named `coverage` in the project root which contains
+the code coverage report.
+
+### Localization
+
+If you would like to see this module in your own language, you can help with its
+translation at Crowdin:
+
+https://crowdin.com/project/decidim-module-time_tracker
+
+## License
+
+This engine is distributed under the GNU AFFERO GENERAL PUBLIC LICENSE.

data/Rakefile

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+require "decidim/dev/common_rake"
+
+def install_module(path)
+  Dir.chdir(path) do
+    system("bundle exec rake decidim_time_tracker:install:migrations")
+    system("bundle exec rake db:migrate")
+  end
+end
+
+def seed_db(path)
+  Dir.chdir(path) do
+    system("bundle exec rake db:seed")
+  end
+end
+
+desc "Generates a dummy app for testing"
+task test_app: "decidim:generate_external_test_app" do
+  ENV["RAILS_ENV"] = "test"
+  install_module("spec/decidim_dummy_app")
+end
+
+desc "Generates a development app."
+task :development_app do
+  Bundler.with_original_env do
+    generate_decidim_app(
+      "development_app",
+      "--app_name",
+      "#{base_app_name}_development_app",
+      "--path",
+      "..",
+      "--recreate_db",
+      "--demo"
+    )
+  end
+
+  install_module("development_app")
+  seed_db("development_app")
+end

data/app/assets/config/admin/decidim_time_tracker_manifest.css

@@ -0,0 +1,2 @@
+/*
+ */

data/app/assets/config/admin/decidim_time_tracker_manifest.js

@@ -0,0 +1 @@
+//= link decidim/time_tracker/admin/assignations.js

data/app/assets/config/decidim_time_tracker_manifest.css

@@ -0,0 +1,3 @@
+/*
+ *= link decidim/time_tracker/time_tracker.css
+ */

data/app/assets/config/decidim_time_tracker_manifest.js

@@ -0,0 +1 @@
+//= link decidim/time_tracker/time_tracker.js

data/app/assets/images/decidim/time_tracker/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35"><path d="M17.5 35A17.5 17.5 0 1 1 35 17.5 17.52 17.52 0 0 1 17.5 35zm0-33.06A15.56 15.56 0 1 0 33.06 17.5 15.57 15.57 0 0 0 17.5 1.94zm9.5 13.7H8a1 1 0 0 1 0-1.94h19a1 1 0 0 1 0 1.94zm0 3.68H8a1 1 0 0 1 0-1.94h19a1 1 0 0 1 0 1.94zM22.26 23H8a1 1 0 0 1 0-1.94h14.26a1 1 0 0 1 0 1.94z"/></svg>

data/app/assets/javascripts/decidim/time_tracker/activity_ui.js.es6

@@ -0,0 +1,112 @@
+class ActivityUI { // eslint-disable-line no-unused-vars
+  constructor(target) {
+    this.$activity = $(target);
+    this.$elapsed = this.$activity.find(".elapsed-time-clock");
+    this.$startButton = this.$activity.find(".time-tracker-activity-start");
+    this.$pauseButton = this.$activity.find(".time-tracker-activity-pause");
+    this.$stopButton = this.$activity.find(".time-tracker-activity-stop");
+    this.interval = null;
+    this.initTime = this.now;
+    this.onStop = $.noop;
+  }
+
+  get startEndpoint() {
+    return this.$activity.data('start-endpoint');
+  }
+
+  get stopEndpoint() {
+    return this.$activity.data('stop-endpoint');
+  }
+
+  get now() {
+    return Math.floor(new Date().getTime() / 1000);
+  }
+
+  get elapsed() {
+    return parseInt(this.$activity.data("elapsed-time") || 0, 10);
+  }
+
+  set elapsed(seconds) {
+    this.$activity.data("elapsed-time", seconds); 
+  }
+
+  get remaining() {
+    return parseInt(this.$activity.data("remaining-time") || 0, 10);
+  }
+
+  set remaining(seconds) {
+    this.$activity.data("remaining-time", seconds); 
+  }
+
+  showStart() {
+    this.$startButton.removeClass("hide");
+    this.$pauseButton.addClass("hide");
+    this.$stopButton.addClass("hide");
+    return this;
+  }
+
+  showPauseStop() {
+    this.$startButton.addClass("hide");
+    this.$pauseButton.removeClass("hide");
+    this.$stopButton.removeClass("hide");
+    return this;
+  }
+
+  showPlayStop() {
+    this.$startButton.removeClass("hide");
+    this.$pauseButton.addClass("hide");
+    this.$stopButton.removeClass("hide");
+    return this;
+  }
+
+  showError(error) {
+    this.$activity.find(".callout.alert").html(error).removeClass("hide");
+    this.showStart(this.$activity);
+    return this;
+  }
+
+  clockifySeconds(totalSeconds) {
+    const hours = Math.floor(totalSeconds / (60 * 60))
+    const minutes = Math.floor((totalSeconds / 60) % 60)
+    const seconds = totalSeconds % 60
+
+    return `${ hours }h ${ minutes }m ${ seconds }s`
+  }
+
+  updateElapsedTime() {
+    const diff = this.now - this.initTime
+    if(this.remaining <= diff) {
+      this.stopCounter()
+      return this.onStop();
+    }
+    this.$elapsed.html(this.clockifySeconds(this.elapsed + diff));
+  }
+
+  startCounter(data) {
+    console.log("starting counter", data)
+    clearInterval(this.interval);
+    this.initTime = this.now;
+    this.interval = setInterval(() => {
+      this.updateElapsedTime();
+      }, 1000);
+    return this;
+  }
+  
+  stopCounter(data) {
+    const diff = this.now - this.initTime
+    console.log("stopping counter", data)
+    this.elapsed = this.elapsed + diff;
+    this.remaining = this.remaining - diff;
+    clearInterval(this.interval);
+    return this;
+  }
+
+  isRunning() {
+    return !!this.interval;
+  }
+  
+  showMilestone() {
+    console.log("TODO: show milestone")
+  }
+}
+

data/app/assets/javascripts/decidim/time_tracker/admin/assignations.js.es6

@@ -0,0 +1,35 @@
+((exports) => {
+  const { createFieldDependentInputs } = exports.DecidimAdmin;
+
+  const $assignationType = $("#assignation_existing_user");
+
+  createFieldDependentInputs({
+    controllerField: $assignationType,
+    wrapperSelector: ".user-fields",
+    dependentFieldsSelector: ".user-fields--email",
+    dependentInputSelector: "input",
+    enablingCondition: ($field) => {
+      return $field.val() === "false"
+    }
+  });
+
+  createFieldDependentInputs({
+    controllerField: $assignationType,
+    wrapperSelector: ".user-fields",
+    dependentFieldsSelector: ".user-fields--name",
+    dependentInputSelector: "input",
+    enablingCondition: ($field) => {
+      return $field.val() === "false"
+    }
+  });
+
+  createFieldDependentInputs({
+    controllerField: $assignationType,
+    wrapperSelector: ".user-fields",
+    dependentFieldsSelector: ".user-fields--user-picker",
+    dependentInputSelector: "input",
+    enablingCondition: ($field) => {
+      return $field.val() === "true"
+    }
+  });
+})(window);

data/app/assets/javascripts/decidim/time_tracker/reports/reports.js.es6

@@ -0,0 +1,19 @@
+$(() => {
+  $(document).ready(( ) => {
+    const params = new URLSearchParams(window.location.search);
+    const activity_id = params.get('activity');
+    
+    if (activity_id) {
+      const $activity = $(`[data-activity-id=${activity_id}]`);
+
+      if ($activity.length) {
+        $("body,html").animate({
+            scrollTop: ($activity.offset().top - $activity.height() / 2)
+          },
+          200
+        );
+      }
+    }
+  });
+});
+

data/app/assets/javascripts/decidim/time_tracker/time_tracker.js.es6

@@ -0,0 +1,82 @@
+//= require decidim/time_tracker/timer_api
+//= require decidim/time_tracker/activity_ui
+//= require decidim/time_tracker/reports/reports
+//= require jsrender.min
+//= require_self
+
+$(() => {
+
+  // For each request track ajax responses
+  $(document).on("ajax:success", ".time-tracker-request", (event) => {
+    const detail = event.detail;
+    const data = detail[0];
+    $(event.target).replaceWith(`<div class="callout success">${data.message}</div>`);
+  })
+  $(document).on("ajax:error", ".time-tracker-request", (event) => {
+    const detail = event.detail;
+    const data = detail[0];
+    const $form = $(event.target);
+    const $callout = $(`<div class="callout alert">${data.message}</div>`).insertAfter($form);
+    $form.hide();
+    setTimeout(() => $callout.fadeOut(() => {$callout.remove(); $form.show();}), 2000);
+  });
+ 
+  // For each activty set up the counters
+  $(".time-tracker-activity").each(function() {
+    const $activity = $(this);
+    const $milestone = $activity.find(".milestone");
+    const activity = new ActivityUI($activity);
+    const api = new TimerApi(activity.startEndpoint, activity.stopEndpoint);
+    // store api
+    $activity.data('_activity', activity);
+    $activity.data('_api', api);
+    if($activity.data("counter-active")) {
+      activity.showPauseStop();
+      activity.startCounter();
+    }
+
+    activity.onStop = () => {
+      console.log("automatic stop");
+      activity.showError($activity.data("text-counter-stopped"));
+      activity.showStart();
+      api.stop(); // Unnecessary if the job is working well
+    };
+
+    $activity.find(".time-tracker-activity-start").on("click", () => {
+      activity.showPauseStop();
+      api.start()
+        .done((data) => {
+          // stop others
+          $(".time-tracker-activity").each(function() {
+            const activity = $(this).data("_activity");
+            if(activity.isRunning()) {
+              activity.showPlayStop().stopCounter();
+            }
+          });
+          activity.startCounter(data)
+        })
+        .fail(activity.showError.bind(activity));
+    });
+
+
+    $activity.find(".time-tracker-activity-pause").on("click", () => {
+      activity.showPlayStop();
+      api.stop()
+        .done((data) => activity.stopCounter(data))
+        .fail(activity.showError.bind(activity));
+    });
+
+    $activity.find(".time-tracker-activity-stop").on("click", () => {
+      activity.showStart();
+      api.stop()
+        .done((data) => { 
+          activity.stopCounter(data);
+          console.log("show milestone creator");
+          $milestone.removeClass("hide");
+         })
+        .fail(activity.showError.bind(activity));
+    });
+  });
+
+});
+