FE csv notify

Co-authored-by: JYeonKim <[email protected]>

OJ-BE/aicontest/views/oj.py

@@ -194,8 +194,10 @@ def post(self, request):
         else:
             return self.error("Upload failed")
         logger.info("file_name={}".format(file.name))
+
         if not file.name.endswith('.csv'):
             raise APIError("CSV파일이 아닙니다. 파일 형식을 다시 확인해주세요")
+
         logger.info("file={}".format(file))
         tmp_file = f"/tmp/{rand_str()}.csv"
         logger.info("tmp_file={}".format(tmp_file))
@@ -226,7 +228,8 @@ def post(self, request):
         y_pred = np.array(np.loadtxt(os.path.join(settings.PREDICT_DIR, predict_id, "predict.csv"), delimiter=",", dtype=np.float32, skiprows=1, usecols = (1,)))
         logger.info("y_true={}".format(str(y_true)))
         logger.info("y_pred={}".format(str(y_pred)))
-        if y_true.shape[0]!=y_pred.shape[0]:
+
+        if y_true.shape[0] != y_pred.shape[0]:
             raise APIError("해당 문제의 csv파일이 아닙니다. 파일 내용을 다시 확인해주세요")
 
         eval_type = csv.eval_type

OJ-FE/src/pages/oj/components/ModalNotify.vue

@@ -0,0 +1,106 @@
+<template>
+  <transition name="modal">
+    <div class="modal-mask">
+      <div class="modal-wrapper">
+        <div class="modal-container">
+
+          <div class="modal-header">
+            <slot name="header">
+              <strong>파일 형식과 내용을 확인해주세요</strong>
+              <b-button-close @click="$emit('close')"></b-button-close>
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+  export default {
+    props: ['problemID', 'problemPassword'],
+    data () {
+      return {
+        passwordFromUser: ''
+      }
+    },
+    methods: {
+      goProblem () {
+        if (this.passwordFromUser === this.problemPassword) {
+          this.$router.push({name: 'aiproblem-class-details', params: {problemID: this.problemID}})
+          console.log('p-id', this.problemID)
+          console.log('p-pwd', this.problemPassword)
+          console.log('pwd', this.passwordFromUser)
+        }
+      }
+    }
+  }
+</script>
+
+<style>
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, .5);
+  display: table;
+  transition: opacity .3s ease;
+}
+
+.modal-wrapper {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.modal-container {
+  width: 500px;
+  margin: 0px auto;
+  padding: 20px 30px;
+  background-color: #fff;
+  border-radius: 20px 20px 20px 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
+  transition: all .3s ease;
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+.modal-header {
+  margin-top: 0;
+  color: #3399ff;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.modal-body {
+  margin: 20px 0;
+}
+
+.modal-default-button {
+  float: right;
+}
+
+/*
+ * The following styles are auto-applied to elements with
+ * transition="modal" when their visibility is toggled
+ * by Vue.js.
+ *
+ * You can easily play with the modal transition by editing
+ * these styles.
+ */
+
+.modal-enter {
+  opacity: 0;
+}
+
+.modal-leave-active {
+  opacity: 0;
+}
+
+.modal-enter .modal-container,
+.modal-leave-active .modal-container {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}
+</style>

OJ-FE/src/pages/oj/views/aicontest/AIContest.vue

@@ -64,13 +64,15 @@
                   :data="{id: problem._id}"
                   :show-file-list="true"
                   :on-success="uploadFileSucceeded"
+                  ref="inputFile"
                   accept=".csv"
                   style="margin: 3px">
                   <div style="padding: 30px 0">
                     <Icon type="ios-cloud-upload" size="52" style="color: #3399ff; margin: 3px"></Icon>
                     <p>한 개의 파일(csv)만 가능합니다.</p>
                   </div>
                 </Upload>
+                <ModalNotify v-if="isModalViewed" @close="modalclose"></ModalNotify>
                 <!-- <v-file-input truncate-length="15" @change="uploadFile"></v-file-input> -->
                 <!--<v-file-input
                   accept=".csv"
@@ -106,24 +108,21 @@
   import api from '@oj/api'
   import {pie, largePie} from './chartData'
   import utils from '@/utils/utils'
-  // import * as dfd from 'danfojs/danfojs/src'
-  // import {DataFrame} from 'danfojs/dist/core/frame'
-  // import {Series} from 'danfojs/dist/core/series'
-  // import './App.css'
-  // import * as dfd from 'danfojs'
-  // import * as dfd from 'danfojs/danfojs/src/index'
+  import ModalNotify from '@oj/components/ModalNotify'
 
   // 只显示这些状态的图形占用
   const filtedStatus = ['-1', '-2', '0', '1', '2', '3', '4', '8']
 
   export default {
     name: 'AIContest',
     components: {
-      CodeMirror
+      CodeMirror,
+      ModalNotify
     },
     mixins: [FormMixin],
     data () {
       return {
+        isModalViewed: false,
         // table 추가 부분
         headers: [
           // {
@@ -366,10 +365,16 @@
       // },
       // 추가 부분
       uploadFileSucceeded (response) {
-        console.log(response)
-        console.log(response.data)
+        // console.log(response)
+        // console.log('response.data', response.data)
         if (response.error) {
           this.$error(response.data)
+          console.log('this.$error(response.data)', this.$error(response.data))
+          // this.$refs.fileupload.value = null
+          // this.$refs.inputFile.value = null
+          // this.$refs.fileupload.reset()
+          // this.$router.go()
+          this.isModalViewed = true
           return
         }
         this.y_score = response.data.y_score
@@ -672,6 +677,10 @@
       },
       onCopyError (e) {
         this.$error('Failed to copy code')
+      },
+      modalclose () {
+        this.isModalViewed = false
+        this.$router.go()
       }
     },
     computed: {