EditBranchImages.svelte 2.52 KB
Newer Older
1
2

<script>
3
  import { uploadImage as uploadImageApi } from "../../lib/api.js"
4
  import { getApiBaseImage } from "../../lib/api-config.js"
5
  import { onMount } from "svelte"
6
  import {strings} from "../../lib/strings.js"
7
  import EditField from "./EditField.svelte"
8

9
  export let images
10
11
12

  onMount(() => {
    if (images.length === 0) {
13
      images.push({ })
14
    }
15
    images = images
16
17
18
19
20
  })

  export async function uploadImage(event, image, idx) {
    const file = event.target.files[0]
    try {
21
      const newImage = await uploadImageApi(file, image)
22
23
24
25
26
      images.splice(idx, 1, newImage)
      images.forEach((image) => {
        delete image.id
        delete image.type
      })
27
      images = images
28
29
30
31
32
33
    } catch (e) {
      console.log(e)
    }
  }

  export function addImage() {
34
35
    images.push({ })
    images = images
36
37
38
39
  }

  export function removeImage(imageIdx) {
    images.splice(imageIdx, 1)
40
    images = images
41
42
43
  }

  function imageUrl (imageId) {
44
    return `${getApiBaseImage()}/api/images/resize/800${imageId}`
45
46
47
  }
</script>

48
49
50
51
52
53
<div class="edit-branch-images">
  <div class="grid">
    <div class="grid__item large--two-fifths">
      <h2>Beskrivende bilder</h2>
    </div>
    <div class="grid__item large--three-fifths">
54
55
56
57
58
59
60
      {#if images}
        {#each images as image, idx}
          <div class="block block--top-2">
            <div class="grid">
              <div class="grid__item large--one-half">
                <form enctype="multipart/form-data" novalidate onsubmit="console.log('hmm..'); return false">
                  <div class="dropbox">
61
                    <input class="input-file" type="file" on:change="{(event) => uploadImage(event, image, idx)}" accept="image/*" />
62
63
64
65
66
67
68
69
70
                    {#if image && image.url}
                      <img src="{imageUrl(image.url)}" class="branch-profile-image" alt={image.altName}/>
                    {/if}
                    
                  </div>
                </form>
              </div>
              <div class="grid__item large--one-half">
                {#if image}
71
72
                  <EditField strings={strings.altName} bind:value="{image.altName}" />
                  <EditField strings={strings.credits} bind:value="{image.credits}" />
73
74
                {/if}
              </div>
75
            </div>
76
            <button on:click="{() => removeImage(idx)}">Slett</button>
77
          </div>
78
79
        {/each}
      {/if}
Bård's avatar
Bård committed
80
      <div class="block block--top-2 block--bottom-5">
81
        <button class="button" on:click="{addImage}">Legg til bilde</button>
82
      </div>
83
84
    </div>
  </div>
85
</div>