Skip to content

Commit 3f03373

Browse files
aristatharistath
committed
Refactor
1 parent f78da6f commit 3f03373

3 files changed

Lines changed: 121 additions & 94 deletions

File tree

‎assets/js/web-components/prpl-gauge.js‎

Lines changed: 87 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -182,74 +182,93 @@ const prplUpdateRaviGauge = ( pointsDiff ) => {
182182
badge.setAttribute( 'complete', 'true' );
183183
} );
184184

185-
// If the previous month badge progress bar exists, update it.
186-
const previousMonthBadgeProgressBar = document
187-
.getElementById( 'prpl-previous-month-badge-progress-bar' )
188-
.querySelector( 'prpl-badge-progress-bar' );
189-
if ( previousMonthBadgeProgressBar ) {
190-
const previousMonthBadgeId =
191-
previousMonthBadgeProgressBar.getAttribute( 'data-badge-id' );
192-
const previousMonthBadgePoints =
193-
previousMonthBadgeProgressBar.getAttribute( 'data-points' );
194-
const previousMonthBadgeMaxPoints =
195-
previousMonthBadgeProgressBar.getAttribute( 'data-max-points' );
196-
const PreviousBadgeProgress = customElements.get(
197-
'prpl-badge-progress-bar'
198-
);
199-
const previousBadgeNewPoints =
200-
parseInt( previousMonthBadgePoints ) + pointsDiff;
201-
const newProgressBar = new PreviousBadgeProgress(
202-
previousMonthBadgeId,
203-
previousBadgeNewPoints,
204-
previousMonthBadgeMaxPoints
205-
);
206-
newProgressBar.setAttribute(
207-
'data-badge-id',
208-
previousMonthBadgeId
209-
);
210-
newProgressBar.setAttribute(
211-
'data-points',
212-
previousBadgeNewPoints
213-
);
214-
newProgressBar.setAttribute(
215-
'data-max-points',
216-
previousMonthBadgeMaxPoints
217-
);
218-
previousMonthBadgeProgressBar.replaceWith( newProgressBar );
219-
220-
// Update the remaining points.
221-
const remainingPoints = document.getElementById(
222-
'prpl-previous-month-badge-progress-bar-remaining'
223-
);
224-
remainingPoints.textContent = remainingPoints.textContent.replace(
225-
remainingPoints.getAttribute( 'data-remaining' ),
226-
previousMonthBadgeMaxPoints - previousBadgeNewPoints
227-
);
228-
remainingPoints.setAttribute(
229-
'data-remaining',
230-
previousMonthBadgeMaxPoints - previousBadgeNewPoints
231-
);
232-
233-
// Update the previous month badge points number.
234-
const previousMonthBadgePointsNumber = document.getElementById(
235-
'prpl-widget-previous-ravi-points-number'
236-
);
237-
previousMonthBadgePointsNumber.textContent =
238-
previousBadgeNewPoints + 'pt';
239-
240-
// If the previous month badge is completed, update badge elements.
241-
if (
242-
previousBadgeNewPoints >=
243-
parseInt( previousMonthBadgeMaxPoints )
244-
) {
245-
document
246-
.querySelectorAll(
247-
`.prpl-badge-row-wrapper-inner .prpl-badge prpl-badge[complete="false"][badge-id="${ previousMonthBadgeId }"]`
248-
)
249-
?.forEach( ( badge ) => {
250-
badge.setAttribute( 'complete', 'true' );
251-
} );
252-
}
185+
if ( gaugeProps.value >= parseInt( gaugeProps.max ) ) {
186+
prplUpdatePreviousMonthBadgeProgressBar( pointsDiff );
253187
}
254188
}
255189
};
190+
191+
const prplUpdatePreviousMonthBadgeProgressBar = ( pointsDiff ) => {
192+
const progressBars = document.querySelectorAll(
193+
'.prpl-previous-month-badge-progress-bar-wrapper prpl-badge-progress-bar'
194+
);
195+
196+
// Bail early if no badge progress bars are found.
197+
if ( ! progressBars.length ) {
198+
return;
199+
}
200+
201+
// Get the 1st incomplete badge progress bar.
202+
const progressBar =
203+
parseInt( progressBars[ 0 ]?.getAttribute( 'data-points' ) ) >=
204+
parseInt( progressBars[ 0 ]?.getAttribute( 'data-max-points' ) )
205+
? progressBars[ 1 ]
206+
: progressBars[ 0 ];
207+
208+
// Bail early if no badge progress bar is found.
209+
if ( ! progressBar ) {
210+
return;
211+
}
212+
213+
// Get the badge progress bar properties.
214+
const badgeId = progressBar.getAttribute( 'data-badge-id' );
215+
const badgePoints = progressBar.getAttribute( 'data-points' );
216+
const badgeMaxPoints = progressBar.getAttribute( 'data-max-points' );
217+
const badgeProgress = customElements.get( 'prpl-badge-progress-bar' );
218+
const badgeNewPoints = parseInt( badgePoints ) + pointsDiff;
219+
220+
// Create a new badge progress bar.
221+
const newProgressBar = new badgeProgress(
222+
badgeId,
223+
badgeNewPoints,
224+
badgeMaxPoints
225+
);
226+
newProgressBar.setAttribute( 'data-badge-id', badgeId );
227+
newProgressBar.setAttribute( 'data-points', badgeNewPoints );
228+
newProgressBar.setAttribute( 'data-max-points', badgeMaxPoints );
229+
230+
// Replace the old badge progress bar with the new one.
231+
progressBar.replaceWith( newProgressBar );
232+
233+
// Update the remaining points.
234+
const remainingPointsEl = document.querySelector(
235+
`.prpl-previous-month-badge-progress-bar-wrapper[data-badge-id="${ badgeId }"] .prpl-previous-month-badge-progress-bar-remaining`
236+
);
237+
238+
if ( remainingPointsEl ) {
239+
remainingPointsEl.textContent = remainingPointsEl.textContent.replace(
240+
remainingPointsEl.getAttribute( 'data-remaining' ),
241+
badgeMaxPoints - badgeNewPoints
242+
);
243+
remainingPointsEl.setAttribute(
244+
'data-remaining',
245+
badgeMaxPoints - badgeNewPoints
246+
);
247+
}
248+
249+
// Update the previous month badge points number.
250+
const badgePointsNumberEl = document.querySelector(
251+
`.prpl-previous-month-badge-progress-bar-wrapper[data-badge-id="${ badgeId }"] .prpl-widget-previous-ravi-points-number`
252+
);
253+
if ( badgePointsNumberEl ) {
254+
badgePointsNumberEl.textContent = badgeNewPoints + 'pt';
255+
}
256+
257+
// If the previous month badge is completed, update badge elements.
258+
if ( badgeNewPoints >= parseInt( badgeMaxPoints ) ) {
259+
document
260+
.querySelectorAll(
261+
`.prpl-badge-row-wrapper-inner .prpl-badge prpl-badge[complete="false"][badge-id="${ badgeId }"]`
262+
)
263+
?.forEach( ( badge ) => {
264+
badge.setAttribute( 'complete', 'true' );
265+
} );
266+
267+
// Remove the previous month badge progress bar.
268+
document
269+
.querySelector(
270+
`.prpl-previous-month-badge-progress-bar-wrapper[data-badge-id="${ badgeId }"]`
271+
)
272+
?.remove();
273+
}
274+
};

‎classes/admin/widgets/class-suggested-tasks.php‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,22 +51,24 @@ public function get_score() {
5151
/**
5252
* Get previous month badge.
5353
*
54-
* @return \Progress_Planner\Badges\Monthly|null
54+
* @return \Progress_Planner\Badges\Monthly[]
5555
*/
56-
public function get_previous_incomplete_month_badge() {
56+
public function get_previous_incomplete_months_badges() {
57+
$previous_incomplete_month_badges = [];
58+
5759
$minus_one_month = ( new DateTime() )->modify( 'first day of previous month' );
5860
$minus_one_month_badge = Monthly::get_instance_from_id( Monthly::get_badge_id_from_date( $minus_one_month ) );
5961
if ( $minus_one_month_badge && $minus_one_month_badge->progress_callback()['progress'] < 100 ) {
60-
return $minus_one_month_badge;
62+
$previous_incomplete_month_badges[] = $minus_one_month_badge;
6163
}
6264

6365
$minus_two_months = ( new DateTime() )->modify( 'first day of previous month' )->modify( 'first day of previous month' );
6466
$minus_two_months_badge = Monthly::get_instance_from_id( Monthly::get_badge_id_from_date( $minus_two_months ) );
6567
if ( $minus_two_months_badge && $minus_two_months_badge->progress_callback()['progress'] < 100 ) {
66-
return $minus_two_months_badge;
68+
$previous_incomplete_month_badges[] = $minus_two_months_badge;
6769
}
6870

69-
return null;
71+
return $previous_incomplete_month_badges;
7072
}
7173

7274
/**

‎views/page-widgets/suggested-tasks.php‎

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -61,31 +61,37 @@
6161
</span>
6262
</div>
6363

64-
<?php if ( $prpl_widget->get_previous_incomplete_month_badge() ) : ?>
64+
<?php if ( ! empty( $prpl_widget->get_previous_incomplete_months_badges() ) ) : ?>
6565
<h3><?php \esc_html_e( 'Oh no! You missed the previous monthly badge!', 'progress-planner' ); ?></h3>
6666
<p><?php echo \wp_kses( __( 'No worries though! <strong>Collect the surplus of points</strong> you earn, and get your badge!', 'progress-planner' ), [ 'strong' => [] ] ); ?></p>
67-
<div id="prpl-previous-month-badge-progress-bar" style="padding: 1rem 0; background-color: var(--prpl-background-orange); border-radius: 0.5rem; padding: 1rem;">
68-
<prpl-badge-progress-bar
69-
data-badge-id="<?php echo esc_attr( $prpl_widget->get_previous_incomplete_month_badge()->get_id() ); ?>"
70-
data-points="<?php echo (int) $prpl_widget->get_previous_incomplete_month_badge()->progress_callback()['points']; ?>"
71-
data-max-points="<?php echo (int) Monthly::TARGET_POINTS; ?>"
72-
></prpl-badge-progress-bar>
67+
<?php foreach ( $prpl_widget->get_previous_incomplete_months_badges() as $prpl_previous_incomplete_month_badge ) : ?>
68+
<div
69+
class="prpl-previous-month-badge-progress-bar-wrapper"
70+
style="padding: 1rem 0; background-color: var(--prpl-background-orange); border-radius: 0.5rem; padding: 1rem;"
71+
data-badge-id="<?php echo esc_attr( $prpl_previous_incomplete_month_badge->get_id() ); ?>"
72+
>
73+
<prpl-badge-progress-bar
74+
data-badge-id="<?php echo esc_attr( $prpl_previous_incomplete_month_badge->get_id() ); ?>"
75+
data-points="<?php echo (int) $prpl_previous_incomplete_month_badge->progress_callback()['points']; ?>"
76+
data-max-points="<?php echo (int) Monthly::TARGET_POINTS; ?>"
77+
></prpl-badge-progress-bar>
7378

74-
<div class="prpl-widget-content-points">
75-
<span id="prpl-widget-previous-ravi-points-number" class="prpl-widget-content-points-number">
76-
<?php echo (int) $prpl_widget->get_previous_incomplete_month_badge()->progress_callback()['points']; ?>pt
77-
</span>
78-
<span id="prpl-previous-month-badge-progress-bar-remaining" data-remaining="<?php echo (int) $prpl_widget->get_previous_incomplete_month_badge()->progress_callback()['remaining']; ?>">
79-
<?php
80-
printf(
81-
/* translators: %d: The number of points. */
82-
\esc_html__( 'Only %d more points to go', 'progress-planner' ),
83-
(int) $prpl_widget->get_previous_incomplete_month_badge()->progress_callback()['remaining']
84-
);
85-
?>
86-
</span>
79+
<div class="prpl-widget-content-points">
80+
<span class="prpl-widget-previous-ravi-points-number" class="prpl-widget-content-points-number">
81+
<?php echo (int) $prpl_previous_incomplete_month_badge->progress_callback()['points']; ?>pt
82+
</span>
83+
<span class="prpl-previous-month-badge-progress-bar-remaining" data-remaining="<?php echo (int) $prpl_previous_incomplete_month_badge->progress_callback()['remaining']; ?>">
84+
<?php
85+
printf(
86+
/* translators: %d: The number of points. */
87+
\esc_html__( 'Only %d more points to go', 'progress-planner' ),
88+
(int) $prpl_previous_incomplete_month_badge->progress_callback()['remaining']
89+
);
90+
?>
91+
</span>
92+
</div>
8793
</div>
88-
</div>
94+
<?php endforeach; ?>
8995
<?php endif; ?>
9096

9197
<hr>

0 commit comments

Comments
 (0)