|
|
@@ -1,81 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
|
-<head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <title>代码变更</title>
|
|
|
- <link rel="stylesheet" th:href="@{../../lib/element-ui/lib/theme-chalk/index.css}">
|
|
|
- <link rel="stylesheet" th:href="@{../../css/index.css}">
|
|
|
-</head>
|
|
|
-<body>
|
|
|
- <el-container>
|
|
|
- <el-header>
|
|
|
- <div id="viewType">
|
|
|
- <!--<input type="radio" name="_viewtype" id="sidebyside" onclick="diffUsingJS(0);" /> <label for="sidebyside">Side by Side Diff</label>-->
|
|
|
- <!-- -->
|
|
|
- <!--<input type="radio" name="_viewtype" id="inline" onclick="diffUsingJS(1);" /> <label for="inline">Inline Diff</label>-->
|
|
|
- <template>
|
|
|
- <el-radio v-model="radio" label="0" onclick="diffUsingJS(0);">Side by Side Diff</el-radio>
|
|
|
- <el-radio v-model="radio" label="1" onclick="diffUsingJS(1);">Inline Diff</el-radio>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </el-header>
|
|
|
- <el-main>
|
|
|
- <div id="diffoutput"></div>
|
|
|
- </el-main>
|
|
|
- </el-container>
|
|
|
-</body>
|
|
|
-
|
|
|
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsdiff/4.0.2/diff.min.js"></script>
|
|
|
-<script type="text/javascript" src="http://cemerick.github.io/jsdifflib/difflib.js"></script>
|
|
|
-<script type="text/javascript" src="http://cemerick.github.io/jsdifflib/diffview.js"></script>
|
|
|
-<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
|
|
|
-<script type="text/javascript" th:src="@{../../lib/vue/vue.js}"></script>
|
|
|
-<script type="text/javascript" th:src="@{../../lib/vue/vue-resource.js}"></script>
|
|
|
-<script type="text/javascript" th:src="@{../../lib/element-ui/lib/index.js}"></script>
|
|
|
-<script type="text/javascript">
|
|
|
- Vue.http.options.emulateJSON = true;
|
|
|
-
|
|
|
- my_vue = new Vue({
|
|
|
- el: "#viewType",
|
|
|
-
|
|
|
- data: {
|
|
|
- radio: 0
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- function diffUsingJS(mode) {
|
|
|
- d3.json("/visual/commit_diff?firstId=1&secondId=2", function(error, pair) {
|
|
|
- // get the baseText and newText values from the two textboxes, and split them into lines
|
|
|
- var base = difflib.stringAsLines(pair.first);
|
|
|
- var newtxt = difflib.stringAsLines(pair.second);
|
|
|
-
|
|
|
- // create a SequenceMatcher instance that diffs the two sets of lines
|
|
|
- var sm = new difflib.SequenceMatcher(base, newtxt);
|
|
|
-
|
|
|
- // get the opcodes from the SequenceMatcher instance
|
|
|
- // opcodes is a list of 3-tuples describing what changes should be made to the base text
|
|
|
- // in order to yield the new text
|
|
|
- var opcodes = sm.get_opcodes();
|
|
|
- var diffoutputdiv = document.getElementById("diffoutput"); //var diffoutputdiv = $("diffoutput");
|
|
|
- while (diffoutputdiv.firstChild)
|
|
|
- diffoutputdiv.removeChild(diffoutputdiv.firstChild);
|
|
|
- contextSize = null; // null for now
|
|
|
-
|
|
|
- // build the diff view and add it to the current DOM
|
|
|
- diffoutputdiv.appendChild(diffview.buildView({
|
|
|
- baseTextLines: base,
|
|
|
- newTextLines: newtxt,
|
|
|
- opcodes: opcodes,
|
|
|
- // set the display titles for each resource
|
|
|
- baseTextName: "Base Text",
|
|
|
- newTextName: "New Text",
|
|
|
- contextSize: contextSize,
|
|
|
- viewType: mode // 0 for 'side-by-side', 1 for 'inline' mode
|
|
|
- }));
|
|
|
-
|
|
|
- // scroll down to the diff view window.
|
|
|
- //location = url + "#diff";
|
|
|
- });
|
|
|
- }
|
|
|
-</script>
|
|
|
-</html>
|
Muzhi Miao