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

Web application for Visualizing Scientific and Medical datasets

<v-card flat>
  <v-card-title>
    <span class="body-2">Enter your raw data specs below:</span>
  </v-card-title>
  <v-card-text>
    <v-container grid-list-xs class="pa-0">
      <v-layout row align-center>
        <v-flex xs3 class="body-2">Filename:</v-flex>
        <v-flex xs9 class="body-1">{{ file.name }}</v-flex>
      </v-layout>
      <v-layout row align-center>
        <v-flex xs3 class="body-2">File size:</v-flex>
        <v-flex xs9 class="body-1">{{ file.size }} bytes</v-flex>
      </v-layout>
      <v-layout row align-center>
        <v-flex xs3 class="body-2">Data type:</v-flex>
        <v-flex xs9 class="body-1">
          <v-select
            :items="allDataTypes"
            v-model="dataType"
            item-text="label"
            item-value="label"
            single-line
            return-object
          />
        </v-flex>
      </v-layout>
      <v-layout row align-center>
        <v-flex xs3 class="body-2">Dimensions:</v-flex>
        <v-flex
          v-for="i in 3"
          :key="i"
          xs3
          class="body-1"
        >
          <v-text-field
            type="number"
            min="1"
            :max="file.size"
            v-model="dimensions[i-1]"
          />
        </v-flex>
      </v-layout>
      <v-layout row align-center>
        <v-flex xs3 class="body-2">Spacing:</v-flex>
        <v-flex
          v-for="i in 3"
          :key="i"
          xs3
          class="body-1"
        >
          <v-text-field
            type="number"
            min="1"
            :max="file.size"
            v-model="spacing[i-1]"
          />
        </v-flex>
      </v-layout>
      <v-layout row align-center>
        <v-flex xs3>Effective size:</v-flex>
        <v-flex xs3>{{ effectiveSize }}</v-flex>
        <v-flex xs6>
          <span
            v-if="effectiveSize !== file.size"
            class="red--text"
          >
            Effective size does not match total size!
          </span>
          <span v-else class="teal--text">Effective size matches file size</span>
        </v-flex>
      </v-layout>
    </v-container>
  </v-card-text>
</v-card>