sheep/app/components/dialog/RunConfigDialog.vue at c847f9e6f51d4bc151a036964b9262ce2c340854 · systemetric/sheep · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<template>
  <DialogWrapper>
    <template slot="title">Options</template>
    <div>
      <fieldset style="margin-bottom: 1em">
        <legend>Zone</legend>
        <label v-for="color in zones">
          <input type="radio" :value="color" v-model="zone" />
          {{ color }}
        </label>
      </fieldset>

      <fieldset style="margin-bottom: 1em">
        <legend>Mode</legend>
        <label>
          <input type="radio" value="dev" v-model="mode" />
          Development
        </label>
        <label>
          <input type="radio" value="comp" v-model="mode" />
          Competition
        </label>
      </fieldset>

      <fieldset>
        <legend>Misc</legend>
        <input
          type="file"
          ref="imageFile"
          accept=".jpg"
          style="display: none"
          @change="imageUpload"
        />
        <button @click="uploadTeamLogo">Upload Team Logo</button>
        <input
          type="file"
          ref="patchFile"
          accept=".zip"
          style="display: none"
          @change="patchUpload"
        />
        <button @click="uploadPatch">Upload Patch</button>
      </fieldset>
    </div>
    <template slot="actions">
      <button @click="submitAndClose">Close</button>
    </template>
  </DialogWrapper>
</template>

<script lang="ts">
import Vue from "vue";
import {
  MUTATION_SET_RUN_CONFIG,
  RunConfiguration,
  ACTION_UPLOAD_TEAM_LOGO,
  ACTION_UPLOAD_PATCH,
} from "@/store";

export default Vue.extend({
  name: "run-config-dialog",
  data() {
    return {
      zone:
        this.$store.state.runConfig.zone !== undefined
          ? this.$store.state.runConfig.zone
          : "red",
      mode:
        this.$store.state.runConfig.mode !== undefined
          ? this.$store.state.runConfig.mode
          : "dev",
      zones: ["red", "yellow", "green", "blue"],
    };
  },
  methods: {
    submitAndClose() {
      this.$store.commit(MUTATION_SET_RUN_CONFIG, {
        zone: this.zone,
        mode: this.mode,
      } as RunConfiguration);
      this.$emit("close");
    },
    imageUpload() {
      const team_logo_file = (this.$refs as any).imageFile.files[0];
      if (!team_logo_file) return;

      console.log(`Uploading team image ${team_logo_file.name}...`);

      this.$store.dispatch(ACTION_UPLOAD_TEAM_LOGO, team_logo_file);
      this.$emit("close");
    },
    patchUpload() {
      const patch_file = (this.$refs as any).patchFile.files[0];
      if (!patch_file) return;

      console.log(`Uploading patch ${patch_file.name}...`);

      this.$store.dispatch(ACTION_UPLOAD_PATCH, patch_file);
      this.$emit("close");
    },
    uploadTeamLogo() {
      (this.$refs as any).imageFile.click();
    },
    uploadPatch() {
      (this.$refs as any).patchFile.click();
    },
  },
});
</script>

<style lang="scss">
fieldset {
  border-color: #aaa;
  border-width: 1px;
  border-style: solid;

  padding: 0.5em;

  legend {
    padding: 0 0.25em;
  }
}
</style>