Home Explore Help
Register Sign In
alberanid
/
diffido
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

improve history and diff page style

Davide Alberani 6 years ago
parent
59633c56eb
commit
eae571d5a9
6 changed files with 71 additions and 33 deletions
Split View Show Diff Stats
  1. 4 3
      diffido.py
  2. 2 0
      dist/base.html
  3. 22 6
      dist/diff.html
  4. 32 19
      dist/history.html
  5. 8 1
      dist/index.html
  6. 3 4
      dist/schedule.html

+ 4 - 3
diffido.py
View File 

@@ -209,11 +209,11 @@ def get_history(id_):
 
         lastid = history[0]['id']
 
     for idx, item in enumerate(history):
 
         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):
 
-    logger.warn('MEHHHH %s  %s  %s' % (id_, commit_id, old_commit_id))
 
     def _history(id_, commit_id, old_commit_id, queue):
 
         os.chdir('storage/%s' % 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()
 
     res = queue.get().decode('utf-8')
 
     p.join()
 
-    return {'diff': res}
 
+    schedule = get_schedule(id_)
 
+    return {'diff': res, 'schedule': schedule}
 
 
 
 def scheduler_update(scheduler, id_):

+ 2 - 0
dist/base.html
View File 

@@ -7,11 +7,13 @@
 
         <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/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/vue.js"></script>
 
         <script src="/static/js/vue-material.min.js"></script>
 
         <script src="/static/js/axios.min.js"></script>
 
         <script src="/static/js/diff2html.js"></script>
 
+        <script type="text/javascript" src="/static/js/diff2html-ui.min.js"></script>
 
     </head>
 
     <body>
 
         {% block body %}{% end %}

+ 22 - 6
dist/diff.html
View File 

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

+ 32 - 19
dist/history.html
View File 

@@ -4,21 +4,34 @@
 
 <div id="app">
 
     <div class="md-layout">
 
         <div class="md-layout-item" md-card>
 
-            <md-table id="history-table" v-model="history">
 
-                <md-table-toolbar>
 
-                    <h1 class="md-title">History</h1>
 
-                </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 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} history
 
+                    </div>
 
+                </md-card-header>
 
+                
+                <md-card-content>
 
+                    <md-table id="history-table" v-model="history">
 
+                        <md-table-toolbar>
 
+                            <h1 class="md-title">History</h1>
 
+                        </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>
 
@@ -31,6 +44,7 @@ var app = new Vue({
 
     el: '#app',
 
     delimiters: ['${', '}'],
 
     data: {
 
+        schedule: {},
 
         history: [],
 
         oldid: null,
 
         diff: null,
 
@@ -48,8 +62,8 @@ var app = new Vue({
 
         getHistory: function() {
 
             self = this;
 
             var data = axios.get('/api/history/' + this.id).then(function(response) {
 
-                console.log(response);
 
                 self.history = response.data.history;
 
+                self.schedule = response.data.schedule;
 
                 self.lastid = response.data.lastid;
 
             });
 
         }
 
@@ -61,12 +75,11 @@ var app = new Vue({
 
 
 body {
 
     background-color: white;
 
+    padding: 6px;
 
 }
 
 
 .md-table {
 
-    width: 60%;
 
-    min-height: 800px;
 
-    max-height: 800px;
 
+    height: 80%;
 
 }
 
 
 </style>

+ 8 - 1
dist/index.html
View File 

@@ -7,6 +7,9 @@
 
             <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
 
                         <md-button href="/schedule.html" class="md-icon-button md-primary">
 
                             <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="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="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>
 
                 </md-card-content>

+ 3 - 4
dist/schedule.html
View File 

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