misp-modules/website/app/templates/history_session.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>
                            [[his.modules.join(", ")]]
                        </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>
                            [[his.modules.join(", ")]]
                        </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/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-fluid')

</script>
{% endblock %}