slenderock
4/4/2017 - 4:08 PM
vue.js examples
vue.js examples
<div class='event'
:id="'event-' + sectionID + '-' + event.id"
:draggable='editable'
:style="eventWidth() + eventLeft() + backgroundColor(0.6)"
:data-event-index='index'
v-tooltip.top-center="tooltipContent(event , eventObj)"
@click='openModal()'
@dragstart='dragstart($event)'
@dragend='dragend($event)'
@dragover='dragover($event)'
@drop='drop($event)'
data-boxtype='event'
data-appendto='section'
>
<div class='percent-bar-left'
:style="percentBarWidth() + backgroundColor(0.7)"
></div>
<span class='effort-bar' v-html='eventObj.getEffort()'></span>
<div class='event-title'>{{eventObj.title}}</div>
<div class='event-overlay'></div>
<i class='fa fa-times' v-if='event.template' @click='removeTemplate()'></i>
</div>import { Event } from '../../../../../models/event.es6';
import { Legend } from '../../../../../models/legend.es6';
import { canDrop, hasClass } from '../../../../../shared/helpers';
import template from './event.html';
import VTooltip from 'v-tooltip';
Vue.use(VTooltip);
var EventComponent = {
props: ['section', 'event', 'listIndex', 'index', 'showModal', 'editable'],
template: template,
created() {
this.eventObj = new Event(this.event, this.event.__route);
this.$root.$on(`event-updated-${this.event.id}`, (event) => {
console.log('event-updated');
this.$set(this, 'eventObj', new Event(event, this.event.__route));
$('div.drop-zone-container:empty').remove();
this.$forceUpdate();
});
this.$root.$on(`legend-new-${this.event.id}`, (legend) => {
if (legend){
this.$set(this, 'eventObj', new Event(event, this.event.__route));
this.$set(this.event, 'legend', legend);
this.$set(this.event, 'legend_id', legend.id);
this.$set(this.eventObj, 'legend', legend);
this.$set(this.eventObj, 'legend_id', legend.id);
}
});
this.$root.$on('legend-updated', (legend) => {
if(this.event.legend_id == legend.id) {
this.$set(this.event, 'legend', legend);
}
});
this.$root.$on('legend-deleted', (id) => {
if(this.event.legend_id == id) {
this.event.legend_id = null;
this.$set(this.event, 'legend', null);
}
});
this.$root.$on('width-increased', () => {
this.$forceUpdate();
});
this.$root.$on('width-decreased', () => {
this.$forceUpdate();
});
},
data() {
let sectionID = null;
if(this.section){
sectionID = this.section.id;
}
return {
defaultColor: '#F06031',
sectionID: sectionID
}
},
methods: {
tooltipContent(event, eventObj){
return '<div class="header">' + eventObj.title + '</div><hr><div style="white-space: pre-line;">'+ this.sliceDesc(eventObj.description) +'</div><br><div><b>' +eventObj.percent_complete +'% complited</b></div><div>' + this.getEventLegend(event.legend)+ '</div>'
},
sliceDesc(text){
if (text){return text.slice(0 ,400) + '...<a>Read more</a>'
}
else{
return 'No description'
}
},
getEventLegend(legend){
if(legend){
return'<i class="fa fa-circle fa-lg" style="'+this.getLegendColor(legend)+'" aria-hidden="true"></i><span>' + ' ' + legend.title+'</span></div>'
}
else {
return 'No legend'
}
},
getLegendColor(legend){
if (legend){
return 'color:'+ legend.color}
},
dragover(e) {
e.preventDefault();
},
dragstart(e) {
e.dataTransfer.setData('text/plain', e.target.id);
this.$root.$emit('toggle-dashed-line');
localStorage.setItem('roadmap-ID', e.target.id);
localStorage.setItem('event', JSON.stringify(this.eventObj));
localStorage.setItem('clientX', e.clientX);
},
dragend(e) {
this.$root.$emit('toggle-dashed-line');
this.$root.$emit('lanes-updated');
},
drop(e) {
e.preventDefault();
if(canDrop(e, e.target.parentNode)) {
let legend = new Legend(JSON.parse(localStorage.getItem('legend')), this.event.legends_route);
this.eventObj.legend_id = legend.id;
this.eventObj.save().then(
(response) => {
this.$set(this.event, 'legend', legend);
this.$set(this.event, 'legend_id', legend.id);
this.$set(this.eventObj, 'legend', legend);
this.$set(this.eventObj, 'legend_id', legend.id);
},
(error) => {
console.log(0, error)
}
);
}
},
openModal() {
if(this.showModal) {
this.eventObj.links = this.event.links;
this.eventObj.legend = this.event.legend;
this.$root.$emit('show-event-modal', this.eventObj, this.section.id);
}
},
removeTemplate() {
let ID = this.eventObj.id;
if(this.eventObj.template) {
this.eventObj.destroy().then(
() => {
this.$root.$emit('event-deleted', ID);
},
error => {
console.log(0, error);
}
);
}
},
percentBarWidth() {
return 'width: ' + this.eventObj.percent_complete + '%;';
},
eventWidth() {
return 'width: ' + this.eventObj.width() + 'px;';
},
eventLeft() {
return 'left: ' + this.eventObj.left() + 'px;';
},
backgroundColor(opacity) {
//console.log(this.event.title);
//this.event.legend ? console.log(this.event.legend.color) : console.log('not persisted');
//this.eventObj.legend_new ? console.log(this.eventObj.legend_new.color) : console.log('not persisted');
//this.eventObj.legend ? console.log(this.eventObj.legend.color) : console.log('not persisted');
//console.log('end');
let color = this.defaultColor;
if(this.event.legend)
color = this.event.legend.color;
let rgb = this.hexToRgb(color);
return 'background-color: rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ', ' + opacity + '); ';
},
// eventBorder() {
// let color = this.defaultColor;
//
// if(this.event.legend){
// color = this.event.legend.color;
// } else if(this.eventObj.legend_new) {
// color = this.eventObj.legend_new.color;
// this.event.legend = this.eventObj.legend_new;
// } else if (this.event.legend && this.eventObj.legend_new && this.eventObj.legend){
// color = this.eventObj.legend.color;
// this.eventObj.legend_new = this.eventObj.legend;
// }
// return 'border: 1px solid ' + this.getCont(color) + '; color: '+ this.getCont(color)+';';
// },
//
// getCont(color){
// let rgb = this.hexToRgb(color);
// let yiq = ((rgb.r*299)+(rgb.g*587)+(rgb.b*114))/1000;
// return (yiq >= 128) ? 'black' : 'white';
// },
hexToRgb(hex) {
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
}
};
export { EventComponent };