parent
9659f1bbd2
commit
f7ee5457ef
@ -0,0 +1,37 @@ |
||||
<!-- |
||||
// Copyright (c) 2022-2024 Niko Bonnieure, Par le Peuple, NextGraph.org developers |
||||
// All rights reserved. |
||||
// Licensed under the Apache License, Version 2.0 |
||||
// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0> |
||||
// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>, |
||||
// at your option. All files in the project carrying such |
||||
// notice may not be copied, modified, or distributed except |
||||
// according to those terms. |
||||
--> |
||||
|
||||
<script lang="ts"> |
||||
|
||||
export let pane_name = ""; |
||||
|
||||
const panes = { |
||||
"history": "History", |
||||
}; |
||||
|
||||
const load_pane = async (pane_name) => { |
||||
let component = await import(`./panes/${panes[pane_name]}.svelte`); |
||||
return component.default; |
||||
}; |
||||
|
||||
</script> |
||||
|
||||
<div> |
||||
|
||||
{#if pane_name} |
||||
{#await load_pane(pane_name) then pane} |
||||
<div class="flex w-full" style="overflow-wrap: anywhere;"> |
||||
<svelte:component this={pane}/> |
||||
</div> |
||||
{/await} |
||||
{/if} |
||||
|
||||
</div> |
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,155 @@ |
||||
<!-- |
||||
// Copyright (c) 2022-2024 Niko Bonnieure, Par le Peuple, NextGraph.org developers |
||||
// All rights reserved. |
||||
// Licensed under the Apache License, Version 2.0 |
||||
// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0> |
||||
// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>, |
||||
// at your option. All files in the project carrying such |
||||
// notice may not be copied, modified, or distributed except |
||||
// according to those terms. |
||||
--> |
||||
|
||||
<script lang="ts"> |
||||
import { |
||||
branch_subscribe, |
||||
active_session, |
||||
cannot_load_offline, |
||||
online, |
||||
get_blob |
||||
} from "../../store"; |
||||
import { get } from "svelte/store"; |
||||
import { onMount, onDestroy, tick } from "svelte"; |
||||
import { |
||||
Sun, |
||||
Cloud, |
||||
DocumentPlus, |
||||
DocumentMinus, |
||||
CircleStack, |
||||
Funnel, |
||||
FingerPrint, |
||||
Key, |
||||
Cog, |
||||
Icon, |
||||
ShieldCheck, |
||||
} from "svelte-heros-v2"; |
||||
import BranchIcon from "../components/BranchIcon.svelte"; |
||||
|
||||
import { t } from "svelte-i18n"; |
||||
import { Button, Progressbar, Spinner, Alert } from "flowbite-svelte"; |
||||
import { cur_tab, nav_bar, can_have_header, header_icon, header_title, header_description, cur_branch, set_header_in_view, edit_header_button, cur_app, load_official_app } from "../../tab"; |
||||
import ng from "../../api"; |
||||
|
||||
import { |
||||
createGitgraph, |
||||
templateExtend, |
||||
TemplateName, |
||||
} from "./history/gitgraph-js/gitgraph"; |
||||
|
||||
let gitgraph; |
||||
let history = []; |
||||
let unsub = () => {}; |
||||
|
||||
onMount(async ()=>{ |
||||
const graphContainer = document.getElementById("graph-container"); |
||||
gitgraph = createGitgraph(graphContainer, { |
||||
template: templateExtend(TemplateName.Metro, { |
||||
branch: { label: { display: false } }, |
||||
commit: { message: { displayAuthor: false, displayHash: false } }, |
||||
}), |
||||
}); |
||||
let res = await ng.branch_history($active_session.session_id, "did:ng:"+$cur_tab.branch.nuri); |
||||
// for (const h of res.history) { |
||||
// console.log(h[0], h[1]); |
||||
// } |
||||
//console.log(res.swimlane_state); |
||||
history = [...res.history].reverse(); |
||||
|
||||
gitgraph.swimlanes(res.swimlane_state.map((s)=> s || false)); |
||||
gitgraph.import(res.history.map((h)=>{return { |
||||
hash:h[0], |
||||
branch:h[1].branch, |
||||
author:h[1].author, |
||||
parents:h[1].past, |
||||
x:h[1].x, |
||||
y:h[1].y, |
||||
subject:h[1].timestamp, |
||||
onClick:()=>openCommit(h[0]), |
||||
onMessageClick:()=>openCommit(h[0]) |
||||
};})); |
||||
|
||||
let branch = branch_subscribe($cur_tab.branch.nuri,false); |
||||
unsub = branch.subscribe((b) => { |
||||
//console.log("subscription callbak",b.history.commits); |
||||
if (Array.isArray(b.history.commits)) { |
||||
for (var h; h = b.history.commits.pop(); ) { |
||||
//console.log(h); |
||||
history.unshift(h); |
||||
history = history; |
||||
gitgraph.commit({ |
||||
hash: h[0], |
||||
author:h[1].author, |
||||
parents:h[1].past, |
||||
subject:h[1].timestamp, |
||||
onClick:()=>openCommit(h[0]), |
||||
onMessageClick:()=>openCommit(h[0]) |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
get(branch).history.start(); |
||||
}); |
||||
|
||||
onDestroy( ()=>{ |
||||
let branch = branch_subscribe($cur_tab.branch.nuri,false); |
||||
get(branch).history.stop(); |
||||
unsub(); |
||||
}); |
||||
|
||||
const openCommit = (id:string) => { |
||||
console.log("open commit",id); |
||||
} |
||||
|
||||
const commit_type_icons = { |
||||
"TransactionGraph": Sun, |
||||
"TransactionDiscrete": Cloud, |
||||
"TransactionBoth": Sun, |
||||
"FileAdd": DocumentPlus, |
||||
"FileRemove": DocumentMinus, |
||||
"Snapshot": CircleStack, |
||||
"Compact": Funnel, |
||||
"AsyncSignature": FingerPrint, |
||||
"SyncSignature": FingerPrint, |
||||
"Branch": BranchIcon, |
||||
"UpdateBranch": BranchIcon, |
||||
"BranchCapRefresh": Key, |
||||
"CapRefreshed": Key, |
||||
"Other": Cog, |
||||
}; |
||||
|
||||
</script> |
||||
|
||||
<div style="width:120px; min-width:120px;font-family: monospace; font: Courier; font-size:16px;"> |
||||
|
||||
{#each history as commit} |
||||
|
||||
<div class="w-full commit relative text-gray-500" style="height:60px;" role="button" title={commit[0]} tabindex=0 on:click={()=>openCommit(commit[0])} on:keypress={()=>openCommit(commit[0])}> |
||||
{#if commit[1].final_consistency}<ShieldCheck tabindex="-1" class="w-5 h-5 absolute text-primary-600" style="top:9px;right:20px;" /> |
||||
{:else if commit[1].signature}<ShieldCheck tabindex="-1" class="w-5 h-5 absolute text-green-600" style="top:9px;right:20px;" /> |
||||
{/if} |
||||
<Icon tabindex="-1" class="w-5 h-5 outline-none absolute " style="top:9px;right:0px;" variation="outline" color="currentColor" icon={commit_type_icons[commit[1].commit_type]} /> |
||||
{#if commit[1].commit_type==="TransactionBoth"}<Cloud tabindex="-1" class="w-5 h-5 absolute " style="top:28px;right:0px;" />{/if} |
||||
<b>{commit[0].substring(0,7)}</b><br/> |
||||
<span class="text-xs leading-tight">{commit[1].author.substring(0,9)}</span> |
||||
</div> |
||||
|
||||
{/each} |
||||
|
||||
</div> |
||||
|
||||
<div style="cursor:pointer;" id="graph-container"></div> |
||||
|
||||
<style> |
||||
.commit { |
||||
padding: 8px; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue