88 lines
2.2 KiB
HTML
88 lines
2.2 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block head %}
|
|
<link rel="stylesheet" href="/static/css/diff2html.min.css">
|
|
<script src="/static/js/diff2html.min.js"></script>
|
|
{% end %}
|
|
|
|
{% block body %}
|
|
<div id="app">
|
|
<div class="md-layout">
|
|
<div class="md-layout-item">
|
|
<md-card id="main-card">
|
|
<md-card-header>
|
|
<div class="md-title">
|
|
<md-button href="/" class="md-icon-button md-primary">
|
|
<md-icon>home</md-icon>
|
|
</md-button>
|
|
Diffido: ${schedule && schedule.title} diff
|
|
</div>
|
|
</md-card-header>
|
|
|
|
<md-card-content id="diffpanel-container">
|
|
<div id="diffpanel"></div>
|
|
</md-card-content>
|
|
</md-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
Vue.use(VueMaterial.default);
|
|
|
|
var app = new Vue({
|
|
el: '#app',
|
|
delimiters: ['${', '}'],
|
|
data: {
|
|
schedule: {},
|
|
history: [],
|
|
difftext: '',
|
|
id: "{{id}}",
|
|
{% try %}
|
|
{% if diff %}
|
|
diff: "{{diff}}",
|
|
{% end %}
|
|
{% except %}
|
|
diff: null,
|
|
{% end %}
|
|
{% try %}
|
|
{% if oldid %}
|
|
oldid: "{{oldid}}",
|
|
{% end %}
|
|
{% except %}
|
|
oldid: null,
|
|
{% end %}
|
|
},
|
|
mounted: function() {
|
|
this.getDiff();
|
|
},
|
|
methods: {
|
|
getDiff: function() {
|
|
self = this;
|
|
var data = axios.get('/api/diff/' + this.id + '/' + this.diff + '/' + (this.oldid || '')).then(function(response) {
|
|
self.schedule = response.data.schedule;
|
|
self.difftext = response.data.diff;
|
|
var current_size = document.getElementById('diffpanel').offsetWidth;
|
|
var pretty_diff = Diff2Html.getPrettyHtml(self.difftext, {showFiles: true, matching: 'none'});
|
|
document.getElementById('diffpanel').innerHTML = pretty_diff;
|
|
document.getElementById('diffpanel').style['max-width'] = (current_size - 20) + 'px';
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
</script>
|
|
<style>
|
|
|
|
body {
|
|
background-color: white;
|
|
padding: 6px;
|
|
}
|
|
|
|
.md-table {
|
|
height: 80%;
|
|
}
|
|
|
|
</style>
|
|
{% end %}
|