misp-modules/website/app/templates/history_session.html

151 lines
6.0 KiB
HTML

<!--
Author: David Cruciani
-->
{% extends 'base.html' %}
{% block content %}
<input hidden value="{{tree_view}}" id="tree_view">
<h1 id="top">History</h1>
<small v-if="!tree_view"><i>All histories present here will be delete at the end of the session</i></small>
<hr>
<template v-if="Object.keys(history).length">
<div v-for="his, key in history" style="background-color: white; border: 1px solid #808080a1; border-radius: 8px; padding: 10px; margin-top: 17px;">
<div class="d-flex w-100 justify-content-between">
<h4># [[key + 1]]</h4>
<button v-if="!tree_view" class="btn btn-primary btn-sm" @click="save_history(his)">Save</button>
</div>
<hr>
<div style="display: flex;">
<a style="padding: 10px; font-size: large; color: black;" v-if="'children' in his && his['children'].length" data-bs-toggle="collapse" :href="'#collapseChild-'+his.uuid" aria-expanded="true" :aria-controls="'collapseChild-'+his.uuid">
<i class="fa-solid fa-caret-down"></i>
</a>
<a style="text-decoration: none; color: black;" data-bs-toggle="collapse" :href="'#collapse'+his.uuid" role="button" aria-expanded="false" :aria-controls="'collapse'+his.uuid">
<ul class="list-group list-group-horizontal">
<li class="list-group-item">
<h4>[[his.query]]</h4>
</li>
<li class="list-group-item">
<h5 style="color: brown"><u>Input Attributes</u></h5>
[[his.input]]
</li>
<li class="list-group-item">
<h5 style="color: brown"><u>Modules</u></h5>
<template v-for="module in his.modules">[[module]],</template>
</li>
</ul>
</a>
</div>
<div>
<div class="collapse" :id="'collapse'+his.uuid" style="width: 70%; margin-left:30px">
<div class="card card-body">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">[[his.query]]</h5>
<small><i>[[his.uuid]]</i></small>
</div>
<p class="mb-1" style="color: green;"><u>Input Attribute</u>:</p>
<div>[[his.input]]</div>
<br>
<p class="mb-1" style="color: #2000ff;"><u>Modules</u>:</p>
<div>
<template v-for="module in his.modules">[[module]],</template>
</div>
<div></div>
<div class="d-flex w-100 justify-content-between">
<div><a :href="'/query/'+his.uuid">See results</a></div>
<small><i>[[his.query_date]]</i></small>
</div>
</div>
</div>
<div class="collapse show" :id="'collapseChild-'+his.uuid">
<ul style="list-style-type: none;">
<li>
<div class="card-body">
<template v-for="h, key_loop in his['children']">
<history_view :history="h" :key_loop="key_loop" :tree_view="tree_view" @delete_node="(msg) => change_tree(his, key)"/>
</template>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<div v-else>
<i>No History</i>
</div>
<span id="goTop">[<a href="#top">Go Back Top</a>]</span>
{% endblock %}
{% block script %}
<script type="module">
const { createApp, ref, onMounted, nextTick, defineComponent} = Vue
import {display_toast, message_list} from '/static/js/toaster.js'
import history_view from '/static/js/history_view.js'
createApp({
delimiters: ['[[', ']]'],
components: {
history_view
},
setup() {
const history = ref({})
const tree_view = ref(false)
async function get_history_session(){
let res = await fetch("/get_history_session")
let loc = await res.json()
history.value = loc
}
async function get_history_tree(){
let res = await fetch("/get_history_tree")
let loc = await res.json()
history.value = loc
}
async function save_history(history){
const res = await fetch("/save_history/" + history.uuid)
display_toast(res)
}
async function change_tree(history_loc, key){
if(!tree_view){
const res = await fetch("/get_history_session/"+history_loc.uuid)
let loc = await res.json()
history.value[key] = loc
}else{
const res = await fetch("/get_history_tree/"+history_loc.uuid)
let loc = await res.json()
history.value[key] = loc
}
}
onMounted(() => {
tree_view.value = $("#tree_view").val()
if(tree_view.value == "True"){
get_history_tree()
tree_view.value = true
}
else{
tree_view.value = false
get_history_session()
}
})
return {
message_list,
history,
tree_view,
save_history,
change_tree
}
}
}).mount('.container')
</script>
{% endblock %}