Quase pronto

css/ivprog-term.css

@@ -29,3 +29,43 @@
 .ivprog-term-div > .ivprog-term-info, .ivprog-term-div, .ivprog-term-error {
   padding-left: 20px;
 }
+
+#ivprog-term {
+  border: 1px solid gray;
+  background: black;
+  margin-top: -30px;
+  position: relative;
+  padding: 5px;
+}
+#ivprog-term i {
+  margin-left: 5px;
+  cursor: pointer;
+}
+.div_toggle_console {
+  cursor: pointer;
+}
+.ivprog-term-active {
+  box-shadow: 0 0 5px rgba(81, 203, 238, 1) !important;
+  border: 3px solid rgba(81, 203, 238, 1) !important;
+}
+
+.ivprog-term-div {
+  overflow:scroll;
+}
+
+.ivprog-term-div::-webkit-scrollbar {
+    width: 12px;
+}
+ 
+.ivprog-term-div::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+}
+ 
+.ivprog-term-div::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+    background: green;
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
+}

css/ivprog-visual-1.0.css

@@ -7,7 +7,7 @@ body {
 }
 
 .ui.raised.container.segment.div_to_body {
-  height: 96%;
+  height: 92%;
   padding: 10px;
   padding-left: 6px;
   padding-right: 6px;
@@ -52,7 +52,7 @@ body {
 }
 .content_margin .content_sub_margin {
 	display: inline; 
-	margin-left: 15%; 
+    margin-left: 34%;
 	margin-top: 50px;
 }
 .ui.icon.menu.center.aligned.container {
@@ -380,8 +380,9 @@ div.buttons_manage_columns {
 	border: 2px solid gray;
 	padding-left: 8px;
 	padding-right: 8px;
-	padding-top: 6px;
+	padding-top: 5px;
 	padding-bottom: 4px;
+	margin-bottom: 1px;
 }
 
 .global_container .global_type, .editing_name_var, .global_container .span_value_variable {
@@ -437,4 +438,25 @@ div.buttons_manage_columns {
 }
 .all_functions {
 	margin-top: -5px;
-}
+}
+.only_in_frame {
+	position: absolute;
+    z-index: 9999;
+    width: 90px;
+    top: 5px;
+    left: 5px;
+    opacity: .6;
+}
+.only_in_frame:hover {
+	opacity: 1;
+}
+.only_in_frame:hover span {
+	display: block;
+}
+.only_in_frame span {
+	display: none;
+	margin-top: -5px;
+}
+.ui.container.main_title {
+	width: 85px;
+}

i18n/en/ui.json

@@ -69,5 +69,18 @@
   "text_teacher_test_case_input": "Input",
   "text_teacher_test_case_output": "Output",
   "text_teacher_test_case_actions": "Actions",
-  "text_teacher_test_case_add": "Add test cases"
+  "text_teacher_test_case_add": "Add test cases",
+  "tooltip_visual": "Visual programming",
+  "tooltip_textual": "Textual programming",
+  "tooltip_upload": "Upload code file",
+  "tooltip_download": "Download code file",
+  "tooltip_undo": "Undo",
+  "tooltip_redo": "Redo",
+  "tooltip_run": "Run program",
+  "tooltip_evaluate": "Evaluate program",
+  "tooltip_help": "Help",
+  "tooltip_add_global": "Add global variable",
+  "tooltip_minimize": "Hidde function elements",
+  "tooltip_console": "Open/Close console"
+
 }

i18n/es/ui.json

@@ -69,5 +69,17 @@
   "text_teacher_test_case_input": "Input",
   "text_teacher_test_case_output": "Output",
   "text_teacher_test_case_actions": "Actions",
-  "text_teacher_test_case_add": "Add test cases"
+  "text_teacher_test_case_add": "Add test cases",
+  "tooltip_visual": "Visual programming",
+  "tooltip_textual": "Textual programming",
+  "tooltip_upload": "Upload code file",
+  "tooltip_download": "Download code file",
+  "tooltip_undo": "Undo",
+  "tooltip_redo": "Redo",
+  "tooltip_run": "Run program",
+  "tooltip_evaluate": "Evaluate program",
+  "tooltip_help": "Help",
+  "tooltip_add_global": "Add global variable",
+  "tooltip_minimize": "Hidde function elements",
+  "tooltip_console": "Open/Close console"
 }

i18n/pt/ui.json

@@ -70,5 +70,17 @@
   "text_teacher_test_case_input": "Entrada",
   "text_teacher_test_case_output": "Saída",
   "text_teacher_test_case_actions": "Ações",
-  "text_teacher_test_case_add": "Adicionar caso de teste"
+  "text_teacher_test_case_add": "Adicionar caso de teste",
+  "tooltip_visual": "Programação visual",
+  "tooltip_textual": "Programação textual",
+  "tooltip_upload": "Upload de código fonte",
+  "tooltip_download": "Download do código fonte",
+  "tooltip_undo": "Desfazer",
+  "tooltip_redo": "Refazer",
+  "tooltip_run": "Executar o programa",
+  "tooltip_evaluate": "Avaliar o programa",
+  "tooltip_help": "Ajuda",
+  "tooltip_add_global": "Adicionar variável global",
+  "tooltip_minimize": "Ocultar os elementos da função",
+  "tooltip_console": "Abrir/fechar o terminal"
 }

index.html

@@ -41,49 +41,45 @@
                 <button class="ui button active visual_coding_button">Visual</button>
                 <button class="ui button textual_coding_button">Textual</button>
               </div>
-
-              <a class="ivprog_format_info">
-                <i class="circular inverted some-wrapping-div teal info icon small label ivprog_format_info popup"></i>
-              </a>
-              <div class="ui custom popup">
-                Choice how you prefer to develop. If disabled, teacher doesn't allow this change. <a href="#">See documentation about it.</a>
-              </div>
             </div>
           </div>
 
       </div>
-      
+    </div>
 
+    <div class="ui container main_title only_in_frame" style="display: none;">
+      <h2>iVProg</h2>
+      <span class="subtext">interactive coding</span>
     </div>
 
     <div class="ui raised container segment div_to_body">
 
       <div class="ui icon menu center aligned container" style="width: 438px; margin-top: -25px;">
-        <a class="item visual_coding_button" data-content="Testing interface">
+        <a class="item visual_coding_button">
           <i class="window maximize outline icon"></i>
         </a>
         <a class="item textual_coding_button">
           <i class="code icon"></i>
         </a>
-        <a class="item">
+        <a class="item upload_file_button">
           <i class="upload icon"></i>
         </a>
-        <a class="item">
+        <a class="item download_file_button">
           <i class="download icon"></i>
         </a>
         <a class="item undo_button disabled">
           <i class="undo icon"></i>
         </a>
-        <a class="item">
+        <a class="item redo_button">
           <i class="redo icon"></i>
         </a>
         <a class="item run_button">
           <i class="play icon"></i>
         </a>
-        <a class="item assessment">
+        <a class="item assessment assessment_button">
           <i class="check icon"></i>
         </a>
-        <a class="item">
+        <a class="item help_button">
           <i class="help icon"></i>
         </a>
       </div>
@@ -115,9 +111,10 @@
       <div class="ui one column container segment ivprog_textual_panel loading" style="display: none;">
         <textarea class="ivprog_textual_code" disabled></textarea>
       </div>
-      <div id='ivprog-term' class="six column wide" style="display: none">
+
+      <div id='ivprog-term' class="six column wide">
+        <div class="div_toggle_console"><i class="inverted terminal icon green button_toggle_console"></i></div>
       </div>
-      
     </div>
 
     </div>

js/iassign-integration-functions.js

@@ -152,6 +152,18 @@ $(document).ready(function() {
         //$('.resolucao').css("display","block");
         getiLMContent();
 
+
+        $( document ).ready(function() {
+            $('.div_to_body').mousemove(function(e) {
+                trackingMatrix.push(adCoords(e, 0));
+            });
+
+            $('.div_to_body').click(function(e) {
+                trackingMatrix.push(adCoords(e, 1));                    
+            });
+
+        });
+
     } else {
         // Caso não esteja em modo de resolução de atividade, a visualização no momento
         // é para a elaboração de atividade:
@@ -305,13 +317,6 @@ function adCoords(e, code){
 }
 
 $( document ).ready(function() {
-    $('.div_to_body').mousemove(function(e) {
-        trackingMatrix.push(adCoords(e, 0));
-    });
-
-    $('.div_to_body').click(function(e) {
-        trackingMatrix.push(adCoords(e, 1));                    
-    });
 
     if (inIframe()) {
         orderIcons();
@@ -321,6 +326,8 @@ $( document ).ready(function() {
 
 function orderIcons() {
     $('.ui.one.column.doubling.stackable.grid.container').css('display', 'none');
+    $('.only_in_frame').css('display', 'block');
+    
 }
 
 

js/io/domConsole.js

@@ -17,6 +17,7 @@ export class DOMConsole {
   constructor (elementID) {
     this.input = null;
     this.needInput = false;
+    this.termDiv = null;
     this.anyKey = false;
     this.parent = $(elementID);
     this.setup();
@@ -46,18 +47,18 @@ export class DOMConsole {
   }
 
   _setupDom () {
-    const termDiv = $("<div></div>");
-    termDiv.addClass("ivprog-term-div");
+    this.termDiv = $("<div></div>");
+    this.termDiv.addClass("ivprog-term-div");
     this.input = $('<input text="type">')
     this.input.addClass("ivprog-term-input");
-    termDiv.append(this.input);
-    this.parent.append(termDiv);
+    this.termDiv.append(this.input);
+    this.parent.append(this.termDiv);
   }
 
   notifyListeners (text) {
     this.inputListeners.forEach(resolve => resolve(text));
     this.inputListeners.splice(0, this.inputListeners.length);
-    this.needInput = false;
+    this.hideInput();
     this.anyKey = false;
   }
 
@@ -79,6 +80,13 @@ export class DOMConsole {
     textDiv.addClass(divClass);
     textDiv.append(text);
     textDiv.insertBefore(this.input);
+    this.scrollTerm();
+  }
+
+  scrollTerm () {
+    this.termDiv.animate({
+      scrollTop: this.termDiv.prop('scrollHeight')
+    }, 0);
   }
 
   getClassForType (type) {
@@ -99,11 +107,21 @@ export class DOMConsole {
     this.parent.empty();
   }
 
+  showInput () {
+    this.needInput = true;
+    this.input.show();
+    this.input.focus();
+  }
+
+  hideInput () {
+    this.needInput = false;
+    this.input.hide();
+  }
+
   requestInput (callback, anyKey = false) {
     this.inputListeners.push(callback);
     this.anyKey = anyKey;
-    this.input.focus();
-    this.needInput = true;
+    this.showInput();
   }
 
   sendOutput (text) {

js/main.js

@@ -1,7 +1,9 @@
 import { runner } from './runner';
 import { initVisualUI } from './visualUI/functions';
-import { LocalizedStrings, StringTypes} from './services/localizedStringsService';
+import { LocalizedStrings} from './services/localizedStringsService';
+import line_i18n from 'line-i18n';
 
+const StringTypes = line_i18n.StringTypes;
 export {
   runner,
   initVisualUI,

js/visualUI/algorithm.js

@@ -16,7 +16,6 @@ import { LanguageService } from '../services/languageService';
 var block_render = false;
 
 export function renderAlgorithm () {
-
 	if (block_render) {
 		return;
 	}
@@ -25,6 +24,9 @@ export function renderAlgorithm () {
  	$('.all_functions').children().off();
 	$('.all_functions').empty();
 
+	$('.list_globals').children().off();
+	$('.list_globals').empty();	
+
 	for (var i = 0; i < window.program_obj.functions.length; i++) {
 		FunctionsManagement.renderFunction(window.program_obj.functions[i]);
 	}

js/visualUI/functions.js

@@ -227,8 +227,8 @@ export function renderFunction (function_obj) {
     + (function_obj.is_hidden ? ' <div class="function_area" style="display: none;"> ' : ' <div class="function_area"> ')
 
     + '<div class="ui top attached segment variables_list_div">'
-    /*+ renderVariables(function_obj, sequence)*/
     + '</div>'
+
     + '<div class="ui bottom attached segment commands_list_div" id="function_drag_cmd_">';
 
   appender += '</div>';
@@ -264,6 +264,14 @@ export function renderFunction (function_obj) {
     CommandsManagement.renderCommand(function_obj.commands[j], $(appender.find('.commands_list_div')[0]), 3, function_obj);
   }
 
+
+  $('.minimize_function_button').popup({
+    content : LocalizedStrings.getUI("tooltip_minimize"),
+    delay: {
+      show: 750,
+      hide: 0
+    }
+  });
 }
 
 
@@ -295,6 +303,10 @@ export function initVisualUI () {
     runCodeAssessment();
     is_iassign = true;
   });
+
+  $('.div_toggle_console').on('click', () => {
+    toggleConsole();
+  });
 }
 
 var is_iassign = false;
@@ -305,17 +317,92 @@ $( document ).ready(function() {
     renderFunction(program.functions[i]);
   }
 
-  $('.div_to_body div a').popup({
+  var time_show = 750;
+  $('.visual_coding_button').popup({
+    content : LocalizedStrings.getUI("tooltip_visual"),
     delay: {
-      show: 750,
+      show: time_show,
+      hide: 0
+    }
+  });
+  $('.textual_coding_button').popup({
+    content : LocalizedStrings.getUI("tooltip_textual"),
+    delay: {
+      show: time_show,
+      hide: 0
+    }
+  });
+  $('.upload_file_button').popup({
+    content : LocalizedStrings.getUI("tooltip_upload"),
+    delay: {
+      show: time_show,
+      hide: 0
+    }
+  });
+  $('.download_file_button').popup({
+    content : LocalizedStrings.getUI("tooltip_download"),
+    delay: {
+      show: time_show,
+      hide: 0
+    }
+  });
+  $('.undo_button').popup({
+    content : LocalizedStrings.getUI("tooltip_undo"),
+    delay: {
+      show: time_show,
+      hide: 0
+    }
+  });
+  $('.redo_button').popup({
+    content : LocalizedStrings.getUI("tooltip_redo"),
+    delay: {
+      show: time_show,
+      hide: 0
+    }
+  });
+  $('.run_button').popup({
+    content : LocalizedStrings.getUI("tooltip_run"),
+    delay: {
+      show: time_show,
+      hide: 0
+    }
+  });
+  $('.assessment_button').popup({
+    content : LocalizedStrings.getUI("tooltip_evaluate"),
+    delay: {
+      show: time_show,
+      hide: 0
+    }
+  });
+  $('.help_button').popup({
+    content : LocalizedStrings.getUI("tooltip_help"),
+    delay: {
+      show: time_show,
+      hide: 0
+    }
+  });
+  $('.add_global_button').popup({
+    content : LocalizedStrings.getUI("tooltip_add_global"),
+    delay: {
+      show: time_show,
+      hide: 0
+    }
+  });
+  $('.div_toggle_console').popup({
+    content : LocalizedStrings.getUI("tooltip_console"),
+    delay: {
+      show: time_show,
       hide: 0
     }
   });
 
-});
 
 
+});
+
 function runCodeAssessment () {
+  toggleConsole(true);
+
   window.studentGrade = null;
   studentTemp = null;
   const strCode = CodeManagement.generate();
@@ -339,6 +426,8 @@ function runCodeAssessment () {
 
 
 function runCode () {
+  toggleConsole(true);
+
   const strCode = CodeManagement.generate();
   if (strCode == null) {
     return;
@@ -353,11 +442,14 @@ function runCode () {
     const proc = new IVProgProcessor(data);
     proc.registerInput(domConsole);
     proc.registerOutput(domConsole);
-    
+    $("#ivprog-term").addClass('ivprog-term-active');
+
     proc.interpretAST().then( _ => {
       domConsole.info("Programa executado com sucesso!");
+      $("#ivprog-term").removeClass('ivprog-term-active');
     }).catch(err => {
       domConsole.err(err.message);
+      $("#ivprog-term").removeClass('ivprog-term-active');
     }) 
   } catch (error) {
     domConsole.err(error.message);
@@ -366,6 +458,29 @@ function runCode () {
   
 }
 
+function toggleConsole (is_running) {
+
+  if (is_running) {
+    $('.ivprog-term-div').css('display', 'block');
+    $('#ivprog-term').css('min-height', '160px');
+    $('#ivprog-term').css('margin-top', '-170px');
+    return;
+  }
+
+  if ($('#ivprog-term').css('min-height') == '160px') {
+    // esconder
+    $('.ivprog-term-div').css('display', 'none');
+    $('#ivprog-term').css('min-height', '0');
+    $('#ivprog-term').css('margin-top', '-30px');
+    $('#ivprog-term').css('padding', '5px');
+  } else {
+    // mostrar
+    $('.ivprog-term-div').css('display', 'block');
+    $('#ivprog-term').css('min-height', '160px');
+    $('#ivprog-term').css('margin-top', '-170px');
+  }
+}
+
 function waitToCloseConsole () {
   domConsole.info("Aperte qualquer tecla para fechar...");
   const p = new Promise((resolve, _) => {

js/visualUI/variables.js

@@ -92,7 +92,7 @@ export function renderVariable (function_container, new_var, function_obj) {
   	} else {
   		element += '<div class="text">' + LocalizedStrings.getUI(new_var.type.toLowerCase()) + '</div>';
   	}
-	element += '<i class="dropdown icon"></i><div class="menu">';
+	element += '<div class="menu">';
 
 	for (var tm in Types) {
   		if (tm == Types.VOID.toUpperCase()) {
@@ -106,7 +106,6 @@ export function renderVariable (function_container, new_var, function_obj) {
   			continue;
   		}
   		element += '<div class="item">'
-	    	+ '<i class="dropdown icon"></i>'
 	    	+  LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())
 	      	+  '<div class="menu">'
 		        + '<div class="item" data-text="'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())+' [ ] " data-type="'+tm+'" data-dimensions="1">[ ]</div>'
@@ -117,7 +116,7 @@ export function renderVariable (function_container, new_var, function_obj) {
 
     element += '</div></div> ';
 
-    element += '<span class="span_name_variable enable_edit_name_variable">'+new_var.name+'</span> <i class="icon small pencil alternate enable_edit_name_variable"></i>';
+    element += '<span class="span_name_variable enable_edit_name_variable">'+new_var.name+'</span> ';
 
 	element += ' = <div class="ui div_valor_var">'+new_var.value+'</div>';    
 

webpack.config.js

@@ -3,7 +3,7 @@ var webpack = require('webpack');
 module.exports = {
     entry: './js/main.js',
     mode: 'development',
-    watch: false,
+    watch: true,
     output: {
         path: path.resolve(__dirname, 'build'),
         filename: 'ivprog.bundle.js',