Submit modal

src/api/index.js

@@ -105,6 +105,10 @@ export default {
     const res = await axios.put(`${API_ENDPOINT}/problems/${problem.id}/cases`, scores, getConfig(sessionID));
     return res;
   },
+  async submit(sessionID, val, problemID) {
+    const res = await axios.post(`${API_ENDPOINT}/problems/${problemID}/submissions`, val, getConfig(sessionID));
+    return res;
+  },
   async rejudgeProblem(sessionID, problemID) {
     const res = await axios.post(`${API_ENDPOINT}/problems/${problemID}/rejudge`, null, getConfig(sessionID));
     return res;

src/components/common/Modal.vue

@@ -9,7 +9,9 @@
       <section class="modal-card-body">
         <slot></slot>
       </section>
-      <footer class="modal-card-foot"></footer>
+      <footer class="modal-card-foot">
+        <slot name="footer"></slot>
+      </footer>
     </div>
   </div>
 </template>

src/components/contest/Contest.vue

@@ -88,6 +88,11 @@
           </div>
           <div class="column">
             <Problem :problem="problems[activeTab]"/>
+            <section class="section">
+              <button class="button is-link" @click="showSubmitModal = true">
+                提出
+              </button>
+            </section>
           </div>
           <Modal
             :isActive="showStandingsModal"
@@ -133,6 +138,12 @@
           <Modal :isActive="showSubmitListModal" @close="showSubmitListModal = false" title="提出一覧">
             <h1>bbb</h1>
           </Modal>
+          <SubmitModal
+            :isActive="showSubmitModal"
+            @close="showSubmitModal = false"
+            :problem="problems[activeTab]"
+            @submit="submitCode"
+          />
         </div>
       </template>
       <div v-else class="columns is-mobile">
@@ -173,6 +184,7 @@ import moment from 'moment';
 import Problem from '@/components/problem/Problem';
 import ErrorNotification from '@/components/common/ErrorNotification';
 import Modal from '@/components/common/Modal';
+import SubmitModal from '@/components/problem/SubmitModal';
 
 import Tag from './Tag';
 
@@ -183,6 +195,7 @@ export default {
       showDescription: false,
       showStandingsModal: false,
       showSubmitListModal: false,
+      showSubmitModal: false,
       activeTab: 0,
       diff: 300000,
     };
@@ -250,6 +263,7 @@ export default {
       'getProblems',
       'getStandings',
       'enter',
+      'submit',
     ]),
     ...mapMutations('koneko/contests', [
       'setRequiredWatching',
@@ -279,12 +293,16 @@ export default {
       const ss = `00${Math.floor(diff / 1000) % 60}`.slice(-2);
       return `${mm}:${ss}`;
     },
+    submitCode(value) {
+      this.submit({ value, problemIndex: this.activeTab });
+    },
   },
   components: {
     Tag,
     Modal,
     Problem,
     ErrorNotification,
+    SubmitModal,
   },
 };
 </script>

src/components/problem/SubmitModal.vue

@@ -0,0 +1,48 @@
+<template>
+  <Modal title="提出" :isActive="isActive" @close="close">
+    <SourceCodeInput
+      :value="value"
+      :title="problem.title"
+      @input="updateValue"
+    />
+    <button slot="footer" class="button is-link" @click="submit">
+      提出
+    </button>
+  </Modal>
+</template>
+<script>
+import Modal from '@/components/common/Modal';
+import SourceCodeInput from '@/components/common/SourceCodeInput';
+
+export default {
+  data() {
+    return {
+      value: {
+        languageID: 1,
+        sourceCode: '',
+      },
+    };
+  },
+  props: [
+    'isActive',
+    'problem',
+  ],
+  methods: {
+    updateValue(newValue) {
+      this.value = newValue;
+    },
+    close() {
+      this.value.sourceCode = '';
+      this.$emit('close');
+    },
+    submit() {
+      this.$emit('submit', this.value);
+      this.close();
+    },
+  },
+  components: {
+    Modal,
+    SourceCodeInput,
+  },
+};
+</script>

src/store/modules/contests.js

@@ -72,6 +72,9 @@ export default {
       });
       state.isWaitingJudge = state.problems.some(({ status }) => status < 2 && status > -1);
     },
+    waitJudge(state) {
+      state.isWaitingJudge = true;
+    },
     setParticipants(state, participants) {
       state.participants = participants.map(v => ({
         name: v.name, displayName: v.displayName, id: v.id,
@@ -165,5 +168,13 @@ export default {
         commit('setError', e);
       }
     },
+    async submit({ commit, rootState, state }, data) {
+      commit('waitJudge');
+      try {
+        api.submit(rootState.koneko.sessionID, data.value, state.problems[data.problemIndex].id);
+      } catch (e) {
+        commit('setError', e);
+      }
+    },
   },
 };