paraview-glance/src/components/core/FileLoader/template.html

Web application for Visualizing Scientific and Medical datasets

<v-dialog
  width="70%"
  :value="value"
  :persistent="loading"
  :fullscreen="$vuetify.breakpoint.smAndDown"
  @input="onDialogChange"
  @click:outside="!loading && close()"
>
  <v-card>
    <v-card-text class="pa-0">
      <v-card flat>
        <v-card-text>
          <v-container>
            <v-tabs v-model="active_tab">
              <v-tab>Local</v-tab>
              <v-tab>Girder</v-tab>
              <v-tab-item transition="fade-transition">
                <drag-and-drop
                  enabled
                  @drop="openFiles($event)"
                >
                  <template v-slot:default="{ dragHover }">
                    <v-row
                      @click="promptLocal"
                      align="center"
                      class="pa-3"
                      :class="{
                        [$style.dragBox]: true,
                        [$style.dropTarget]: dragHover,
                        }"
                    >
                      <v-btn>browse</v-btn>
                      <span class="ml-2">
                        or drop your files here
                      </span>
                    </v-row>
                  </template>
                </drag-and-drop>
              </v-tab-item>
              <v-tab-item transition="fade-transition">
                <girder-box />     
              </v-tab-item>
            </v-tabs>
            <v-row class="mt-2">
              <v-expansion-panels accordion>
                <v-expansion-panel
                  v-for="(fileInfo, revIdx) in fileList"
                  :key="revIdx"
                  >
                  <v-expansion-panel-header disable-icon-rotate>
                    <template v-slot:actions>
                      <div class="d-flex flex-row align-center">
                        <template v-if="fileInfo.state === 'ready'">
                          <v-icon color="teal">mdi-check</v-icon>
                        </template>
                        <template v-else-if="fileInfo.state === 'error'">
                          <v-icon color="error">mdi-alert</v-icon>
                        </template>
                        <template v-else-if="fileInfo.state === 'needsInfo'">
                          <v-icon color="blue">mdi-information</v-icon>
                        </template>
                        <template v-else-if="fileInfo.state === 'loading' ||
                                             fileInfo.state === 'needsDownload'">
                          <v-progress-circular indeterminate color="secondary" size="16" width="2" />
                        </template>
                        <v-btn icon class="ml-3">
                          <v-icon @click.stop="deleteFileAtRevIndex(revIdx)">mdi-delete</v-icon>
                        </v-btn>
                      </div>
                    </template>
                    <template v-slot:default="{ open }">
                      <!-- width hack to keep row from pushing out header actions -->
                      <v-row no-gutters style="width: 80%">
                        <v-col cols="8">{{ fileInfo.name }}</v-col>
                        <v-col cols="4" class="text--secondary pr-3 text-right">
                          <span v-if="fileInfo.state === 'error'">
                            Click to see error
                          </span>
                          <span v-else-if="fileInfo.ext === 'raw'">
                            Click to edit raw file info
                          </span>
                          <span v-else-if="fileInfo.ext === 'glance'">
                            State file will be loaded first
                          </span>
                        </v-col>
                      </v-row>
                    </template>
                  </v-expansion-panel-header>
                  <v-expansion-panel-content>
                    <template v-if="fileInfo.state === 'error'">
                      {{ fileInfo.error }}
                    </template>
                    <template v-else-if="fileInfo.ext === 'raw'">
                      <raw-file-reader
                        :file="fileInfo.files[0]"
                        v-on:change="setRawFileInfoAtRevIndex(revIdx, $event)"
                      />
                    </template>
                  </v-expansion-panel-content>
                </v-expansion-panel>
              </v-expansion-panels>
            </v-row>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <span v-if="anyErrors" class="red--text mr-3">Only checked files will be loaded.</span>
          <v-btn
            text
            :disabled="loading"
            @click="close"
          >
            Cancel
          </v-btn>
          <v-btn
            color="primary"
            :disabled="loading || pendingFiles || !hasReadyFiles"
            @click="loadFiles"
          >
            {{ loading ? 'Loading...' : 'Load' }}
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-card-text>
  </v-card>
</v-dialog>