refinement: request and display new broadcast with 2s interval #90

app/controllers/broadcasts_controller.rb

@@ -76,6 +76,14 @@ def create
     redirect_to(classrooms_path)
   end
 
+  def get_latest_broadcast
+    user_id = User.find_by(gitlab_id: current_user.id).id
+    user_broadcasts = Broadcast.where(:to_id => user_id)
+    latest_broadcast = user_broadcasts[-1]
+    return_dict = {broadcast_num: user_broadcasts.length, latest_broadcast: latest_broadcast}
+    render json: return_dict
+  end
+
   def destroy
     @broadcast = Broadcast.find(params[:id])
     @broadcast.destroy

app/javascript/packs/new_broadcast.js

@@ -77,7 +77,7 @@ document.addEventListener('DOMContentLoaded', () => {
                             user_id: this.broadcast.user_id,
                             content: this.broadcast.content
                         });
-                        window.location.href = '/classrooms';
+                        // window.location.href = '/classrooms';
                     } else {
                         return false;
                     }

app/javascript/src/shared/components/teacher_navbar.vue

@@ -51,7 +51,10 @@
       </el-submenu>
 
       <el-submenu index="3">
-        <template slot="title">广播</template>
+        <template slot="title">
+            广播
+          <el-badge is-dot v-if="broadcast_num > 0" class="mark" />
+        </template>
         <el-menu-item index="3-1">
           发送广播
         </el-menu-item>
@@ -79,6 +82,7 @@
   </div>
 </template>
 <script>
+  import axios from 'axios/index';
   export default {
     props: ['admin', 'broadcast_num'],
     data() {
@@ -98,6 +102,7 @@
         document.getElementById('navbar').dataset.classroomid);
       this.classroomNameList = JSON.parse(
         document.getElementById('navbar').dataset.classroomname);
+      setInterval(this.getLatestBroadcast, 2000);
     },
     methods: {
       handleSelect(key) {
@@ -134,7 +139,18 @@
           let classroomIdTmp = key.split("8-")[1];
           window.location.assign(`/classrooms/${classroomIdTmp}/blogs`);
         }
+      },
+      getLatestBroadcast() {
+        axios.get('/broadcasts/get_latest_broadcast').then((response) => {
+          if (response.data['broadcast_num'] > this.broadcast_num) {
+            this.broadcast_num = response.data['broadcast_num']
+            this.$notify({
+              title: '新广播',
+              message: response.data['latest_broadcast']['content']
+            })
+          }
+        });
       }
     }
   }
-</script>
+</script>

config/routes.rb

@@ -156,6 +156,7 @@
   resources :broadcasts do
     collection do
       get 'destroy_all', to: 'broadcasts#destroy_all'
+      get 'get_latest_broadcast', to: 'broadcasts#get_latest_broadcast'
     end
   end
 

db/schema.rb

@@ -30,8 +30,6 @@
     t.integer "user_id"
     t.integer "classroom_id"
     t.string "blog_type"
-    t.integer "score1"
-    t.integer "score2"
     t.index ["classroom_id"], name: "index_blogs_on_classroom_id"
     t.index ["user_id"], name: "index_blogs_on_user_id"
   end