Skip to content

Commit c1010f2

Browse files
selulselul
authored
Merge pull request #906 from Codeinwp/prf/remove-debug
fix: remove debug tool
2 parents 593799a + 1943696 commit c1010f2

File tree

7 files changed

+100
-294
lines changed

7 files changed

+100
-294
lines changed

‎assets/js/report_script.js

Lines changed: 0 additions & 92 deletions
This file was deleted.

‎assets/src/dashboard/parts/connected/dashboard/LastImages.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -135,8 +135,8 @@ const LastImages = () => {
135135
};
136136

137137
return (
138-
<div className="hidden lg:block pt-5">
139-
<h3 className="text-base m-0">{ optimoleDashboardApp.strings.latest_images.last } { optimoleDashboardApp.strings.latest_images.optimized_images }</h3>
138+
<div>
139+
<h3 className="text-gray-800 text-xl font-semibold mb-5 m-0">{ optimoleDashboardApp.strings.latest_images.last } { optimoleDashboardApp.strings.latest_images.optimized_images }</h3>
140140

141141
{ ( isInitialLoading && ! isLoaded ) && (
142142
<div className="flex items-center flex-col py-2">

‎assets/src/dashboard/parts/connected/dashboard/index.js

Lines changed: 97 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -71,26 +71,26 @@ const navigate = ( tabId ) => {
7171

7272
const quickactions = [
7373
{
74-
icon: <Icon icon={bolt} className="text-info"/>,
74+
icon: bolt,
7575
title: optimoleDashboardApp.strings.quick_actions.speed_test_title,
7676
description: optimoleDashboardApp.strings.quick_actions.speed_test_desc,
7777
link: optimoleDashboardApp.strings.quick_actions.speed_test_link,
7878
value: 'speedTest'
7979
},
8080
{
81-
icon: <Icon icon={update} className="text-info"/>,
81+
icon: update,
8282
title: optimoleDashboardApp.strings.quick_actions.clear_cache_images,
8383
description: optimoleDashboardApp.strings.quick_actions.clear_cache,
8484
value: clearCache
8585
},
8686
{
87-
icon: <Icon icon={offloadImage} className="text-info" />,
87+
icon: offloadImage,
8888
title: optimoleDashboardApp.strings.quick_actions.offload_images,
8989
description: optimoleDashboardApp.strings.quick_actions.offload_images_desc,
9090
value: () => navigate( settingsTab.offload_image )
9191
},
9292
{
93-
icon: <Icon icon={settings} className="text-info"/>,
93+
icon: settings,
9494
title: optimoleDashboardApp.strings.quick_actions.advance_settings,
9595
description: optimoleDashboardApp.strings.quick_actions.configure_settings,
9696
value: () => navigate( settingsTab.advance )
@@ -137,50 +137,77 @@ const Dashboard = () => {
137137

138138
const visitorsLimitPercent = ( ( userData.visitors / userData.visitors_limit ) * 100 ).toFixed( 0 );
139139

140-
const getFormattedMetric = ( metric ) => {
141-
let metricValue = userData[ metric ];
140+
const formatMetric = ( type, value ) => {
141+
let formattedValue = 0;
142+
let unit = '';
142143

143144
// Fallback for missing data
144-
if ( undefined === metricValue ) {
145-
metricValue = 'saved_size' === metric ?
146-
Math.floor( Math.random() * 2500 ) + 500 :
147-
Math.floor( Math.random() * 40 ) + 10;
145+
if ( undefined === value ) {
146+
value = 'saved_size' === type ?
147+
Math.floor( Math.random() * 2500000 ) + 500000 : // Mock KB
148+
'traffic' === type ?
149+
Math.floor( Math.random() * 2500 ) + 500 : // Mock MB
150+
Math.floor( Math.random() * 40 ) + 10; // Mock Percentage
148151
}
149152

150-
return metricValue;
151-
};
153+
switch ( type ) {
154+
case 'compression_percentage':
155+
formattedValue = parseFloat( value ).toFixed( 2 );
156+
unit = '%';
157+
break;
158+
case 'saved_size': // Assuming value is in KB
159+
const sizeInMB = value / 1000;
160+
if ( 1000 > sizeInMB ) {
161+
formattedValue = sizeInMB.toFixed( 2 );
162+
unit = 'MB';
163+
} else if ( 1000000 > sizeInMB ) {
164+
formattedValue = ( sizeInMB / 1000 ).toFixed( 2 );
165+
unit = 'GB';
166+
} else {
167+
formattedValue = ( sizeInMB / 1000000 ).toFixed( 2 );
168+
unit = 'TB';
169+
}
170+
break;
171+
case 'traffic': // Assuming value is in MB
172+
if ( 1000 > value ) {
173+
formattedValue = parseFloat( value ).toFixed( 2 );
174+
unit = 'MB';
175+
} else if ( 1000000 > value ) {
176+
formattedValue = ( value / 1000 ).toFixed( 2 );
177+
unit = 'GB';
178+
} else {
179+
formattedValue = ( value / 1000000 ).toFixed( 2 );
180+
unit = 'TB';
181+
}
182+
break;
183+
default:
184+
formattedValue = parseFloat( value ).toFixed( 2 );
185+
unit = '';
186+
}
152187

153-
const formatMetricValue = metric => {
154-
const value = getFormattedMetric( metric );
155-
const calcValue = 'saved_size' === metric ? ( value / 1000 ).toFixed( 2 ) : value.toFixed( 2 );
156-
return (
157-
<div className='flex items-end gap-1'>
158-
<span className='text-2xl text-black font-bold'>{calcValue}</span>
159-
<span className='text-sm text-gray-500'>{ 'compression_percentage' === metric ? '%' : 'MB' }</span>
160-
</div>
161-
);
188+
return { formattedValue, unit };
162189
};
163190

164191
return (
165-
<>
192+
<div className="grid gap-5">
166193
<div className="bg-white p-8 border-0 rounded-lg shadow-md">
167194
{ ( 0 < optimoleDashboardApp.strings.notice_just_activated.length && 'active' === userStatus ) && <ActivatedNotice/> }
168195

169196
{ 'inactive' === userStatus && <InactiveWarning/> }
170197

171-
<div className='py-6 gap-6 flex-col sm:flex-row items-start sm:items-center'>
172-
<div className='flex w-full justify-between sm:items-center'>
173-
<div className="text-gray-800 text-2xl font-bold">
198+
<div className='pb-6 gap-6 flex-col sm:flex-row items-start'>
199+
<div className='flex flex-col md:flex-row gap-3 w-full justify-between'>
200+
<div className="text-gray-800 text-xl font-semibold">
174201
{ optimoleDashboardApp.strings.dashboard_title }
175202
</div>
176203
<div className="flex items-center gap-2">
177-
<div className="text-gray-600 text-base font-normal ml-2">
204+
<div className="text-gray-600 text-base">
178205
{ optimoleDashboardApp.strings.quota }
179206
<span className="pl-2 text-gray-800 font-bold">
180207
{ userData.visitors_pretty } / { userData.visitors_limit_pretty }
181208
</span>
182209
</div>
183-
<div className='w-20'>
210+
<div className='md:w-20 grow md:grow-0'>
184211
<ProgressBar
185212
value={ userData.visitors }
186213
max={ userData.visitors_limit }
@@ -197,35 +224,39 @@ const Dashboard = () => {
197224
'gap-8 flex-col sm:flex-row items-start sm:items-center'
198225
) }
199226
>
200-
<div>
201-
<div className="text-gray-800 text-xl font-bold">
227+
<div className="grid gap-2">
228+
<div className="text-gray-700 text-lg font-semibold">
202229
{ optimoleDashboardApp.strings.banner_title }
203230
</div>
204-
<div className="text-gray-600 text-base">
231+
<div className="text-gray-600 text-sm">
205232
{ optimoleDashboardApp.strings.banner_description }
206233
</div>
207234
</div>
208235
</div>
209236

210-
<div className="flex py-5 gap-5 flex-col md:flex-row">
237+
<div className="flex pt-5 gap-5 flex-col md:flex-row">
211238
{ metrics.map( metric => {
239+
const rawValue = userData[ metric.value ];
240+
const { formattedValue, unit } = formatMetric( metric.value, rawValue );
241+
212242
return (
213243
<div
214244
key={ metric.value }
215245
className={ classNames(
216-
'p-3 basis-1/3 flex-col items-start border rounded-md border-solid bg-white border-light-gray border-slate-400'
246+
'p-3 basis-1/3 flex-col items-start border rounded-md border-solid bg-white border-gray-300'
217247
) }
218248
>
219249
<div className="flex w-full flex-col">
220-
<div className="not-italic font-normal text-sm text-gray-500">
250+
<div className="text-sm text-gray-500">
221251
{ metric.label }
222252
</div>
223253

224-
<div>
225-
{ formatMetricValue( metric.value ) }
254+
<div className='flex items-end gap-1'>
255+
<span className='text-2xl text-black font-bold'>{formattedValue}</span>
256+
<span className='text-sm text-gray-500'>{unit}</span>
226257
</div>
227258

228-
<div className="font-normal text-sm text-gray-600">
259+
<div className="font-normal text-gray-600">
229260
{ metric.description }
230261
</div>
231262
</div>
@@ -234,39 +265,42 @@ const Dashboard = () => {
234265
}) }
235266
</div>
236267
</div>
237-
<div className="my-3 bg-white p-8 border-0 rounded-lg shadow-md">
238-
<div className="text-gray-800 font-bold text-2xl">{ optimoleDashboardApp.strings.quick_action_title }</div>
239-
<div className="grid grid-cols-1 md:grid-cols-2 gap-5 py-5">
240-
{quickactions.map( ( action, index ) => (
241-
<div
242-
key={index}
243-
className="flex items-start items-center gap-3 p-4 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
244-
>
245-
{action.icon}
246-
<div className="flex flex-col">
247-
<span className="font-medium text-base text-gray-800">{action.title}</span>
248-
{ 'speedTest' === action.value ? (
249-
<a href={action.link} target="_blank" className="text-info text-sm font-medium hover:text-info">{action.description}</a>
250-
) : (
251-
<Button
252-
variant="default"
253-
className="text-info text-sm font-medium p-0 h-5 focus:!shadow-none focus:!outline-none"
254-
onClick={ () => action.value() }
255-
>
256-
{ action.description }
257-
</Button>
258-
) }
259-
</div>
260-
</div>
261-
) )}
268+
<div className="bg-white p-8 border-0 rounded-lg shadow-md">
269+
<div className="text-gray-800 text-xl font-semibold mb-5">{ optimoleDashboardApp.strings.quick_action_title }</div>
270+
<div className="grid md:grid-cols-2 gap-5">
271+
{quickactions.map( ( action, index ) => {
272+
273+
const TAG = 'speedTest' === action.value ? 'a' : 'button';
274+
const additionalProps = 'speedTest' === action.value ? {
275+
href: action.link,
276+
target: '_blank'
277+
} : {
278+
onClick: () => {
279+
action.value();
280+
}
281+
};
282+
return (
283+
<TAG
284+
key={index}
285+
className="flex items-center gap-3 p-4 bg-gray-50 rounded-lg hover:bg-light-blue hover:bg-info hover:border-info transition-background duration-300 group shadow-none border-gray-200 border border-solid cursor-pointer"
286+
{...additionalProps}
287+
>
288+
<Icon icon={action.icon} className="text-info"/>
289+
<div className="flex flex-col items-start gap-1">
290+
<span className="font-medium text-base text-gray-800">{action.title}</span>
291+
<span className="text-info text-sm font-medium hover:text-info">{action.description}</span>
292+
</div>
293+
</TAG>
294+
);
295+
})}
262296
</div>
263297
</div>
264-
<div className="bg-white p-8 border-0 rounded-lg shadow-md">
298+
<div className="bg-white p-8 border-0 rounded-lg shadow-md hidden lg:block">
265299
{ 'yes' !== optimoleDashboardApp.remove_latest_images && (
266300
<LastImages />
267301
) }
268302
</div>
269-
</>
303+
</div>
270304
);
271305
};
272306

‎assets/src/dashboard/parts/connected/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ const ConnectedLayout = ({
123123

124124
<div className="flex flex-col xl:flex-row mx-auto gap-5">
125125
<div
126-
className="flex flex-col justify-between mt-8 xl:mb-5 p-0 transition-all ease-in-out duration-700 relative text-gray-700 grow"
126+
className="flex flex-col mt-8 xl:mb-5 p-0 transition-all ease-in-out duration-700 relative text-gray-700 grow"
127127
>
128128
{ 'dashboard' === tab && <Dashboard /> }
129129

‎assets/src/dashboard/parts/connected/settings/General.js

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ const General = ({
4141

4242
const isReplacerEnabled = 'disabled' !== settings[ 'image_replacer' ];
4343
const isLazyloadEnabled = 'disabled' !== settings.lazyload;
44-
const isReportEnabled = 'disabled' !== settings[ 'report_script' ];
4544
const isAssetsEnabled = 'disabled' !== settings.cdn;
4645
const isBannerEnabled = 'disabled' !== settings[ 'banner_frontend'];
4746
const isShowBadgeIcon = 'disabled' !== settings[ 'show_badge_icon' ];
@@ -92,21 +91,6 @@ const General = ({
9291

9392
<hr className="my-8 border-grayish-blue"/>
9493

95-
<ToggleControl
96-
label={ optimoleDashboardApp.strings.options_strings.enable_report_title }
97-
help={ () => <p dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.options_strings.enable_report_desc } } /> }
98-
checked={ isReportEnabled }
99-
disabled={ isLoading }
100-
className={ classnames(
101-
{
102-
'is-disabled': isLoading
103-
}
104-
) }
105-
onChange={ value => updateOption( 'report_script', value ) }
106-
/>
107-
108-
<hr className="my-8 border-grayish-blue"/>
109-
11094
<ToggleControl
11195
label={ optimoleDashboardApp.strings.options_strings.enable_badge_title }
11296
help={ () => <p dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.options_strings.enable_badge_description } } /> }

0 commit comments

Comments
 (0)