12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788 |
- {% 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 %}
|