Merge branch 'develop' of https://bdgit.educoder.net/Hjqreturn/pgfqe6ch8 into develop

app/api/mobile/apis/cnmooc.rb

@@ -3,7 +3,7 @@
 module Mobile
   module Apis
     class Cnmooc < Grape::API
-      before {cnmooc_access_key!}
+      # before {cnmooc_access_key!}
       content_type :json, 'application/json;charset=UTF-8'
 
       resources :cnmoocs do

app/models/school_daily_active_user.rb

@@ -0,0 +1,3 @@
+class SchoolDailyActiveUser < ActiveRecord::Base
+  belongs_to :school_daily_report
+end

app/models/school_daily_report.rb

@@ -1,3 +1,5 @@
 class SchoolDailyReport < ActiveRecord::Base
   belongs_to :school
+
+  has_many :school_daily_active_users, dependent: :delete_all
 end

app/services/cnmoocs_service.rb

@@ -3,60 +3,49 @@ class CnmoocsService
   include GamesHelper
 
   def get_resources_data params
-    page = params[:pageNo].to_i
+
-    limit = params[:pageSize] || 16
-    offset = page * limit.to_i
     resources = []
     if params[:level].to_s == "1"
       subjects = Subject.find_by_sql("SELECT subjects.id, subjects.name, subjects.status, COUNT(myshixuns.id) AS myshixun_member_count
                             FROM myshixuns, stage_shixuns, subjects WHERE myshixuns.shixun_id = stage_shixuns.shixun_id
                             AND stage_shixuns.subject_id = subjects.id AND `subjects`.`hidden` = 0 AND `subjects`.`status` = 2
-                            GROUP BY subjects.id ORDER BY myshixun_member_count DESC limit #{offset},#{limit}")
+                            GROUP BY subjects.id ORDER BY myshixun_member_count DESC")
+
 
       subjects.each do |subject|
         resources << {resourceId: subject.id, parentId: nil, resourceName: subject.name, accessType: 0, nodeType: 0,
                      resourceType: 2}
       end
-      totalCount = Subject.where(:status => 2, :hidden => 0).count
+
-      count = subjects.count
     elsif params[:level].to_s == "2"
       return {error: -1, messages: "请求二级及其更高目录时，parentId不能为空"} if params[:parentId].blank?
-      stages = Stage.where(:subject_id => params[:parentId]).offset(offset).limit(limit)
+      stages = Stage.where(:subject_id => params[:parentId])
       stages.each do |stage|
         resources << {resourceId: stage.id, parentId: params[:parentId], resourceName: stage.name, accessType: 0, nodeType: 0,
                    resourceType: 2}
       end
-      totalCount = Stage.where(:subject_id => params[:parentId]).count
+
-      count = stages.count
     elsif params[:level].to_s == "3"
       return {error: -1, messages: "请求二级及其更高目录时，parentId不能为空"} if params[:parentId].blank?
       shixun_ids = StageShixun.where(:stage_id => params[:parentId]).pluck(:shixun_id)
-      shixuns = Shixun.where(:id => shixun_ids).offset(offset).limit(limit)
+      shixuns = Shixun.where(:id => shixun_ids)
       shixuns.each do |shixun|
         resources << {resourceId: shixun.id, parentId: params[:parentId], resourceName: shixun.name, accessType: 2,
                      nodeType: 1, resourceType: 1}
       end
-      totalCount = Shixun.where(:id => shixun_ids).count
+
-      count = shixuns.count
     end
-    pageCount = ((totalCount / limit.to_f) == (totalCount / limit)) ? (totalCount / limit) : ((totalCount / limit) + 1)
     {error: 0, messages: "请求成功",
-     page: {count: count, totalCount: totalCount, pageNo: page, pageSize: limit, pageCount: pageCount},
      data: {resources: resources} }
   end
 
   def search_resources params
-    page = params[:pageNo].to_i
-    limit = params[:pageSize] || 16
-    offset = page * limit.to_i
     shixuns = Shixun.select([:id, :identifier, :name, :myshixuns_count, :averge_star, :challenges_count, :trainee]).
         where(status: 2, hidden: 0).where("name like ?", "%#{params[:name]}%")
-    shixun_count = shixuns.count
+
-    pageCount = ((shixun_count / limit.to_f) == (shixun_count / limit)) ? (shixun_count / limit) : ((shixun_count / limit) + 1)
+    shixuns = shixuns.order("myshixuns_count desc")
-    shixuns = shixuns.order("myshixuns_count desc").offset(offset).limit(limit)
     shixun_list = shixun_data shixuns
     {error: 0, messages: "请求成功",
-     page: {count: shixuns.count, totalCount: shixun_count, pageNo: page, pageSize: limit, pageCount: pageCount},
      data: shixun_list }
   end
 

app/services/management/school_data_grow_service.rb

@@ -6,7 +6,7 @@ class Management::SchoolDataGrowService
   attr_reader :params
 
   sort_columns :teacher_increase_count, :student_increase_count,
-               :course_increase_count, :shixun_increase_count, :active_user_count,
+               :course_increase_count, :shixun_increase_count, :uniq_active_user_count,
                :shixun_homework_count, :shixun_evaluate_count,
                default_by: :teacher_increase_count, default_direction: :desc
 
@@ -27,6 +27,7 @@ class Management::SchoolDataGrowService
       'SUM(shixun_increase_count) shixun_increase_count,'\
       'SUM(shixun_homework_count) shixun_homework_count,'\
       'SUM(shixun_evaluate_count) shixun_evaluate_count,'\
+      'COUNT(distinct(au.user_id)) uniq_active_user_count,'\
       'SUM(active_user_count) active_user_count'
     )
 
@@ -45,6 +46,7 @@ class Management::SchoolDataGrowService
         'SUM(shixun_increase_count) shixun_increase_count,'\
         'SUM(shixun_homework_count) shixun_homework_count,'\
         'SUM(shixun_evaluate_count) shixun_evaluate_count,'\
+        'COUNT(distinct(au.user_id)) uniq_active_user_count,'\
         'SUM(active_user_count) active_user_count'
       ).first
     end
@@ -60,6 +62,7 @@ class Management::SchoolDataGrowService
                      end
 
     reports = School.joins("LEFT JOIN school_daily_reports sdr ON sdr.school_id = schools.id AND #{date_condition}")
+    reports = reports.joins("LEFT JOIN school_daily_active_users au ON au.school_daily_report_id = sdr.id")
 
     keyword = params[:keyword].try(:to_s).try(:strip)
     if keyword.present?

app/services/zip_service.rb

@@ -52,7 +52,7 @@ module ZipService
     members = exercise.course.members
     exercise_users.each do |exercise_user|
       member = members.where(:user_id => exercise_user.user_id).first
-      group_name = member.try(:course_group_id).to_i == 0 ? '未分班' : member.course_group.name
+      group_name = member.try(:course_group_id).to_i == 0 ? '未分班' : member.course_group.try(:name)
       export_file_name = "#{group_name}-#{exercise.course_id}-#{exercise.exercise_name}-#{exercise_user.user.user_extensions.student_id}-#{exercise_user.user.show_real_name}" + ".pdf"
       out_file = export_user_exercise(exercise, exercise_user, export_file_name)
       file_name = File::expand_path(out_file)

app/tasks/statistic_school_daily_report_task.rb

@@ -9,7 +9,9 @@ class StatisticSchoolDailyReportTask
       student_count = users.where(created_on: yesterday, user_extensions: { identity: User::STUDENT }).count
 
       # 活跃用户
-      active_user_count = users.where(last_login_on: yesterday).count
+      active_user_ids = users.where(last_login_on: yesterday).pluck(:id)
+      active_user_count = active_user_ids.size
+
 
       # 新增课堂
       course_count = school.courses.where(created_at: yesterday).count
@@ -38,7 +40,13 @@ class StatisticSchoolDailyReportTask
         shixun_homework_count: shixun_homework_count, shixun_evaluate_count: shixun_evaluate_count,
         shixun_increase_count: shixun_count, active_user_count: active_user_count, date: current_date
       }
-      SchoolDailyReport.create!(create_params)
+      report = SchoolDailyReport.create!(create_params)
+
+      if active_user_ids.present?
+        values = '(' + active_user_ids.join(", #{report.id}),(") + ", #{report.id})"
+        user_sql = "INSERT INTO school_daily_active_users(user_id, school_daily_report_id) VALUES#{values}"
+        SchoolDailyActiveUser.connection.execute(user_sql)
+      end
     end
   end
 

app/views/common/index.html.erb

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><meta name="renderer" content="webkit"/><meta name="force-rendering" content="webkit"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><title>Educoder</title><script type="text/javascript">window.__isR=!0</script><link rel="stylesheet" href="/react/build/css/css_min_all.css"><link rel="stylesheet" href="/assets/iconfont/iconfont.css"><link href="/react/build/./static/css/main.e1b0d6a5.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="md_div" style="display:none"></div><div id="root" class="page -layout-v -fit"></div><div id="picture_display" style="display:none"></div><script type="text/javascript" src="/react/build/js/js_min_all.js"></script><script type="text/javascript" src="/assets/kindeditor/kindeditor.js"></script><script type="text/javascript" src="/react/build/js/create_kindeditor.js"></script><script type="text/javascript" src="/javascripts/educoder/edu_application.js"></script><script type="text/javascript" src="/react/build/./static/js/main.85df3a28.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><meta name="renderer" content="webkit"/><meta name="force-rendering" content="webkit"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><title>Educoder</title><script type="text/javascript">window.__isR=!0</script><link rel="stylesheet" href="/react/build/css/css_min_all.css"><link rel="stylesheet" href="/assets/iconfont/iconfont.css"><link href="/react/build/./static/css/main.e1b0d6a5.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="md_div" style="display:none"></div><div id="root" class="page -layout-v -fit"></div><div id="picture_display" style="display:none"></div><script type="text/javascript" src="/react/build/js/js_min_all.js"></script><script type="text/javascript" src="/assets/kindeditor/kindeditor.js"></script><script type="text/javascript" src="/react/build/js/create_kindeditor.js"></script><script type="text/javascript" src="/javascripts/educoder/edu_application.js"></script><script type="text/javascript" src="/react/build/./static/js/main.994eab16.js"></script></body></html>

app/views/managements/schools/_data_grow_list.html.erb

@@ -12,7 +12,9 @@
   新增实训<span class="color-red"><%= @grow_summary.shixun_increase_count || 0 %></span>个，
   新增实训作业<span class="color-red"><%= @grow_summary.shixun_homework_count || 0 %></span>个，
   新增实训评测<span class="color-red"><%= @grow_summary.shixun_evaluate_count || 0 %></span>个，
-  活跃用户<span class="color-red"><%= @grow_summary.active_user_count || 0 %></span>个
+  活跃用户<span class="color-red">
+  <%= @grow_summary.uniq_active_user_count.to_i.zero? ? @grow_summary.active_user_count.to_i : @grow_summary.uniq_active_user_count.to_i %>
+  </span>个
 </div>
 <table class="edu-pop-table edu-txt-center" cellpadding="0" cellspacing="0" style="table-layout: fixed">
   <thead>
@@ -27,7 +29,7 @@
     <th width="12%"><%= sort_tag('新增实训', name: 'shixun_increase_count', path: school_data_grow_managements_path) %></th>
     <th width="12%"><%= sort_tag('新增实训作业', name: 'shixun_homework_count', path: school_data_grow_managements_path) %></th>
     <th width="12%"><%= sort_tag('新增实训评测', name: 'shixun_evaluate_count', path: school_data_grow_managements_path) %></th>
-    <th width="12%"><%= sort_tag('活跃用户', name: 'active_user_count', path: school_data_grow_managements_path) %></th>
+    <th width="12%"><%= sort_tag('活跃用户', name: 'uniq_active_user_count', path: school_data_grow_managements_path) %></th>
   </tr>
   </thead>
   <tbody>
@@ -42,7 +44,7 @@
         <td><%= report.shixun_increase_count.to_i %></td>
         <td><%= report.shixun_homework_count.to_i %></td>
         <td><%= report.shixun_evaluate_count.to_i %></td>
-        <td><%= report.active_user_count.to_i %></td>
+        <td><%= report.uniq_active_user_count.to_i.zero? ? report.active_user_count.to_i : report.uniq_active_user_count.to_i %></td>
       </tr>
     <% end %>
   </tbody>

db/migrate/20190530025028_migrate_homework_end_time.rb

@@ -0,0 +1,93 @@
+class MigrateHomeworkEndTime < ActiveRecord::Migration
+  def up
+    homework = HomeworkCommon.where(id: 18615).first
+    if homework.present?
+      transaction do
+        homework.student_works.where("work_status = 2 and commit_time is not null and commit_time <= '#{homework.end_time}'").each do |work|
+          work.work_status = 1
+          work.late_penalty = 0
+          score = work.final_score.to_f + work.eff_score.to_f - work.late_penalty.to_f
+          work.work_score = format("%.2f", score < 0 ? 0 : score.to_f) unless work.ultimate_score
+          work.save
+        end
+      end
+    end
+
+    homework = HomeworkCommon.where(id: 18614).first
+    if homework.present?
+      homework.update_column('end_time', '2019-05-20 00:00:00')
+      transaction do
+        homework.student_works.where("work_status = 2 and commit_time is not null and commit_time <= '2019-05-20 00:00:00'").each do |work|
+          work.work_status = 1
+          work.late_penalty = 0
+          score = work.final_score.to_f + work.eff_score.to_f - work.late_penalty.to_f
+          work.work_score = format("%.2f", score < 0 ? 0 : score.to_f) unless work.ultimate_score
+          work.save
+        end
+      end
+    end
+
+    homework = HomeworkCommon.where(id: 18617).first
+    if homework.present?
+      homework.update_column('end_time', '2019-05-29 00:00:00')
+      homework.save
+      transaction do
+        homework.student_works.where("work_status = 2 and commit_time is not null and commit_time <= '2019-05-29 00:00:00'").each do |work|
+          work.work_status = 1
+          work.late_penalty = 0
+          score = work.final_score.to_f + work.eff_score.to_f - work.late_penalty.to_f
+          work.work_score = format("%.2f", score < 0 ? 0 : score.to_f) unless work.ultimate_score
+          work.save
+        end
+      end
+    end
+
+    homework = HomeworkCommon.where(id: 18616).first
+    if homework.present?
+      homework.update_column('end_time', '2019-06-10 00:00:00')
+      homework.save
+      transaction do
+        homework.student_works.where("work_status = 2 and commit_time is not null and commit_time <= '2019-06-10 00:00:00'").each do |work|
+          work.work_status = 1
+          work.late_penalty = 0
+          score = work.final_score.to_f + work.eff_score.to_f - work.late_penalty.to_f
+          work.work_score = format("%.2f", score < 0 ? 0 : score.to_f) unless work.ultimate_score
+          work.save
+        end
+      end
+    end
+
+    homework = HomeworkCommon.where(id: 25901).first
+    if homework.present?
+      homework.update_column('end_time', '2019-06-16 00:00:00')
+      homework.save
+      transaction do
+        homework.student_works.where("work_status = 2 and commit_time is not null and commit_time <= '2019-06-16 00:00:00'").each do |work|
+          work.work_status = 1
+          work.late_penalty = 0
+          score = work.final_score.to_f + work.eff_score.to_f - work.late_penalty.to_f
+          work.work_score = format("%.2f", score < 0 ? 0 : score.to_f) unless work.ultimate_score
+          work.save
+        end
+      end
+    end
+
+    homework = HomeworkCommon.where(id: 25902).first
+    if homework.present?
+      homework.update_column('end_time', '2019-06-17 00:00:00')
+      homework.save
+      transaction do
+        homework.student_works.where("work_status = 2 and commit_time is not null and commit_time <= '2019-06-17 00:00:00'").each do |work|
+          work.work_status = 1
+          work.late_penalty = 0
+          score = work.final_score.to_f + work.eff_score.to_f - work.late_penalty.to_f
+          work.work_score = format("%.2f", score < 0 ? 0 : score.to_f) unless work.ultimate_score
+          work.save
+        end
+      end
+    end
+  end
+
+  def down
+  end
+end

db/migrate/20190530050358_migrate_shixun_student_work_score_2.rb

@@ -0,0 +1,31 @@
+class MigrateShixunStudentWorkScore2 < ActiveRecord::Migration
+  def up
+    homeworks = HomeworkCommon.where(id: [18615, 18614, 18617, 18616, 25901, 25902])
+    homeworks.each do |homework|
+      transaction do
+        homework.student_works.where("work_status > 0").each do |work|
+         if homework.end_time > Time.now
+            work.work_status = 1
+            work.late_penalty = 0
+         else
+           myshixun = work.myshixun
+
+           if myshixun.status == 1 && myshixun.try(:done_time) < homework.end_time
+              work.work_status = 1
+              work.late_penalty = 0
+            else
+              work.work_status = 2
+              work.late_penalty = homework.late_penalty
+            end
+          end
+          score = work.final_score.to_f + work.eff_score.to_f - work.late_penalty.to_f
+          work.work_score = format("%.2f", score < 0 ? 0 : score.to_f) unless work.ultimate_score
+          work.save
+        end
+      end
+    end
+  end
+
+  def down
+  end
+end

db/migrate/20190531011258_create_school_daily_active_users.rb

@@ -0,0 +1,10 @@
+class CreateSchoolDailyActiveUsers < ActiveRecord::Migration
+  def change
+    create_table :school_daily_active_users do |t|
+      t.integer :school_daily_report_id
+      t.integer :user_id
+    end
+
+    add_index :school_daily_active_users, :school_daily_report_id
+  end
+end

public/react/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@novnc/novnc": "^1.1.0",
     "antd": "^3.6.5",
     "autoprefixer": "7.1.6",
     "axios": "^0.18.0",

public/react/public/js/js_min_all.js

@@ -154,8 +154,9 @@ var SHRINK = 1; // 缩小
 
 var repositoryTabHeight = 40
 function _resizeTpiPanel () {
-    $("#game_left_contents").width('400px');
+    var _total = $(".labelN").width();
-    $("#game_right_contents").width( $(".labelN").width() - 400  + 'px');
+    $("#game_left_contents").width( _total * 0.35 + 'px');
+    $("#game_right_contents").width(  _total * 0.65  + 'px');
 }
 $(function(){
     function update_rows_and_cols(rows) {

public/react/src/modules/page/MainContent.js

@@ -13,7 +13,7 @@ import ChooseEvaluateView from './main/ChooseEvaluateView'
 
 import { CircularProgress } from 'material-ui/Progress';
 import Button from 'material-ui/Button';
-
+import VNCDisplay from './VNCDisplay'
 import './tpiPage.css';
 import './tpiPageForMobile.css';
 const $ = window.$;
@@ -79,7 +79,11 @@ class MainContent extends Component {
 										background: #fff;
 									}
 								`}</style>
-								{ showIframeContent ? <iframe src={vnc_url ||"http://106.75.27.125:42288/vnc.html"} id="contentIframe" ></iframe> : 
+								{/* <iframe src={vnc_url ||"http://106.75.27.125:42288/vnc.html"} id="contentIframe" ></iframe> */}
+								{ showIframeContent && vnc_url ? <VNCDisplay
+									vnc_url={vnc_url}
+								></VNCDisplay>
+								 : 
 								<React.Fragment>
 		      			{/* 旧版本、评测等待提示--更新提示块*/}
 		      			{/*<div className="tip-panel-animate clearfix user_bg_shadow bor-grey-e">

public/react/src/modules/page/VNCDisplay.js

@@ -0,0 +1,154 @@
+import React, { Component } from 'react';
+
+import RFB from '@novnc/novnc/lib/rfb.js';
+
+const $ = window.$;
+// const showIframeContent = window.location.search.indexOf('vnc=1') != -1;
+class VNCDisplay extends Component {
+	componentDidMount() {
+		console.log(RFB)
+
+        let rfb;
+        let desktopName;
+        // When this function is called we have
+        // successfully connected to a server
+        function connectedToServer(e) {
+            status("Connected to " + desktopName);
+        }
+        // This function is called when we are disconnected
+        function disconnectedFromServer(e) {
+            if (e.detail.clean) {
+                status("Disconnected");
+            } else {
+                status("Something went wrong, connection is closed");
+            }
+        }
+        // When this function is called, the server requires
+        // credentials to authenticate
+        function credentialsAreRequired(e) {
+            const password = prompt("Password Required:");
+            rfb.sendCredentials({ password: password });
+        }
+        // When this function is called we have received
+        // a desktop name from the server
+        function updateDesktopName(e) {
+            desktopName = e.detail.name;
+        }
+        // Since most operating systems will catch Ctrl+Alt+Del
+        // before they get a chance to be intercepted by the browser,
+        // we provide a way to emulate this key sequence.
+        function sendCtrlAltDel() {
+            rfb.sendCtrlAltDel();
+            return false;
+        }
+        // Show a status text in the top bar
+        function status(text) {
+            document.getElementById('status').textContent = text;
+        }
+        // This function extracts the value of one variable from the
+        // query string. If the variable isn't defined in the URL
+        // it returns the default value instead.
+        function readQueryVariable(name, defaultValue) {
+            // A URL with a query parameter can look like this:
+            // https://www.example.com?myqueryparam=myvalue
+            //
+            // Note that we use location.href instead of location.search
+            // because Firefox < 53 has a bug w.r.t location.search
+            const re = new RegExp('.*[?&]' + name + '=([^&#]*)'),
+                match = document.location.href.match(re);
+            if (typeof defaultValue === 'undefined') { defaultValue = null; }
+            if (match) {
+                // We have to decode the URL since want the cleartext value
+                return decodeURIComponent(match[1]);
+            }
+            return defaultValue;
+        }
+        document.getElementById('sendCtrlAltDelButton')
+            .onclick = sendCtrlAltDel;
+        // Read parameters specified in the URL query string
+        // By default, use the host and port of server that served this file
+
+        // const host = readQueryVariable('host', window.location.hostname);
+        // let port = readQueryVariable('port', window.location.port);
+        // const password = readQueryVariable('password', '');
+
+        const { vnc_url } = this.props;
+        // http://117.50.12.63:43149/vnc_lite.html?password=headless
+        let _ar1 = vnc_url.split('/');
+        let ipAndPort = _ar1[2].split(':')
+        let passwordAr = _ar1[3].split('password=')
+        const host = ipAndPort[0]
+        let port = ipAndPort[1]
+        const password = passwordAr[1].split('&')[0]
+
+        const path = readQueryVariable('path', 'websockify');
+        // | | |         | | |
+        // | | | Connect | | |
+        // v v v         v v v
+        status("Connecting");
+        // Build the websocket URL used to connect
+        let url;
+        // if (window.location.protocol === "https:") {
+        //     url = 'wss';
+        // } else {
+            url = 'ws';
+        // }
+        url += '://' + host;
+        if(port) {
+            url += ':' + port;
+        }
+        url += '/' + path;
+        // Creating a new RFB object will start a new connection
+        rfb = new RFB(document.getElementById('screen'), url,
+                    { credentials: { password: password } });
+        // Add listeners to important events from the RFB module
+        rfb.addEventListener("connect",  connectedToServer);
+        rfb.addEventListener("disconnect", disconnectedFromServer);
+        rfb.addEventListener("credentialsrequired", credentialsAreRequired);
+        rfb.addEventListener("desktopname", updateDesktopName);
+        // Set parameters that can be changed on an active connection
+        rfb.viewOnly = readQueryVariable('view_only', false);
+        rfb.scaleViewport = readQueryVariable('scale', false);
+	}
+	
+  	render() {
+  		const { challenge,  vnc_url } = this.props
+
+  		
+	    return (
+	      	<div className="">
+                <style>{`
+                    #top_bar {
+                        background-color: #6e84a3;
+                        color: white;
+                        font: bold 12px Helvetica;
+                        padding: 6px 5px 4px 5px;
+                        border-bottom: 1px outset;
+                    }
+                    #status {
+                        text-align: center;
+                    }
+                    #sendCtrlAltDelButton {
+                        position: fixed;
+                        top: 0px;
+                        right: 0px;
+                        border: 1px outset;
+                        padding: 5px 5px 4px 5px;
+                        cursor: pointer;
+                    }
+                    #screen {
+                        flex: 1; /* fill remaining space */
+                        overflow: hidden;
+                    }
+                `}</style>
+		        <div id="top_bar">
+                    <div id="status">Loading</div>
+                    <div id="sendCtrlAltDelButton">Send CtrlAltDel</div>
+                </div>
+                <div id="screen"></div>
+		    </div>
+	    );
+  	}
+}
+
+export default VNCDisplay;