From 672141c8a0013b8624b6a2c50cbe236ebea7b428 Mon Sep 17 00:00:00 2001 From: "mykhailo.romaniuk" Date: Sat, 4 Nov 2017 23:07:52 +0200 Subject: [PATCH 1/7] #34 Add sass loadersm build config and base files. --- ReportJ.Extension.Chrome/app/css/mixins.scss | 6 ++++++ ReportJ.Extension.Chrome/app/css/variables.scss | 1 + ReportJ.Extension.Chrome/config/base.config.js | 14 +++++++++++++- ReportJ.Extension.Chrome/package.json | 5 ++++- 4 files changed, 24 insertions(+), 2 deletions(-) create mode 100644 ReportJ.Extension.Chrome/app/css/mixins.scss create mode 100644 ReportJ.Extension.Chrome/app/css/variables.scss diff --git a/ReportJ.Extension.Chrome/app/css/mixins.scss b/ReportJ.Extension.Chrome/app/css/mixins.scss new file mode 100644 index 0000000..f5b2784 --- /dev/null +++ b/ReportJ.Extension.Chrome/app/css/mixins.scss @@ -0,0 +1,6 @@ +@mixin background-img($url) { + background-image: url($url); + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} \ No newline at end of file diff --git a/ReportJ.Extension.Chrome/app/css/variables.scss b/ReportJ.Extension.Chrome/app/css/variables.scss new file mode 100644 index 0000000..8b08cbe --- /dev/null +++ b/ReportJ.Extension.Chrome/app/css/variables.scss @@ -0,0 +1 @@ +$logo-path: "https://raw.githubusercontent.com/mishani0x0ef/ReportJ/master/resources/Icons/logo48x48.png"; \ No newline at end of file diff --git a/ReportJ.Extension.Chrome/config/base.config.js b/ReportJ.Extension.Chrome/config/base.config.js index 4c96666..1d0891d 100644 --- a/ReportJ.Extension.Chrome/config/base.config.js +++ b/ReportJ.Extension.Chrome/config/base.config.js @@ -18,6 +18,11 @@ function getCssLoaders() { ]; } +function getSassLoaders() { + const cssLoaders = getCssLoaders(); + return cssLoaders.concat(["sass-loader"]); +} + module.exports = function () { return { entry: { @@ -50,11 +55,18 @@ module.exports = function () { use: getCssLoaders() }) }, + { + test: /\.scss$/, + use: ExtractTextPlugin.extract({ + use: getSassLoaders() + }) + }, ] }, resolve: { alias: { - "~": path.resolve(__dirname, "../app") + "~": path.resolve(__dirname, "../app"), + "root": path.resolve(__dirname, "../app"), }, extensions: [".js"] }, diff --git a/ReportJ.Extension.Chrome/package.json b/ReportJ.Extension.Chrome/package.json index abb84e8..47951cb 100644 --- a/ReportJ.Extension.Chrome/package.json +++ b/ReportJ.Extension.Chrome/package.json @@ -30,12 +30,15 @@ "eslint": "^4.7.2", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", + "node-sass": "^4.6.0", "postcss": "^6.0.12", "postcss-discard-duplicates": "^2.1.0", "postcss-loader": "^2.0.6", + "raw-loader": "^0.5.1", + "sass-loader": "^6.0.6", "style-loader": "^0.18.2", "uglifyjs-webpack-plugin": "^0.4.6", - "webpack": "^3.6.0", + "webpack": "^3.8.1", "webpack-merge": "^4.1.0" }, "dependencies": { From bf8ef168fabf68c03cc242694a0c2c472adeda59 Mon Sep 17 00:00:00 2001 From: "mykhailo.romaniuk" Date: Sat, 4 Nov 2017 23:08:44 +0200 Subject: [PATCH 2/7] #34 Create base extender for logTime improvements. Add ReportJ icon next to log work input. --- .../app/js/content/content.js | 2 ++ .../js/content/logTime/logTimeExtender.html | 3 +++ .../app/js/content/logTime/logTimeExtender.js | 18 ++++++++++++++++++ .../js/content/logTime/logTimeExtender.scss | 17 +++++++++++++++++ ReportJ.Extension.Chrome/app/manifest.json | 3 +-- 5 files changed, 41 insertions(+), 2 deletions(-) create mode 100644 ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.html create mode 100644 ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.js create mode 100644 ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.scss diff --git a/ReportJ.Extension.Chrome/app/js/content/content.js b/ReportJ.Extension.Chrome/app/js/content/content.js index 52b4c24..537de54 100644 --- a/ReportJ.Extension.Chrome/app/js/content/content.js +++ b/ReportJ.Extension.Chrome/app/js/content/content.js @@ -1,6 +1,7 @@ import AutoIssueSumaryExtender from "./autoIssueSummary/autoIssueSummaryExtender"; import CloseIssueExtender from "./closeIssue/closeIssueExtender"; +import LogTimeExtender from "./logTime/logTimeExtender"; import StorageService from "~/js/services/storageService"; import { checkIsInsideJira } from "~/js/content/common/jiraUtil"; @@ -32,6 +33,7 @@ class ContentController { _addJiraExtenders(extenders, settings) { extenders.push(new CloseIssueExtender()); + extenders.push(new LogTimeExtender()); if (settings.autoIssueSummary.enabled) { extenders.push(new AutoIssueSumaryExtender()); diff --git a/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.html b/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.html new file mode 100644 index 0000000..1967053 --- /dev/null +++ b/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.html @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.js b/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.js new file mode 100644 index 0000000..03f5475 --- /dev/null +++ b/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.js @@ -0,0 +1,18 @@ +import "./logTimeExtender.scss"; +import $ from "jquery"; +import JiraDialogObserver from "~/js/util/jiraDialogObserver"; +import template from "./logTimeExtender.html"; + +export default class LogTimeExtender { + start() { + this._initLogWorkObserver(); + } + + _initLogWorkObserver() { + const observer = new JiraDialogObserver("Log Work"); + observer.onAppear(($dialog) => { + const $logTimeInput = $dialog.find("#log-work-time-logged"); + $(template).insertAfter($logTimeInput); + }); + } +} \ No newline at end of file diff --git a/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.scss b/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.scss new file mode 100644 index 0000000..027ac7c --- /dev/null +++ b/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.scss @@ -0,0 +1,17 @@ +@import "~root/css/variables"; +@import "~root/css/mixins"; + +$link-size: 20px; + +logTimeExtender { + display: inline-flex; + vertical-align: middle; + + .reportj-link { + margin: 0 5px; + width: $link-size; + height: $link-size; + cursor: pointer; + @include background-img($logo-path); + } +} \ No newline at end of file diff --git a/ReportJ.Extension.Chrome/app/manifest.json b/ReportJ.Extension.Chrome/app/manifest.json index 193ead7..d8e6d65 100644 --- a/ReportJ.Extension.Chrome/app/manifest.json +++ b/ReportJ.Extension.Chrome/app/manifest.json @@ -34,8 +34,7 @@ "*://*/*" ], "css": [ - // todo: uncomment when styles would be added. MR - //"build/content.css" + "build/content.css" ], "js": [ "build/manifest.js", From e3b595b40f1d71261a0513ec48107ef8208532ad Mon Sep 17 00:00:00 2001 From: "mykhailo.romaniuk" Date: Sun, 5 Nov 2017 01:25:54 +0200 Subject: [PATCH 3/7] #34 Display popup with time selection option when user click on ReportJ link near time log. --- .../app/css/variables.scss | 22 +++++- .../js/content/logTime/logTimeExtender.html | 19 ++++- .../app/js/content/logTime/logTimeExtender.js | 59 +++++++++++++- .../js/content/logTime/logTimeExtender.scss | 77 ++++++++++++++++++- 4 files changed, 172 insertions(+), 5 deletions(-) diff --git a/ReportJ.Extension.Chrome/app/css/variables.scss b/ReportJ.Extension.Chrome/app/css/variables.scss index 8b08cbe..16bd69a 100644 --- a/ReportJ.Extension.Chrome/app/css/variables.scss +++ b/ReportJ.Extension.Chrome/app/css/variables.scss @@ -1 +1,21 @@ -$logo-path: "https://raw.githubusercontent.com/mishani0x0ef/ReportJ/master/resources/Icons/logo48x48.png"; \ No newline at end of file +// Colors + +$color-primary: #003366; + +$color-background: #fff; + +$color-text: #333; + +$color-border: #dedede; + +// Images + +$logo-path: "https://raw.githubusercontent.com/mishani0x0ef/ReportJ/master/resources/Icons/logo48x48.png"; + +// Shadows + +$panel-shadow: 0 1px 4px rgba(0,0,0,0.3); + +// Z-Index + +$z-index-base-popup: 1; \ No newline at end of file diff --git a/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.html b/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.html index 1967053..cb063aa 100644 --- a/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.html +++ b/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.html @@ -1,3 +1,18 @@ - + - \ No newline at end of file +
+
+

Hours

+
+
+
+

Minutes

+
+
+
+ Powered by ReportJ + + Cancel +
+
+ \ No newline at end of file diff --git a/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.js b/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.js index 03f5475..e643eab 100644 --- a/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.js +++ b/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.js @@ -4,6 +4,10 @@ import JiraDialogObserver from "~/js/util/jiraDialogObserver"; import template from "./logTimeExtender.html"; export default class LogTimeExtender { + constructor() { + this.componentName = "reportj-log-time-extender"; + } + start() { this._initLogWorkObserver(); } @@ -12,7 +16,60 @@ export default class LogTimeExtender { const observer = new JiraDialogObserver("Log Work"); observer.onAppear(($dialog) => { const $logTimeInput = $dialog.find("#log-work-time-logged"); - $(template).insertAfter($logTimeInput); + const $element = $(template).insertAfter($logTimeInput); + this._initElement($element); + }); + } + + _initElement($element) { + const $link = $element.find(".reportj-link"); + const hours = { + group: "hours", + placeholder: `${this.componentName} .hours`, + values: ["0h", "1h", "2h", "3h", "4h", "5h", "6h", "7h", "8h"] + }; + const minutes = { + group: "minutes", + placeholder: `${this.componentName} .minutes`, + values: ["0m", "15m", "30m", "45m"] + }; + + $link.click(() => { + const $logWorkPopup = $(`${this.componentName} .log-work-popup`); + $logWorkPopup.addClass("active"); + }); + + this._createTimeOptionsGroup(hours); + this._createTimeOptionsGroup(minutes); + } + + // todo: simplify element creation by using some simple UI framework. MR + _createTimeOptionsGroup(timeOptions) { + const group = timeOptions.group; + const groupSelector = `input[name=${group}]`; + + const $elements = timeOptions.values.map((value) => { + const inputId = `${group}_${value}`; + const $input = $(``); + const $label = $(``); + const $template = $(`
`).append($input).append($label); + + return $template; + }); + + $(timeOptions.placeholder).append($elements); + + $(groupSelector).change((e) => { + const $group = $(groupSelector).parent(); + const $container = $(e.target.parentElement); + const activationClass = "active"; + const checked = e.target.checked; + + $group.removeClass(activationClass); + + if (checked) { + $container.addClass(activationClass); + } }); } } \ No newline at end of file diff --git a/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.scss b/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.scss index 027ac7c..2aab0eb 100644 --- a/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.scss +++ b/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.scss @@ -3,10 +3,15 @@ $link-size: 20px; -logTimeExtender { +reportj-log-time-extender { + position: relative; display: inline-flex; vertical-align: middle; + h4 { + margin: 0; + } + .reportj-link { margin: 0 5px; width: $link-size; @@ -14,4 +19,74 @@ logTimeExtender { cursor: pointer; @include background-img($logo-path); } + + .log-work-popup { + display: none; + background-color: $color-background; + padding: 12px 16px; + box-shadow: $panel-shadow; + + &.active { + position: absolute; + display: flex; + flex-direction: column; + top: 25px; + left: 5px; + z-index: $z-index-base-popup; + } + + .popup-section { + display: flex; + flex-direction: column; + padding-bottom: 12px; + } + + .popup-section:last-of-type { + padding-bottom: 0; + } + + .buttons-section { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-end; + + .product-placement { + font-size: 12px; + flex-grow: 1; + } + } + + .grid-row { + display: flex; + border: 1px solid $color-border; + + .grid-cell { + display: flex; + flex-grow: 1; + border-right: 1px solid $color-border; + text-align: center; + + &.active { + font-weight: bold; + background-color: lighten($color-primary, 79%); + } + + input { + display: none; + } + + label { + width: 100%; + height: 100%; + padding: 6px 8px; + color: $color-text; + } + } + + .grid-cell:last-of-type { + border: none; + } + } + } } \ No newline at end of file From 28bfe4d7e965dac891f2a7b9069ab15241d7e06a Mon Sep 17 00:00:00 2001 From: "mykhailo.romaniuk" Date: Sun, 5 Nov 2017 01:45:54 +0200 Subject: [PATCH 4/7] #34 Add possibility to apply selected time. --- .../js/content/logTime/logTimeExtender.html | 2 +- .../app/js/content/logTime/logTimeExtender.js | 61 ++++++++++++++----- 2 files changed, 47 insertions(+), 16 deletions(-) diff --git a/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.html b/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.html index cb063aa..4b56df4 100644 --- a/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.html +++ b/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.html @@ -12,7 +12,7 @@

Minutes

Powered by ReportJ - Cancel + Cancel
\ No newline at end of file diff --git a/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.js b/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.js index e643eab..a0e9ce7 100644 --- a/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.js +++ b/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.js @@ -6,6 +6,16 @@ import template from "./logTimeExtender.html"; export default class LogTimeExtender { constructor() { this.componentName = "reportj-log-time-extender"; + this.hours = { + group: "hours", + placeholder: `${this.componentName} .hours`, + values: ["0h", "1h", "2h", "3h", "4h", "5h", "6h", "7h", "8h"] + }; + this.minutes = { + group: "minutes", + placeholder: `${this.componentName} .minutes`, + values: ["0m", "15m", "30m", "45m"] + }; } start() { @@ -18,29 +28,38 @@ export default class LogTimeExtender { const $logTimeInput = $dialog.find("#log-work-time-logged"); const $element = $(template).insertAfter($logTimeInput); this._initElement($element); + this._addButtonHandlers($element); }); } _initElement($element) { const $link = $element.find(".reportj-link"); - const hours = { - group: "hours", - placeholder: `${this.componentName} .hours`, - values: ["0h", "1h", "2h", "3h", "4h", "5h", "6h", "7h", "8h"] - }; - const minutes = { - group: "minutes", - placeholder: `${this.componentName} .minutes`, - values: ["0m", "15m", "30m", "45m"] - }; + $link.click(() => this._showPopup()); + this._createTimeOptionsGroup(this.hours); + this._createTimeOptionsGroup(this.minutes); + } + + _addButtonHandlers($element) { + const $okButton = $element.find("#reportj-submit-log-time"); + const $cancelButton = $element.find("#reportj-cancel-log-time"); - $link.click(() => { - const $logWorkPopup = $(`${this.componentName} .log-work-popup`); - $logWorkPopup.addClass("active"); + $okButton.click(() => { + const time = this._getLogTimeFromPopup(); + this._setLogTimeToJira(time); + this._hidePopup(); }); - this._createTimeOptionsGroup(hours); - this._createTimeOptionsGroup(minutes); + $cancelButton.click(() => this._hidePopup()); + } + + _showPopup() { + const $logWorkPopup = $(`${this.componentName} .log-work-popup`); + $logWorkPopup.addClass("active"); + } + + _hidePopup() { + const $logWorkPopup = $(`${this.componentName} .log-work-popup`); + $logWorkPopup.removeClass("active"); } // todo: simplify element creation by using some simple UI framework. MR @@ -72,4 +91,16 @@ export default class LogTimeExtender { } }); } + + _getLogTimeFromPopup() { + const hoursValue = $(`input[name=${this.hours.group}]:checked`).val(); + const minutesValue = $(`input[name=${this.minutes.group}]:checked`).val(); + + return `${hoursValue} ${minutesValue}`; + } + + _setLogTimeToJira(time) { + const $timeInput = $("#log-work-time-logged"); + $timeInput.val(time); + } } \ No newline at end of file From b16e582f7c12ec7b12ab7ae4792751c635578f9f Mon Sep 17 00:00:00 2001 From: "mykhailo.romaniuk" Date: Wed, 8 Nov 2017 22:45:59 +0200 Subject: [PATCH 5/7] #34 Set correct values if time value not defined. --- .../app/js/content/logTime/logTimeExtender.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.js b/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.js index a0e9ce7..44c5806 100644 --- a/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.js +++ b/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.js @@ -93,10 +93,11 @@ export default class LogTimeExtender { } _getLogTimeFromPopup() { - const hoursValue = $(`input[name=${this.hours.group}]:checked`).val(); - const minutesValue = $(`input[name=${this.minutes.group}]:checked`).val(); + const hoursValue = $(`input[name=${this.hours.group}]:checked`).val() || ""; + const minutesValue = $(`input[name=${this.minutes.group}]:checked`).val() || ""; + const logTime = `${hoursValue} ${minutesValue}`; - return `${hoursValue} ${minutesValue}`; + return logTime.trim(); } _setLogTimeToJira(time) { From d04a4ddcc9319753f363c3c03f91f972addc42f1 Mon Sep 17 00:00:00 2001 From: "mykhailo.romaniuk" Date: Wed, 8 Nov 2017 22:55:36 +0200 Subject: [PATCH 6/7] #34 Change position of ReportJ time selector to fit small log work dialog --- .../app/js/content/logTime/logTimeExtender.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.scss b/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.scss index 2aab0eb..a2c2eac 100644 --- a/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.scss +++ b/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.scss @@ -31,7 +31,7 @@ reportj-log-time-extender { display: flex; flex-direction: column; top: 25px; - left: 5px; + left: -75px; z-index: $z-index-base-popup; } @@ -69,7 +69,7 @@ reportj-log-time-extender { &.active { font-weight: bold; - background-color: lighten($color-primary, 79%); + background-color: lighten($color-primary, 75%); } input { From 79dabcb64202f87fa2b7b86040ede98544ca1de5 Mon Sep 17 00:00:00 2001 From: "mykhailo.romaniuk" Date: Wed, 8 Nov 2017 23:30:32 +0200 Subject: [PATCH 7/7] #34 Refactor code. --- .../app/js/content/logTime/logTimeExtender.js | 61 ++++++++++--------- 1 file changed, 32 insertions(+), 29 deletions(-) diff --git a/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.js b/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.js index 44c5806..31712f9 100644 --- a/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.js +++ b/ReportJ.Extension.Chrome/app/js/content/logTime/logTimeExtender.js @@ -26,22 +26,22 @@ export default class LogTimeExtender { const observer = new JiraDialogObserver("Log Work"); observer.onAppear(($dialog) => { const $logTimeInput = $dialog.find("#log-work-time-logged"); - const $element = $(template).insertAfter($logTimeInput); - this._initElement($element); - this._addButtonHandlers($element); + const $component = $(template).insertAfter($logTimeInput); + this._initComponentTemplate($component); + this._addButtonHandlers($component); }); } - _initElement($element) { - const $link = $element.find(".reportj-link"); + _initComponentTemplate($template) { + const $link = $template.find(".reportj-link"); $link.click(() => this._showPopup()); this._createTimeOptionsGroup(this.hours); this._createTimeOptionsGroup(this.minutes); } - _addButtonHandlers($element) { - const $okButton = $element.find("#reportj-submit-log-time"); - const $cancelButton = $element.find("#reportj-cancel-log-time"); + _addButtonHandlers($template) { + const $okButton = $template.find("#reportj-submit-log-time"); + const $cancelButton = $template.find("#reportj-cancel-log-time"); $okButton.click(() => { const time = this._getLogTimeFromPopup(); @@ -54,7 +54,7 @@ export default class LogTimeExtender { _showPopup() { const $logWorkPopup = $(`${this.componentName} .log-work-popup`); - $logWorkPopup.addClass("active"); + $logWorkPopup.addClass("active"); } _hidePopup() { @@ -62,34 +62,37 @@ export default class LogTimeExtender { $logWorkPopup.removeClass("active"); } - // todo: simplify element creation by using some simple UI framework. MR _createTimeOptionsGroup(timeOptions) { const group = timeOptions.group; const groupSelector = `input[name=${group}]`; - - const $elements = timeOptions.values.map((value) => { - const inputId = `${group}_${value}`; - const $input = $(``); - const $label = $(``); - const $template = $(`
`).append($input).append($label); - - return $template; - }); + const $elements = timeOptions.values.map((value) => this._createTimeElement(group, value)); $(timeOptions.placeholder).append($elements); + $(groupSelector).change((e) => this._onSelctionChange(e)); + } - $(groupSelector).change((e) => { - const $group = $(groupSelector).parent(); - const $container = $(e.target.parentElement); - const activationClass = "active"; - const checked = e.target.checked; + _createTimeElement(group, value) { + const inputId = `${group}_${value}`; + return $( + `
+ + +
` + ); + } - $group.removeClass(activationClass); + _onSelctionChange(e) { + const groupName = e.target.name; + const groupSelector = `input[name=${groupName}]`; + const $group = $(groupSelector).parent(); + const activationClass = "active"; - if (checked) { - $container.addClass(activationClass); - } - }); + $group.removeClass(activationClass); + + if (e.target.checked) { + const $targetContainer = $(e.target.parentElement); + $targetContainer.addClass(activationClass); + } } _getLogTimeFromPopup() {