UI.ts 5.51 KB
Newer Older
Jacob Durrant's avatar
Jacob Durrant committed
1
2
3
4
5
// This file is part of Webina, released under the Apache 2.0 License. See
// LICENSE.md or go to https://opensource.org/licenses/Apache-2.0 for full
// details. Copyright 2019 Jacob D. Durrant.


Jacob Durrant's avatar
Jacob Durrant committed
6
import * as Store from "../Vue/Store";
7
import * as Utils from "../Utils";
8
import { VERSION } from "../Version";
Jacob Durrant's avatar
Jacob Durrant committed
9
10
11

declare var Vue;

Jacob Durrant's avatar
Jacob Durrant committed
12
13
14
15
/**
 * Setup the main Vue app.
 * @returns void
 */
Jacob Durrant's avatar
Jacob Durrant committed
16
17
18
19
20
21
22
23
export function setup(): void {
    new Vue({
        "el": '#app',
        "store": Store.store,
        "template": `
            <div class="container-fluid">
                <open-modal></open-modal>
                <div id="no-mobile">
24
25
                    <b-jumbotron class="jumbo" header="Webina ${VERSION}" lead="AutoDock Vina Ported to WebAssembly">
                        <p>Webina ${VERSION} is not designed to work on mobile phones. Please use a device with a larger screen.</p>
Jacob Durrant's avatar
Jacob Durrant committed
26
27
28
                    </b-jumbotron>
                </div>

29
30
                <b-jumbotron class="jumbo" style="background-image:url(${Utils.curPath()}webina_logo.jpg);" header="Webina ${VERSION}" lead="AutoDock Vina Ported to WebAssembly">
                    <p>Brought to you by the <a target="_blank" href="http://durrantlab.com">Durrant Lab</a>.</p>
Jacob Durrant's avatar
Jacob Durrant committed
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
                    <b-button variant="primary" target="_blank" href="http://durrantlab.com">More Info</b-button>
                </b-jumbotron>

                <b-card no-body class="mb-3">
                    <b-tabs v-model="tabIdx" card fill pills vertical content-class="mt-3"> <!-- vertical -->
                        <b-tab title="Input Parameters" active :disabled="parametersTabDisabled">
                            <b-card-text>
                                <vina-params></vina-params>
                            </b-card-text>
                        </b-tab>
                        <b-tab title="Existing Vina Output" :disabled="existingVinaOutputTabDisabled">
                            <b-card-text>
                                <vina-existing-output></vina-existing-output>
                            </b-card-text>
                        </b-tab>
                        <b-tab title="Running Webina" :disabled="runningTabDisabled">
                            <b-card-text>
                                <vina-running></vina-running>
                            </b-card-text>
                        </b-tab>
                        <b-tab title="Output" :disabled="outputTabDisabled">
                            <b-card-text>
                                <vina-output></vina-output>
                            </b-card-text>
                        </b-tab>
                        <b-tab title="Start Over" :disabled="startOverTabDisabled">
                            <b-card-text>
                                <start-over></start-over>
                            </b-card-text>
                        </b-tab>
                    </b-tabs>
                </b-card>
            </div>
        `,
Jacob Durrant's avatar
Jacob Durrant committed
65
66
67
68
69

        /**
         * Get the data associated with this component.
         * @returns any  The data.
         */
Jacob Durrant's avatar
Jacob Durrant committed
70
71
72
73
74
75
76
77
        "data"() {
            return {
                "receptorFile": false,
                "ligandFile": false
            }
        },
        "computed": {
            "tabIdx": {
Jacob Durrant's avatar
Jacob Durrant committed
78
79
80
81
82
                /**
                 * Get the tabIdx.
                 * @returns number
                 */
                get(): number {
Jacob Durrant's avatar
Jacob Durrant committed
83
84
                    return this.$store.state["tabIdx"];
                },
Jacob Durrant's avatar
Jacob Durrant committed
85
86
87
88
89
90
91

                /**
                 * Set the tabIdx value.
                 * @param  {number} val  The new value.
                 * @returns void
                 */
                set(val: number): void {
Jacob Durrant's avatar
Jacob Durrant committed
92
93
94
95
96
97
                    this.$store.commit("setVar", {
                        name: "tabIdx",
                        val: val
                    });
                }
            },
Jacob Durrant's avatar
Jacob Durrant committed
98
99
100
101
102

            /**
             * Determine whether the parameters tab is disabled.
             * @returns boolean  True if it is disabled, false otherwise.
             */
Jacob Durrant's avatar
Jacob Durrant committed
103
104
105
            "parametersTabDisabled"(): boolean {
                return this.$store.state["parametersTabDisabled"];
            },
Jacob Durrant's avatar
Jacob Durrant committed
106
107
108
109
110

            /**
             * Determine whether the running tab is disabled.
             * @returns boolean  True if it is disabled, false otherwise.
             */
Jacob Durrant's avatar
Jacob Durrant committed
111
112
113
            "runningTabDisabled"(): boolean {
                return this.$store.state["runningTabDisabled"];
            },
Jacob Durrant's avatar
Jacob Durrant committed
114
115
116
117
118

            /**
             * Determine whether the output tab is disabled.
             * @returns boolean  True if it is disabled, false otherwise.
             */
Jacob Durrant's avatar
Jacob Durrant committed
119
120
121
            "outputTabDisabled"(): boolean {
                return this.$store.state["outputTabDisabled"];
            },
Jacob Durrant's avatar
Jacob Durrant committed
122
123
124
125
126

            /**
             * Determine whether the existing vina output tab is disabled.
             * @returns boolean  True if it is disabled, false otherwise.
             */
Jacob Durrant's avatar
Jacob Durrant committed
127
128
129
            "existingVinaOutputTabDisabled"(): boolean {
                return this.$store.state["existingVinaOutputTabDisabled"];
            },
Jacob Durrant's avatar
Jacob Durrant committed
130
131
132
133
134

            /**
             * Determine whether the start over tab is disabled.
             * @returns boolean  True if it is disabled, false otherwise.
             */
Jacob Durrant's avatar
Jacob Durrant committed
135
136
137
138
139
140
            "startOverTabDisabled"(): boolean {
                return this.$store.state["startOverTabDisabled"];
            }
        },

        "methods": {},
141

Jacob Durrant's avatar
Jacob Durrant committed
142
143
144
145
146
147
        /**
         * Runs when the vue component is mounted.
         * @returns void
         */
        "mounted"() {
            // window["$store"] = this.$store;  // For debugging
Jacob Durrant's avatar
Jacob Durrant committed
148
149
150
        }
    })
}