Skip to content

Commit

Permalink
feat: adds possible conflicts tab which reports the most common probl…
Browse files Browse the repository at this point in the history 
…ems that Optimole might have with various plugins
  • Loading branch information
@selul
selul committed May 29, 2019
1 parent 4134b05 commit 3b1ec3f
Show file tree
Hide file tree
Showing 15 changed files with 368 additions and 159 deletions.
58 changes: 58 additions & 0 deletions assets/vue/components/conflict-item.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<template>
<div class="notification" :class="conflictClass( item.severity )">
<div v-html="item.message"></div>

<a :class="is_loading ? 'is-loading' : '' "
class="is-pulled-right button optml-conflict-done is-small is-link is-inverted is-outlined"
v-on:click="dismissConflict( item.id )"><span v-if="!is_loading" class="dashicons dashicons-yes"></span>{{strings.conflict_close}}</a>
<div class=" is-clearfix"></div>
</div>
</template>

<script>
export default {
name: "conflict-item",
props: {
item:{
type: Object
},
is_loading:{
type: Boolean,
default: false
}
},
data() {
return {
home_url: optimoleDashboardApp.home_url,
strings: optimoleDashboardApp.strings.conflicts,
}
},
methods: {
conflictClass(type) {
if (type === 'high') {
return 'is-danger';
}
if (type === 'medium') {
return 'is-info';
}
return 'is-primary';
},
dismissConflict(conflictID) {
this.is_loading = true;
this.$store.dispatch('dismissConflict', {conflictID: conflictID, component: this});
}
}
}
</script>
<style scoped>
#optimole-app .optml-conflict-done.button.is-link.is-outlined.is-loading::after {
border-color: transparent transparent #fff #fff !important;
}
.optml-conflict-done:hover {
background-color: transparent !important;
color: #fff !important;
border-color: transparent !important;
}
</style>
49 changes: 16 additions & 33 deletions assets/vue/components/conflicts.vue
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,35 @@
<template>
<div>
<div class="conflicts-table">
<h3 class="has-text-centered">{{strings.title}}</h3>
<h6 v-if="!noConflicts" class="has-text-centered">{{strings.title}}</h6>
<div v-if="!noConflicts">

<div class="row" v-for="(item, index) in conflictData">
<div class="column">
<conflict-item v-bind:item=item v-bind:is_loading="false"></conflict-item>
</div>
</div>
</div>
<div v-if="noConflicts">
<table class="table is-striped is-hoverable is-fullwidth">
<tbody>
<tr v-for="(item, index) in conflictData">
<td>
<div class="notification" :class="conflictClass( item.severity )">
<button class="delete" style="box-sizing: border-box;" v-on:click="dismissConflict( item.id )"></button>
{{item.message}}
</div>
</td>
<tr>
<th class="optml-image-heading has-text-centered" v-html="strings.no_conflicts_found"></th>
</tr>
</tbody>
</table>
</div>
<div v-if="noConflicts">
<table class="table is-striped is-hoverable is-fullwidth">
<thead>
<tr>
<th class="optml-image-heading has-text-centered" v-html="strings.no_conflicts_found"></th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</template>

<script>
import ConflictItem from "./conflict-item.vue";
export default {
name: "conflicts",
components: {ConflictItem},
data() {
return {
home_url: optimoleDashboardApp.home_url,
Expand All @@ -42,24 +39,10 @@
computed: {
noConflicts() {
return this.$store.state.conflicts.count === 0
},
},
conflictData() {
return this.$store.state.conflicts.conflicts !== null ? this.$store.state.conflicts.conflicts : [];
},
},
methods: {
conflictClass( type ) {
if ( type === 'high' ) {
return 'is-danger';
}
if ( type === 'medium' ) {
return 'is-warning';
}
return 'is-info';
},
dismissConflict( conflictID ) {
this.$store.dispatch('dismissConflict', {conflictID: conflictID, component: this});
}
}
}
</script>
</script>
40 changes: 24 additions & 16 deletions assets/vue/components/main.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="columns is-desktop">

<div class="column ">
<div class="card">
<app-header></app-header>
Expand All @@ -10,14 +10,20 @@
<transition name="fade" mode="out-in">
<div v-if="this.$store.state.connected">
<div class="tabs is-left is-boxed is-medium">
<ul class="is-marginless">
<ul class="is-marginless optml-tabs">
<li :class="tab === 'dashboard' ? 'is-active' : ''">
<a @click="changeTab('dashboard')" class="is-size-6-mobile">
<span class="icon is-size-6-mobile is-size-6-tablet dashicons dashicons-admin-home"></span>
<span class="is-size-6-mobile is-size-6-touch ">{{strings.dashboard_menu_item}}</span>
</a>
</li>

<li :class="tab === 'conflicts' ? 'is-active' : ''" v-if="conflictCount > 0">
<a @click="changeTab('conflicts')" class="is-size-6-mobile">
<span class="icon is-size-6-mobile is-size-6-tablet dashicons dashicons-warning"></span>
<span class="is-size-6-mobile is-size-6-touch">{{strings.conflicts_menu_item}}</span>&nbsp;
<span class="tag is-rounded is-danger">{{conflictCount}}</span>
</a>
</li>
<li :class="tab === 'settings' ? 'is-active' : ''">
<a @click="changeTab('settings')" class="is-size-6-mobile ">
<span class="icon is-size-6-mobile is-size-6-tablet dashicons dashicons-admin-settings"></span>
Expand All @@ -30,16 +36,10 @@
<span class="is-size-6-mobile is-size-6-touch">{{strings.watermarks_menu_item}}</span>
</a>
</li>
<li :class="tab === 'conflicts' ? 'is-active' : ''" v-if="conflictCount > 0">
<a @click="changeTab('conflicts')" class="is-size-6-mobile">
<span class="icon is-size-6-mobile is-size-6-tablet dashicons dashicons-warning"></span>
<span class="is-size-6-mobile is-size-6-touch">{{strings.conflicts_menu_item}}</span>&nbsp;
<span class="tag is-rounded is-warning">{{conflictCount}}</span>
</a>
</li>

</ul>
</div>

<div class="is-tab" v-if="tab === 'dashboard' " :class="remove_images ? 'no-images' : '' ">
<div class="notification is-success" v-if="strings.notice_just_activated.length > 0"
v-html="strings.notice_just_activated"></div>
Expand All @@ -61,7 +61,7 @@
</transition>
</div>
</div>

<div class="level-right">
<p class="level-item"><a href="https://optimole.com" target="_blank">Optimole
v{{strings.version}}</a></p>
Expand Down Expand Up @@ -151,19 +151,27 @@
</script>
<style lang="sass-loader">
@import '../../css/style.scss';
#optimole-app .tabs a {
margin-bottom: -4px;
}
#optimole-app .optml-upgrade {
min-width: 200px;
}
#optimole-app .is-tab.no-images{
min-height: 400px;
}
#optimole-app .is-tab {
min-height: 700px;
}
</style>
.optml-tabs{
position: relative;
}
.optml-tabs .optml-conflicts-tabs{
position: absolute;
right: 0;
top: 0;
}
</style>
6 changes: 0 additions & 6 deletions assets/vue/store/actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ const connectOptimole = function ( {commit, state}, data ) {
url: optimoleDashboardApp.root + '/connect',
method: 'POST',
headers: {'X-WP-Nonce': optimoleDashboardApp.nonce},
params: {'req': data.req},
body: {
'api_key': data.apiKey,
},
Expand Down Expand Up @@ -52,7 +51,6 @@ const registerOptimole = function ( {commit, state}, data ) {
url: optimoleDashboardApp.root + '/register',
method: 'POST',
headers: {'X-WP-Nonce': optimoleDashboardApp.nonce},
params: {'req': data.req},
body: {
'email': data.email,
},
Expand Down Expand Up @@ -80,7 +78,6 @@ const disconnectOptimole = function ( {commit, state}, data ) {
url: optimoleDashboardApp.root + '/disconnect',
method: 'GET',
headers: {'X-WP-Nonce': optimoleDashboardApp.nonce},
params: {'req': data.req},
emulateJSON: true,
responseType: 'json'
}
Expand Down Expand Up @@ -164,7 +161,6 @@ const retrieveOptimizedImages = function ( {commit, state}, data ) {
method: 'GET',
emulateJSON: true,
headers: {'X-WP-Nonce': optimoleDashboardApp.nonce},
params: {'req': 'Get Optimized Images'},
responseType: 'json',
timeout: 10000
}
Expand Down Expand Up @@ -199,7 +195,6 @@ const retrieveWatermarks = function ( {commit, state}, data ) {
url: optimoleDashboardApp.root + '/poll_watermarks',
method: 'GET',
headers: {'X-WP-Nonce': optimoleDashboardApp.nonce},
params: {'req': 'Get Watermarks'},
responseType: 'json',
} ).then( function ( response ) {
commit( 'toggleLoading', false );
Expand Down Expand Up @@ -260,7 +255,6 @@ const retrieveConflicts = function ( {commit, state}, data ) {
url: optimoleDashboardApp.root + '/poll_conflicts',
method: 'GET',
headers: {'X-WP-Nonce': optimoleDashboardApp.nonce},
params: {'req': 'Get Conflicts'},
responseType: 'json',
} ).then( function ( response ) {
commit( 'toggleLoading', false );
Expand Down
5 changes: 3 additions & 2 deletions inc/admin.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -527,10 +527,11 @@ private function get_dashboard_strings() {
'dashboard_menu_item' => __( 'Dashboard', 'optimole-wp' ),
'settings_menu_item' => __( 'General Settings', 'optimole-wp' ),
'watermarks_menu_item' => __( 'Watermark options', 'optimole-wp' ),
'conflicts_menu_item' => __( 'Conflicts', 'optimole-wp' ),
'conflicts_menu_item' => __( 'Possible issues', 'optimole-wp' ),
'conflicts' => array(
'title' => __( 'Possible Conflicts', 'optimole-wp' ),
'title' => __( 'We might have some possible conflicts with the plugins that you use. In order to benefit from Optimole\'s full potential you will need to address this issues.', 'optimole-wp' ),
'message' => __( 'Details', 'optimole-wp' ),
'conflict_close' => __( 'I\'ve done this.', 'optimole-wp' ),
'no_conflicts_found' => __( 'No conflicts found. We are all peachy now. 🍑', 'optimole-wp' ),
),
'upgrade' => array(
Expand Down
38 changes: 20 additions & 18 deletions inc/conflicts/abstract_conflict.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
*
* @since 2.0.6
*/
abstract class Optml_Abstract_Conflict {
abstract class Optml_Abstract_Conflict {
/**
* Constant for low severity.
*
Expand Down Expand Up @@ -74,67 +74,69 @@ public function __construct() {
}

/**
* Get the id for the conflict.
* Set the message property
*
* @since 2.0.6
* @access public
* @param int $length Optional. A length for the generated ID.
*
* @return bool|string
*/
public function get_id( $length = 8 ) {
$hash = sha1( $this->message . $this->type . $this->severity . $this->priority );
return substr( $hash, 0, $length );
}
abstract public function define_message();

/**
* Checks if conflict is active.
*
* @since 2.0.6
* @access public
* @param array $dismissed_conflicts A list of dismissed conflicts. Passed by the manager.
*
* @return bool
* @since 2.0.6
* @access public
*/
public function is_active( $dismissed_conflicts = array() ) {
$conflict_id = $this->get_id();
if ( isset( $dismissed_conflicts[ $conflict_id ] ) && $dismissed_conflicts[ $conflict_id ] === 'true' ) {
return false;
}

return $this->is_conflict_valid();
}

/**
* Set the message property
* Get the id for the conflict.
*
* @param int $length Optional. A length for the generated ID.
*
* @return bool|string
* @since 2.0.6
* @access public
*/
abstract public function define_message();
public function get_id( $length = 8 ) {
$hash = sha1( strtolower( get_called_class() ) . $this->type . $this->severity . $this->priority );

return substr( $hash, 0, $length );
}

/**
* Determine if conflict is applicable.
*
* @return bool
* @since 2.0.6
* @access public
* @return bool
*/
abstract public function is_conflict_valid();

/**
* Get the conflict information.
*
* @return array
* @since 2.0.6
* @access public
* @return array
*/
public function get_conflict() {
return array(
'id' => $this->get_id(),
'type' => $this->type,
'id' => $this->get_id(),
'type' => $this->type,
'priority' => $this->priority,
'severity' => $this->severity,
'message' => $this->message,
'message' => $this->message,
);
}
}
Loading

0 comments on commit 3b1ec3f

Please sign in to comment.