alberanid/diffido
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

improve history and diff page style

Browse source
This commit is contained in:
Davide Alberani 2018-01-23 22:41:32 +01:00
parent 59633c56eb
commit eae571d5a9
6 changed files with 71 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
diffido.py
View file

@ -209,11 +209,11 @@ def get_history(id_):
lastid = history[0]['id'] lastid = history[0]['id']
for idx, item in enumerate(history): for idx, item in enumerate(history):
item['seq'] = idx + 1 item['seq'] = idx + 1
return {'history': history, 'lastid': lastid} schedule = get_schedule(id_)
return {'history': history, 'lastid': lastid, 'schedule': schedule}
def get_diff(id_, commit_id='HEAD', old_commit_id=None): def get_diff(id_, commit_id='HEAD', old_commit_id=None):
logger.warn('MEHHHH %s %s %s' % (id_, commit_id, old_commit_id))
def _history(id_, commit_id, old_commit_id, queue): def _history(id_, commit_id, old_commit_id, queue):
os.chdir('storage/%s' % id_) os.chdir('storage/%s' % id_)
p = subprocess.Popen([GIT_CMD, 'diff', old_commit_id or '%s~' % commit_id, commit_id], p = subprocess.Popen([GIT_CMD, 'diff', old_commit_id or '%s~' % commit_id, commit_id],
@ -225,7 +225,8 @@ def get_diff(id_, commit_id='HEAD', old_commit_id=None):
p.start() p.start()
res = queue.get().decode('utf-8') res = queue.get().decode('utf-8')
p.join() p.join()
return {'diff': res} schedule = get_schedule(id_)
return {'diff': res, 'schedule': schedule}
def scheduler_update(scheduler, id_): def scheduler_update(scheduler, id_):

2
dist/base.html vendored
View file

@ -7,11 +7,13 @@
<link rel="stylesheet" href="/static/css/vue-material.min.css"> <link rel="stylesheet" href="/static/css/vue-material.min.css">
<link rel="stylesheet" href="/static/css/themes/default.css"> <link rel="stylesheet" href="/static/css/themes/default.css">
<link rel="stylesheet" href="/static/css/diff2html.css"> <link rel="stylesheet" href="/static/css/diff2html.css">
<script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>
<script src="/static/js/lodash.min.js"></script> <script src="/static/js/lodash.min.js"></script>
<script src="/static/js/vue.js"></script> <script src="/static/js/vue.js"></script>
<script src="/static/js/vue-material.min.js"></script> <script src="/static/js/vue-material.min.js"></script>
<script src="/static/js/axios.min.js"></script> <script src="/static/js/axios.min.js"></script>
<script src="/static/js/diff2html.js"></script> <script src="/static/js/diff2html.js"></script>
<script type="text/javascript" src="/static/js/diff2html-ui.min.js"></script>
</head> </head>
<body> <body>
{% block body %}{% end %} {% block body %}{% end %}

28
dist/diff.html vendored
View file

@ -3,8 +3,21 @@
{% block body %} {% block body %}
<div id="app"> <div id="app">
<div class="md-layout"> <div class="md-layout">
<div class="md-layout-item" md-card> <div class="md-layout-item">
<div id="diffpanel"></div> <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> </div>
</div> </div>
@ -17,6 +30,7 @@ var app = new Vue({
el: '#app', el: '#app',
delimiters: ['${', '}'], delimiters: ['${', '}'],
data: { data: {
schedule: {},
history: [], history: [],
difftext: '', difftext: '',
id: "{{id}}", id: "{{id}}",
@ -42,9 +56,12 @@ var app = new Vue({
getDiff: function() { getDiff: function() {
self = this; self = this;
var data = axios.get('/api/diff/' + this.id + '/' + this.diff + '/' + (this.oldid || '')).then(function(response) { 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; self.difftext = response.data.diff;
var pretty_diff = Diff2Html.getPrettyHtml(self.difftext); 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').innerHTML = pretty_diff;
document.getElementById('diffpanel').style['max-width'] = (current_size - 20) + 'px';
}); });
} }
} }
@ -55,12 +72,11 @@ var app = new Vue({
body { body {
background-color: white; background-color: white;
padding: 6px;
} }
.md-table { .md-table {
width: 60%; height: 80%;
min-height: 800px;
max-height: 800px;
} }
</style> </style>

51
dist/history.html vendored
View file

@ -4,21 +4,34 @@
<div id="app"> <div id="app">
<div class="md-layout"> <div class="md-layout">
<div class="md-layout-item" md-card> <div class="md-layout-item" md-card>
<md-table id="history-table" v-model="history"> <md-card id="main-card">
<md-table-toolbar> <md-card-header>
<h1 class="md-title">History</h1> <div class="md-title">
</md-table-toolbar> <md-button href="/" class="md-icon-button md-primary">
<md-table-row slot="md-table-row" slot-scope="{item}"> <md-icon>home</md-icon>
<md-table-cell> </md-button>
(<a v-if="item.seq > 1" :href="'/diff.html?id=' + id + '&oldid=' + item.id + '&diff=' + lastid">cur</a><span v-if="item.seq == 1">cur</span> | <a :href="'/diff.html?id=' + id + '&diff=' + item.id">prev</a>) Diffido - ${schedule && schedule.title} history
<md-radio name="oldid" v-model="oldid" :value="item.id" v-if="item.seq > 1" :seq="item.seq"></md-radio><span id="placeholder" v-if="item.seq == 1"> ---- </span> </div>
<md-radio name="diff" v-model="diff" :value="item.id" :seq="item.seq"></md-radio> </md-card-header>
</md-table-cell>
<md-table-cell md-label="commit ID" md-sort-by="id">${ item.id }</md-table-cell> <md-card-content>
<md-table-cell md-label="message" md-sort-by="message">${ item.message }</md-table-cell> <md-table id="history-table" v-model="history">
<md-table-cell md-label="changes" md-sort-by="message">+${ item.insertions || 0 },-${ item.deletions || 0 }</md-table-cell> <md-table-toolbar>
</md-table-row> <h1 class="md-title">History</h1>
</md-table> </md-table-toolbar>
<md-table-row slot="md-table-row" slot-scope="{item}">
<md-table-cell>
(<a v-if="item.seq > 1" :href="'/diff.html?id=' + id + '&oldid=' + item.id + '&diff=' + lastid">cur</a><span v-if="item.seq == 1">cur</span> | <a :href="'/diff.html?id=' + id + '&diff=' + item.id">prev</a>)
<md-radio name="oldid" v-model="oldid" :value="item.id" v-if="item.seq > 1" :seq="item.seq"></md-radio><span id="placeholder" v-if="item.seq == 1"> ---- </span>
<md-radio name="diff" v-model="diff" :value="item.id" :seq="item.seq"></md-radio>
</md-table-cell>
<md-table-cell md-label="commit ID" md-sort-by="id">${ item.id }</md-table-cell>
<md-table-cell md-label="message" md-sort-by="message">${ item.message }</md-table-cell>
<md-table-cell md-label="changes" md-sort-by="message">+${ item.insertions || 0 },-${ item.deletions || 0 }</md-table-cell>
</md-table-row>
</md-table>
</md-card-content>
</md-card>
</div> </div>
</div> </div>
</div> </div>
@ -31,6 +44,7 @@ var app = new Vue({
el: '#app', el: '#app',
delimiters: ['${', '}'], delimiters: ['${', '}'],
data: { data: {
schedule: {},
history: [], history: [],
oldid: null, oldid: null,
diff: null, diff: null,
@ -48,8 +62,8 @@ var app = new Vue({
getHistory: function() { getHistory: function() {
self = this; self = this;
var data = axios.get('/api/history/' + this.id).then(function(response) { var data = axios.get('/api/history/' + this.id).then(function(response) {
console.log(response);
self.history = response.data.history; self.history = response.data.history;
self.schedule = response.data.schedule;
self.lastid = response.data.lastid; self.lastid = response.data.lastid;
}); });
} }
@ -61,12 +75,11 @@ var app = new Vue({
body { body {
background-color: white; background-color: white;
padding: 6px;
} }
.md-table { .md-table {
width: 60%; height: 80%;
min-height: 800px;
max-height: 800px;
} }
</style> </style>

9
dist/index.html vendored
View file

@ -7,6 +7,9 @@
<md-card id="main-card"> <md-card id="main-card">
<md-card-header> <md-card-header>
<div class="md-title"> <div class="md-title">
<md-button href="/" class="md-icon-button md-primary">
<md-icon>home</md-icon>
</md-button>
Diffido Diffido
<md-button href="/schedule.html" class="md-icon-button md-primary"> <md-button href="/schedule.html" class="md-icon-button md-primary">
<md-icon>add_circle_outline</md-icon> <md-icon>add_circle_outline</md-icon>
@ -20,7 +23,11 @@
<md-table-cell md-label="#" md-sort-by="id" md-numeric><a :href="'/schedule.html?id=' + item.id">${ item.id }</a></md-table-cell> <md-table-cell md-label="#" md-sort-by="id" md-numeric><a :href="'/schedule.html?id=' + item.id">${ item.id }</a></md-table-cell>
<md-table-cell md-label="title" md-sort-by="title"><a :href="'/schedule.html?id=' + item.id">${ item.title }</a></md-table-cell> <md-table-cell md-label="title" md-sort-by="title"><a :href="'/schedule.html?id=' + item.id">${ item.title }</a></md-table-cell>
<md-table-cell md-label="url" md-sort-by="email"><a :href="item.url" target="_new">${ item.url }</a></md-table-cell> <md-table-cell md-label="url" md-sort-by="email"><a :href="item.url" target="_new">${ item.url }</a></md-table-cell>
<md-table-cell md-label="history" md-sort-by="email"><a :href="'/history.html?id=' + item.id">history</a></md-table-cell> <md-table-cell md-label="history" md-sort-by="email">
<md-button :href="'/history.html?id=' + item.id" class="md-icon-button md-primary">
<md-icon>history</md-icon>
</md-button>
</md-table-cell>
</md-table-row> </md-table-row>
</md-table> </md-table>
</md-card-content> </md-card-content>

7
dist/schedule.html vendored
View file

@ -10,23 +10,22 @@
<md-button href="/" class="md-icon-button md-primary"> <md-button href="/" class="md-icon-button md-primary">
<md-icon>home</md-icon> <md-icon>home</md-icon>
</md-button> </md-button>
Schedule ${schedule && schedule.title} Diffido: ${(schedule && schedule.title) || 'new'} schedule
</div> </div>
</md-card-header> </md-card-header>
<md-card-content> <md-card-content>
<div class="md-layout md-gutter"> <div class="md-layout md-gutter">
<div class="md-layout-item"> <div class="md-layout-item">
<md-field> <md-field>
<label>title</label> <label>title</label>
<md-input v-model="schedule.title"></md-input> <md-input v-model="schedule.title" required></md-input>
</md-field> </md-field>
</div> </div>
<div class="md-layout-item"> <div class="md-layout-item">
<md-field> <md-field>
<label>url</label> <label>url</label>
<md-input v-model="schedule.url"></md-input> <md-input v-model="schedule.url" required></md-input>
</md-field> </md-field>
</div> </div>
</div> </div>