Changeset 64249d6 in uz


Ignore:
Timestamp:
2022.10.05 19:45:19 (2 years ago)
Author:
js29a <js29a@…>
Branches:
master
Children:
d45005e
Parents:
4b96189
Message:

UZ upgrade

Files:
1 added
3 edited

Legend:

Unmodified
Added
Removed

  • README.md

    r4b96189 r64249d6  
    44more info at: https://pub.js29a.info.pl/pub/wiki/UZ
    55
     6demo: https://vite.js29a.usermd.net/#/0

  • src/UploadTest.vue

    r4b96189 r64249d6  
    1212const max_jobs = ref(3)
    1313
     14const can_reset = ref(false)
     15const can_start = ref(false)
     16const can_pick = ref(false)
     17const can_abort = ref(false)
     18
    1419const reset = (): void => {
    1520  (inst as any).refs.uploader.reset()
    … …  
    2025}
    2126
     27const pick = (): void => {
     28  (inst as any).refs.uploader.pick()
     29}
     30
     31const abort = (): void => {
     32  (inst as any).refs.uploader.abort()
     33}
     34
    2235</script>
    2336
    2437<template>
    25   <component class='uploader' :is='UploadZone' target='https://vite.js29a.usermd.net/upload.php'
    26              :max-jobs='max_jobs' :auto-start='auto_start' :auto-reset='auto_reset'
    27              :keep-going='keep_going' ref='uploader'>
    28     <template #idle='{ pick }'>
    29       <div class='idle'>
    30         idle
    31         <br />
    32         <button @click='pick()'>pick</button>
    33       </div>
    34     </template>
    35 
    36     <template #hover>
    37       <div class='hover'>
    38         hover
    39       </div>
    40     </template>
    41 
    42     <template #wait='{ start, queue }'>
    43       <div class='wait'>
    44         wait
    45         <br />
    46         <button @click='pick()'>pick</button>
    47         <br />
    48         <button @click='start()'>start</button>
    49         <br/>
    50         <div v-for='file in queue'>{{ file.name }}</div>
    51       </div>
    52     </template>
    53 
    54     <template #uploading='{ progress, current, queue, abort, errors }'>
    55       <div class='uploading'>
    56         uploading
    57         <br />
    58         <button @click='abort()'>abort</button>
    59         <br />
    60         {{ progress.length }} / {{ current.length }} / {{ queue.length }}
    61         <br />
    62         <button @click='abort()'>abort</button>
    63         <b>errors:</b> <span v-for='error in errors'>{{ error.file.name }}</span>
    64         <b>progress:</b> <div v-for='item in progress'>{{ item }}</div>
    65         <b>current:</b>
    66         <div v-for='item in current'>
    67           {{ item.file.name }}: {{ item.current }} of {{ item.total }}
    68         </div>
    69         <b>remaining:</b>
    70         <div v-for='file in queue'>{{ file.name }}</div>
    71       </div>
    72     </template>
    73 
    74     <template #done='{ result, reset }'>
    75       <div class='done'>
    76         done
    77         <br />
    78         <button @click='reset()'>reset</button>
    79         <br />
    80         <div v-for='item in result'>{{ item }}</div>
    81       </div>
    82     </template>
    83 
    84     <template #error='{ error, reset }'>
    85       <div class='error'>
    86         error
    87         <br />
    88         <button @click='reset()'>reset</button>
    89         <div>{{ error }}</div>
    90       </div>
    91     </template>
    92 
    93     <template #aborted='{ result, reset }'>
    94       <div class='aborted'>
    95         aborted
    96         <br />
    97         <button @click='reset()'>reset</button>
    98         <div v-for='item in result'>{{ item }}</div>
    99       </div>
    100     </template>
    101 
    102     <template #with-errors='{ result, errors }'>
    103       <div class='with-errors'>
    104         with errors
    105         <br />
    106         <b>errors(s):</b>
    107         <div v-for='item in errors'>{{ item.file.name }} / {{ item.error }}</div>
    108         <b>ok:</b>
    109         <div v-for='item in result'>{{ item }}</div>
    110       </div>
    111     </template>
    112   </component>
     38  <div class='over'>
     39    <button @click='pick' :disabled='!can_pick'>pick</button>
     40    <span>&nbsp;</span>
     41    <button @click='start' :disabled='!can_start'>start</button>
     42    <span>&nbsp;</span>
     43    <button @click='abort' :disabled='!can_abort'>abort</button>
     44    <span>&nbsp;</span>
     45    <button @click='reset' :disabled='!can_reset'>reset</button>
     46    <p />
     47    <input type='checkbox' v-model='auto_start' id='auto-start' />
     48    <label for='auto-start'>&nbsp;auto-start</label><br />
     49    <input type='checkbox' v-model='auto_reset' id='auto-reset' />
     50    <label for='auto-reset'>&nbsp;auto-reset</label><br />
     51    <input type='checkbox' v-model='keep_going' id='keep-going' />
     52    <label for='keep-going'>&nbsp;keep-going</label><br />
     53    <p />
     54
     55    <component class='uploader' :is='UploadZone' target='https://vite.js29a.usermd.net/upload.php'
     56               :max-jobs='max_jobs' :auto-start='auto_start' :auto-reset='auto_reset'
     57               :keep-going='keep_going' ref='uploader'
     58               @update:canPick='(flag: boolean) => can_pick = flag'
     59               @update:canStart='(flag: boolean) => can_start = flag'
     60               @update:canAbort='(flag: boolean) => can_abort = flag'
     61               @update:canReset='(flag: boolean) => can_reset = flag'>
     62      <template #idle='{ pick }'>
     63        <div class='idle'>
     64          idle
     65          <br />
     66          <button @click='pick()'>pick</button>
     67        </div>
     68      </template>
     69
     70      <template #hover>
     71        <div class='hover'>
     72          hover
     73        </div>
     74      </template>
     75
     76      <template #wait='{ start, queue }'>
     77        <div class='wait'>
     78          wait
     79          <br />
     80          <button @click='pick()'>pick</button>
     81          <br />
     82          <button @click='start()'>start</button>
     83          <br/>
     84          <div v-for='file in queue'>{{ file.name }}</div>
     85        </div>
     86      </template>
     87
     88      <template #uploading='{ progress, current, queue, abort, errors }'>
     89        <div class='uploading'>
     90          uploading
     91          <br />
     92          <button @click='abort()'>abort</button>
     93          <br />
     94          {{ progress.length }} / {{ current.length }} / {{ queue.length }}
     95          <br />
     96          <button @click='abort()'>abort</button>
     97          <b>errors:</b> <span v-for='error in errors'>{{ error.file.name }}</span>
     98          <b>progress:</b> <div v-for='item in progress'>{{ item }}</div>
     99          <b>current:</b>
     100          <div v-for='item in current'>
     101            {{ item.file.name }}: {{ item.current }} of {{ item.total }}
     102          </div>
     103          <b>remaining:</b>
     104          <div v-for='file in queue'>{{ file.name }}</div>
     105        </div>
     106      </template>
     107
     108      <template #done='{ result, reset }'>
     109        <div class='done'>
     110          done
     111          <br />
     112          <button @click='reset()'>reset</button>
     113          <br />
     114          <div v-for='item in result'>{{ item }}</div>
     115        </div>
     116      </template>
     117
     118      <template #error='{ error, reset }'>
     119        <div class='error'>
     120          error
     121          <br />
     122          <button @click='reset()'>reset</button>
     123          <div>{{ error }}</div>
     124        </div>
     125      </template>
     126
     127      <template #aborted='{ result, reset }'>
     128        <div class='aborted'>
     129          aborted
     130          <br />
     131          <button @click='reset()'>reset</button>
     132          <div v-for='item in result'>{{ item }}</div>
     133        </div>
     134      </template>
     135
     136      <template #with-errors='{ result, errors }'>
     137        <div class='with-errors'>
     138          with errors
     139          <br />
     140          <b>errors(s):</b>
     141          <div v-for='item in errors'>{{ item.file.name }} / {{ item.error }}</div>
     142          <b>ok:</b>
     143          <div v-for='item in result'>{{ item }}</div>
     144        </div>
     145      </template>
     146    </component>
     147  </div>
    113148</template>
    114149
    115150<style scoped>
    116151
    117 .uploader {
    118   border: 3px dashed #fff;
    119   width: 512px;
    120   height: 384px;
     152.over {
    121153  position: absolute;
    122154  border-radius: 20px;
    … …  
    124156  left: 50%;
    125157  transform: translate(-50%, -50%);
     158}
     159
     160.uploader {
     161  border: 3px dashed #fff;
     162  width: 512px;
     163  height: 384px;
     164  display: inline-block;
    126165}
    127166

  • src/UploadZone.vue

    r4b96189 r64249d6  
    11<script setup lang="ts">
    22
    3 import { ref, defineProps, withDefaults, defineEmits, getCurrentInstance, defineExpose } from 'vue'
     3import { ref, computed, defineProps, withDefaults, defineEmits, getCurrentInstance, defineExpose, watch, nextTick } from 'vue'
    44
    55import $ from 'jQuery'
    … …  
    2828  (e: 'upload:progress', vec: any[]): void
    2929  (e: 'upload:done', vec: any[]): void
     30  (e: 'update:canReset', flag: boolean): void
     31  (e: 'update:canPick', flag: boolean): void
     32  (e: 'update:canStart', flag: boolean): void
     33  (e: 'update:canAbort', flag: boolean): void
    3034}>()
    3135
    … …  
    131135
    132136const reset_cb = (): void => {
     137  if(mode.value == Mode.m_idle)
     138    return
     139
    133140  mode.value = Mode.m_idle
    134141  files = []
    … …  
    136143
    137144const pick_cb = (): void => {
    138   if(mode.value != Mode.m_idle && Mode.value != Mode.m_wait)
     145  if(mode.value != Mode.m_idle && mode.value != Mode.m_wait)
    139146    return
    140147
    … …  
    168175  })
    169176
    170   queue.value = queue.value.filter(queue.value, (file) => {
     177  queue.value = queue.value.filter((file) => {
    171178    return file !== cur
    172179  })
    … …  
    184191
    185192      xhr.upload.addEventListener('progress', (evt): void => {
    186         queue.value.forEach(current.value, (item) => {
     193        current.value.forEach((item) => {
    187194          if(item.file === cur) {
    188195            item.current = evt.loaded
    … …  
    196203  })
    197204    .then((res: any) => {
    198       current.value = queue.value.filter(current.value, (item) => {
     205      current.value = current.value.filter((item) => {
    199206        return item.file !== cur
    200207      })
    … …  
    223230        files = [] // XXX can drop w/o reset
    224231
    225         if(errors.value.length) {
     232        if(errors.value.length)
    226233          if(props.keepGoing || props.keepGoing === '')
    227234            mode.value = Mode.m_with_errors
    228235          else
    229236            mode.value = Mode.m_error
    230         }
    231237        else
    232238          if(props.autoReset || props.autoReset === '')
    … …  
    243249    .catch((err: any) => {
    244250      if(props.keepGoing || props.keepGoing === '') {
    245         current.value = current.value.filter(current.value, (item) => {
     251        current.value = current.value.filter((item) => {
    246252          return item.file !== cur
    247253        })
    … …  
    269275}
    270276
     277const can_pick = computed({
     278  get: () => {
     279    return mode.value == Mode.m_idle || mode.value == Mode.m_wait
     280  },
     281  set: () => {
     282  }
     283})
     284
     285const can_start = computed({
     286  get: () => {
     287    return mode.value == Mode.m_wait
     288  },
     289  set: () => {
     290  }
     291})
     292
     293const can_abort = computed({
     294  get: () => {
     295    return mode.value == Mode.m_uploading
     296  },
     297  set: () => {
     298  }
     299})
     300
     301const can_reset = computed({
     302  get: () => {
     303    return mode.value != Mode.m_idle
     304  },
     305  set: () => {
     306  }
     307})
     308
     309const update_can = (state: Mode): void => {
     310  emit('update:canPick', can_pick.value)
     311  emit('update:canStart', can_start.value)
     312  emit('update:canAbort', can_abort.value)
     313  emit('update:canReset', can_reset.value)
     314}
     315
     316watch(() => { return mode.value }, (t: Mode, f: Mode) => { update_can(t) } )
     317
     318nextTick(() => {
     319  update_can(mode.value)
     320})
     321
    271322defineExpose({
    272323  reset: reset_cb,
    273324  start: start_cb,
    274325  pick: pick_cb,
    275   abort: abort_cb
     326  abort: abort_cb,
     327
     328  can_pick,
     329  can_start,
     330  can_abort,
     331  can_reset
    276332})
    277333
Note: See TracChangeset for help on using the changeset viewer.