Use new code style
This commit is contained in:
David Stone
@ -7,181 +7,181 @@
|
||||
?>
|
||||
<div class="wu-styling">
|
||||
|
||||
<div id="activity-stream-content">
|
||||
<div id="activity-stream-content">
|
||||
|
||||
<div v-if="loading"
|
||||
class="wu-text-center wu-bg-gray-100 wu-rounded wu-uppercase wu-font-semibold wu-text-xs wu-text-gray-700 wu-p-4">
|
||||
<span class="wu-blinking-animation"><?php _e('Loading...', 'wp-ultimo'); ?></span>
|
||||
</div>
|
||||
<div v-if="loading"
|
||||
class="wu-text-center wu-bg-gray-100 wu-rounded wu-uppercase wu-font-semibold wu-text-xs wu-text-gray-700 wu-p-4">
|
||||
<span class="wu-blinking-animation"><?php _e('Loading...', 'wp-ultimo'); ?></span>
|
||||
</div>
|
||||
|
||||
<div v-if='!queried.count && !loading' v-cloak class='wu-feed-loading wu-mb-6'>
|
||||
<?php _e('No more items to display', 'wp-ultimo'); ?>
|
||||
</div>
|
||||
<div v-if='!queried.count && !loading' v-cloak class='wu-feed-loading wu-mb-6'>
|
||||
<?php _e('No more items to display', 'wp-ultimo'); ?>
|
||||
</div>
|
||||
|
||||
<div v-if="!loading" class="wu-widget-inset">
|
||||
<div v-if="!loading" class="wu-widget-inset">
|
||||
|
||||
<ul class="wu-m-0 wu-p-0 wu-divide-gray-200" v-cloak>
|
||||
<ul class="wu-m-0 wu-p-0 wu-divide-gray-200" v-cloak>
|
||||
|
||||
<li
|
||||
class="wu-m-0"
|
||||
:class="index > 0 ? 'wu-border-solid wu-border-0 wu-border-t wu-border-gray-300' : ''"
|
||||
v-for="(event, index) in queried.events"
|
||||
>
|
||||
<a :href="'<?php echo wu_network_admin_url('wp-ultimo-view-event', array('id' => '')); ?>=' + event.id" class="wu-block hover:wu-bg-gray-50">
|
||||
<div class="wu-px-4 wu-py-4 wu-flex wu-items-center">
|
||||
<div class="wu-min-w-0 wu-flex-1 sm:wu-flex sm:wu-items-center">
|
||||
<div class="wu-mt-4 wu-flex-shrink-0 sm:wu-mt-0 sm:wu-mr-4">
|
||||
<div class="wu-flex wu-relative">
|
||||
<li
|
||||
class="wu-m-0"
|
||||
:class="index > 0 ? 'wu-border-solid wu-border-0 wu-border-t wu-border-gray-300' : ''"
|
||||
v-for="(event, index) in queried.events"
|
||||
>
|
||||
<a :href="'<?php echo wu_network_admin_url('wp-ultimo-view-event', array('id' => '')); ?>=' + event.id" class="wu-block hover:wu-bg-gray-50">
|
||||
<div class="wu-px-4 wu-py-4 wu-flex wu-items-center">
|
||||
<div class="wu-min-w-0 wu-flex-1 sm:wu-flex sm:wu-items-center">
|
||||
<div class="wu-mt-4 wu-flex-shrink-0 sm:wu-mt-0 sm:wu-mr-4">
|
||||
<div class="wu-flex wu-relative">
|
||||
|
||||
<img v-if="event.author.avatar"
|
||||
class="wu-inline-block wu-h-7 wu-w-7 wu-rounded-full wu-ring-2 wu-ring-white"
|
||||
:src="event.author.avatar"
|
||||
:alt="event.author.display_name"
|
||||
>
|
||||
<img v-if="event.author.avatar"
|
||||
class="wu-inline-block wu-h-7 wu-w-7 wu-rounded-full wu-ring-2 wu-ring-white"
|
||||
:src="event.author.avatar"
|
||||
:alt="event.author.display_name"
|
||||
>
|
||||
|
||||
<div v-if="!event.author.avatar" class="wu-flex wu-h-7 wu-w-7 wu-rounded-full wu-ring-2 wu-ring-white wu-bg-gray-300 wu-items-center wu-justify-center">
|
||||
<span class="dashicons-wu-tools wu-text-gray-700 wu-text-xl"></span>
|
||||
</div>
|
||||
<div v-if="!event.author.avatar" class="wu-flex wu-h-7 wu-w-7 wu-rounded-full wu-ring-2 wu-ring-white wu-bg-gray-300 wu-items-center wu-justify-center">
|
||||
<span class="dashicons-wu-tools wu-text-gray-700 wu-text-xl"></span>
|
||||
</div>
|
||||
|
||||
<span
|
||||
role="tooltip"
|
||||
:aria-label="event.initiator.charAt(0).toUpperCase() + event.initiator.slice(1) + ' - ' + event.severity_label"
|
||||
class="wu-absolute wu-rounded-full wu--mb-2 wu--mr-2 wu-flex wu-items-center wu-justify-center wu-font-mono wu-bottom-0 wu-right-0 wu-font-bold wu-h-3 wu-w-3 wu-uppercase wu-text-2xs wu-p-1 wu-border-solid wu-border-2 wu-border-white"
|
||||
:class="event.severity_classes"
|
||||
>
|
||||
{{ event.severity_label[0] }}
|
||||
</span>
|
||||
<span
|
||||
role="tooltip"
|
||||
:aria-label="event.initiator.charAt(0).toUpperCase() + event.initiator.slice(1) + ' - ' + event.severity_label"
|
||||
class="wu-absolute wu-rounded-full wu--mb-2 wu--mr-2 wu-flex wu-items-center wu-justify-center wu-font-mono wu-bottom-0 wu-right-0 wu-font-bold wu-h-3 wu-w-3 wu-uppercase wu-text-2xs wu-p-1 wu-border-solid wu-border-2 wu-border-white"
|
||||
:class="event.severity_classes"
|
||||
>
|
||||
{{ event.severity_label[0] }}
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="wu-flex wu-font-medium wu-text-gray-700 wu-truncate">
|
||||
<p class="wu-m-0 wu-p-0 wu-capitalize">{{ event.object_type }}</p>
|
||||
<p class="wu-p-0 wu-m-0 wu-ml-1 wu-font-normal wu-text-gray-600">
|
||||
<?php printf(__('with %s', 'wp-ultimo'), '{{ event.slug }}'); ?>
|
||||
</p>
|
||||
</div>
|
||||
<div class="wu-mt-1">
|
||||
<div class="wu-text-sm wu-text-gray-600">
|
||||
<!-- Heroicon name: calendar -->
|
||||
<p class="wu-p-0 wu-m-0">
|
||||
<span v-html="event.message"></span>
|
||||
<span class="wu-text-gray-700 wu-ml-2"><span class="dashicons-wu-clock wu-mr-1 wu-align-middle"></span>{{ $moment(event.date_created, "YYYYMMDD").fromNow() }}</span>
|
||||
<span v-if="event.author.display_name" class="wu-text-gray-700"><?php printf(__('by %s', 'wp-ultimo'), '{{ event.author.display_name }}'); ?></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wu-ml-auto wu-flex-shrink-0">
|
||||
<svg class="wu-h-5 wu-w-5 wu-text-gray-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="wu-flex wu-font-medium wu-text-gray-700 wu-truncate">
|
||||
<p class="wu-m-0 wu-p-0 wu-capitalize">{{ event.object_type }}</p>
|
||||
<p class="wu-p-0 wu-m-0 wu-ml-1 wu-font-normal wu-text-gray-600">
|
||||
<?php printf(__('with %s', 'wp-ultimo'), '{{ event.slug }}'); ?>
|
||||
</p>
|
||||
</div>
|
||||
<div class="wu-mt-1">
|
||||
<div class="wu-text-sm wu-text-gray-600">
|
||||
<!-- Heroicon name: calendar -->
|
||||
<p class="wu-p-0 wu-m-0">
|
||||
<span v-html="event.message"></span>
|
||||
<span class="wu-text-gray-700 wu-ml-2"><span class="dashicons-wu-clock wu-mr-1 wu-align-middle"></span>{{ $moment(event.date_created, "YYYYMMDD").fromNow() }}</span>
|
||||
<span v-if="event.author.display_name" class="wu-text-gray-700"><?php printf(__('by %s', 'wp-ultimo'), '{{ event.author.display_name }}'); ?></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wu-ml-auto wu-flex-shrink-0">
|
||||
<svg class="wu-h-5 wu-w-5 wu-text-gray-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<div v-cloak class="wu-p-4 wu-bg-gray-100 wu-border-solid wu-border-0 wu-border-t wu-border-gray-300">
|
||||
<div v-cloak class="wu-p-4 wu-bg-gray-100 wu-border-solid wu-border-0 wu-border-t wu-border-gray-300">
|
||||
|
||||
<ul
|
||||
v-if='!loading'
|
||||
class='wu-feed-pagination wu-m-0 wu-flex wu-justify-between'>
|
||||
<li class="wu-w-1/3 wu-m-0">
|
||||
<a href="#" class="wu-block" v-on:click.prevent="refresh">
|
||||
<?php _e('Refresh', 'wp-ultimo'); ?>
|
||||
</a>
|
||||
</li>
|
||||
<li v-if="page > 1" class="wu-w-1/3 wu-text-center wu-m-0">
|
||||
<a href="#" v-on:click.prevent="navigatePrev" class="wu-block">
|
||||
← <?php _e('Previous Page', 'wp-ultimo'); ?>
|
||||
</a>
|
||||
</li>
|
||||
<li v-if="hasMore() && !loading" class="wu-w-1/3 wu-text-right wu-m-0">
|
||||
<a href="#" v-on:click.prevent="navigateNext" class="wu-block">
|
||||
<?php _e('Next Page', 'wp-ultimo'); ?>
|
||||
→
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul
|
||||
v-if='!loading'
|
||||
class='wu-feed-pagination wu-m-0 wu-flex wu-justify-between'>
|
||||
<li class="wu-w-1/3 wu-m-0">
|
||||
<a href="#" class="wu-block" v-on:click.prevent="refresh">
|
||||
<?php _e('Refresh', 'wp-ultimo'); ?>
|
||||
</a>
|
||||
</li>
|
||||
<li v-if="page > 1" class="wu-w-1/3 wu-text-center wu-m-0">
|
||||
<a href="#" v-on:click.prevent="navigatePrev" class="wu-block">
|
||||
← <?php _e('Previous Page', 'wp-ultimo'); ?>
|
||||
</a>
|
||||
</li>
|
||||
<li v-if="hasMore() && !loading" class="wu-w-1/3 wu-text-right wu-m-0">
|
||||
<a href="#" v-on:click.prevent="navigateNext" class="wu-block">
|
||||
<?php _e('Next Page', 'wp-ultimo'); ?>
|
||||
→
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script type="application/javascript">
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
Object.defineProperty(Vue.prototype, '$moment', {
|
||||
value: wu_moment
|
||||
});
|
||||
Object.defineProperty(Vue.prototype, '$moment', {
|
||||
value: wu_moment
|
||||
});
|
||||
|
||||
var wuActivityStream = new Vue({
|
||||
el: '#activity-stream-content',
|
||||
data: {
|
||||
count: 0,
|
||||
loading: true,
|
||||
page: 1,
|
||||
queried: [],
|
||||
error: false,
|
||||
errorMessage: "",
|
||||
},
|
||||
mounted: function() {
|
||||
this.pullQuery();
|
||||
},
|
||||
watch: {
|
||||
queried: function(value) {},
|
||||
},
|
||||
methods: {
|
||||
hasMore: function() {
|
||||
return this.queried.count > (this.page * 5)
|
||||
},
|
||||
refresh: function() {
|
||||
this.loading = true;
|
||||
this.pullQuery();
|
||||
},
|
||||
navigatePrev: function() {
|
||||
this.page = this.page <= 1 ? 1 : this.page - 1;
|
||||
this.loading = true;
|
||||
this.pullQuery();
|
||||
},
|
||||
navigateNext: function() {
|
||||
this.page = this.page + 1;
|
||||
this.loading = true;
|
||||
this.pullQuery();
|
||||
},
|
||||
pullQuery: function() {
|
||||
var that = this;
|
||||
jQuery.ajax({
|
||||
url: ajaxurl,
|
||||
data: {
|
||||
_ajax_nonce: '<?php echo esc_js(wp_create_nonce('wu_activity_stream')); ?>',
|
||||
action: 'wu_fetch_activity',
|
||||
page: this.page,
|
||||
},
|
||||
success: function(data) {
|
||||
that.loading = false;
|
||||
Vue.set(wuActivityStream, 'loading', false);
|
||||
var wuActivityStream = new Vue({
|
||||
el: '#activity-stream-content',
|
||||
data: {
|
||||
count: 0,
|
||||
loading: true,
|
||||
page: 1,
|
||||
queried: [],
|
||||
error: false,
|
||||
errorMessage: "",
|
||||
},
|
||||
mounted: function() {
|
||||
this.pullQuery();
|
||||
},
|
||||
watch: {
|
||||
queried: function(value) {},
|
||||
},
|
||||
methods: {
|
||||
hasMore: function() {
|
||||
return this.queried.count > (this.page * 5)
|
||||
},
|
||||
refresh: function() {
|
||||
this.loading = true;
|
||||
this.pullQuery();
|
||||
},
|
||||
navigatePrev: function() {
|
||||
this.page = this.page <= 1 ? 1 : this.page - 1;
|
||||
this.loading = true;
|
||||
this.pullQuery();
|
||||
},
|
||||
navigateNext: function() {
|
||||
this.page = this.page + 1;
|
||||
this.loading = true;
|
||||
this.pullQuery();
|
||||
},
|
||||
pullQuery: function() {
|
||||
var that = this;
|
||||
jQuery.ajax({
|
||||
url: ajaxurl,
|
||||
data: {
|
||||
_ajax_nonce: '<?php echo esc_js(wp_create_nonce('wu_activity_stream')); ?>',
|
||||
action: 'wu_fetch_activity',
|
||||
page: this.page,
|
||||
},
|
||||
success: function(data) {
|
||||
that.loading = false;
|
||||
Vue.set(wuActivityStream, 'loading', false);
|
||||
|
||||
if (data.success) {
|
||||
if (data.success) {
|
||||
|
||||
Vue.set(wuActivityStream, 'queried', data.data);
|
||||
Vue.set(wuActivityStream, 'queried', data.data);
|
||||
|
||||
} // end if;
|
||||
} // end if;
|
||||
|
||||
},
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
},
|
||||
get_color_event: function(type) {},
|
||||
}
|
||||
});
|
||||
},
|
||||
get_color_event: function(type) {},
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user