source: main/trunk/model-interfaces-dev/atea/macron-restoration/src/App.vue@ 35724

<template>
<div class="root">
    <div class="app-bar theme-primary">
        <div class="app-bar-content">
            <span class="heading1">{{ translations.get("Title") }}</span>
        </div>
    </div>

    <div class="paper content">
        <tab-bar :tabs="tabs" v-model="selectedTab" />
        <hr class="divider" />

        <div class="inner-content" v-if="selectedTab === 'direct'">
            <direct-input />
        </div>
        <div class="inner-content" v-if="selectedTab === 'file'">
            <file-input />
        </div>
    </div>

    <div class="footer">
        <img src="img/logo_waikato_uni.jpg" alt="The University of Waikato Logo" />

        <div>
            This service was funded by <a href="http://www.maramatanga.co.nz" target="_blank">Ngā Pae O Te Māramatanga</a> as
            part of the research related to the digitalization of the Pei Jones collection,
            and was developed at the <a href="https://www.waikato.ac.nz" target="_blank">University of Waikato</a>.
        </div>
        <img src="img/logo_nga_pae_o_te_maramatanga.jpg" alt="The Ngā Pae o te Māramatanga Logo" />
        <div>
            This website collects simple usage logs which will be used for development purposes only.
            No details which could be used to identify individuals will be collected and the data will be kept secure at the University of Waikato.
            If you do not wish for your activity to be included, click <a href="mailto:[email protected]">here</a> to notify Dr. Te Taka Keegan.
            Copyright &copy; 2014 University of Waikato
        </div>
    </div>
</div>
</template>

<style lang="scss">
html, body, #app {
    height: 100%;
}

.root {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.app-bar {
    display: flex;
    flex-direction: column;
    gap: 1em;

    background-color: var(--bg-color);
    color: var(--fg-color);
    box-shadow: 0px 0px 4px 3px #6d6d6d;

    padding: 1em;
    margin-bottom: 1em;
}

.app-bar-content {
    display: flex;
    align-items: center;
    gap: 1em;

    width: 100%;

    & :first-child {
        flex-grow: 1;
    }
}

.content {
    padding: 0;
    margin: 1em;
    flex-grow: 1;
}

.inner-content {
    padding: 1em;
}

.footer {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1em;

    box-shadow: 0px 0px 3px 2px #8a8a8a;
    padding: 1em;
    background-color: var(--paper-color);

    img {
        grid-column: 1;
        height: 48px;
    }

    div {
        grid-column: 2;
    }
}

.funding {
    display: flex;
    gap: 1em;
    align-items: center;
}
</style>

<script>
import { mapState } from "vuex";
import DirectInput from "./components/DirectInput.vue"
import FileInput from "./components/FileInput.vue"
import TabBar from "./components/TabBar.vue"

export default {
    name: "App",
    components: {
        DirectInput,
        FileInput,
        TabBar
    },
    data() {
        return {
            selectedTab: "direct"
        }
    },
    computed: {
        tabs() {
            return [
                { label: this.translations.get("DirectInput"), value: "direct" },
                { label: this.translations.get("FileInput"), value: "file" }
            ]
        },
        ...mapState({
            translations: state => state.translations
        })
    }
}
</script>