feat: add a page for exclusively viewing of a shared program (hedyorg…

…#534)

Add a page at `/hedy/<id>/view` which allows looking at a program
and running it without being in the full editor environment.

app.py

@@ -523,6 +523,40 @@ def index(level, step):
         loaded_program=loaded_program,
         adventure_name=adventure_name)
 
+@app.route('/hedy/<id>/view', methods=['GET'])
+def view_program(id):
+    g.lang = requested_lang()
+    g.prefix = '/hedy'
+
+    result = db_get ('programs', {'id': id})
+    if not result:
+        return 'No such program', 404
+
+    # Default to the language of the program's author (but still respect)
+    # the switch if given.
+    lang = request.args.get("lang")
+    if not lang:
+        lang = result['lang']
+
+    arguments_dict = {}
+    arguments_dict['program_id'] = id
+    arguments_dict['page_title'] = f'{result["name"]} – Hedy'
+    arguments_dict['level'] = result['level']  # Necessary for running
+    arguments_dict['loaded_program'] = result
+    arguments_dict['editor_readonly'] = True
+    arguments_dict['show_edit_button'] = True
+
+    # Everything below this line has nothing to do with this page and it's silly
+    # that every page needs to put in so much effort to re-set it
+    arguments_dict['lang'] = lang
+    arguments_dict['menu'] = render_main_menu('view')
+    arguments_dict['auth'] = TRANSLATIONS.data [lang] ['Auth']
+    arguments_dict['username'] = current_user(request) ['username'] or None
+    arguments_dict.update(**TRANSLATIONS.get_translations(lang, 'ui'))
+
+    return render_template("view-program-page.html", **arguments_dict)
+
+
 @app.route('/onlinemasters', methods=['GET'], defaults={'level': 1, 'step': 1})
 @app.route('/onlinemasters/<int:level>', methods=['GET'], defaults={'step': 1})
 @app.route('/onlinemasters/<int:level>/<int:step>', methods=['GET'])

coursedata/texts/de.yaml

@@ -7,6 +7,7 @@ ui:
     video_title: "Videos"
     run_code_button: "Programm ausführen"
     save_code_button: "Programm speichern"
+    edit_code_button: "Edit code"
     share_code_button: "Save & share code"
     regress_button: "Gehe zurück zu Stufe"
     advance_button: "Gehe zu Stufe"
@@ -22,6 +23,7 @@ ui:
     switch_to_adventures: "Gehe zu Abenteuern"
     switch_to_another_adventure: "Wähle ein anderes Abenteuer"
     commands_title: "Kommandos"
+    by: "durch"
 ClientErrorMessages:
     Transpile_warning: "Warnung!"
     Transpile_error: "Wir konnten Ihr Hedy-Programm nicht lesen."

coursedata/texts/el.yaml

@@ -7,6 +7,7 @@ ui:
     video_title: 'Βίντεο'
     run_code_button: 'Εκτέλεσε κώδικα'
     save_code_button: 'Αποθήκευσε κώδικα'
+    edit_code_button: "Edit code"
     share_code_button: "Save & share code"
     regress_button: 'Επιστροφή στο επίπεδο'
     advance_button: 'Πήγαινε στο επίπεδο'
@@ -22,6 +23,7 @@ ui:
     switch_to_adventures: Πήγαινε σε περιπέτειες
     switch_to_another_adventure: Επίλεξε μια διαφορετική περιπέτεια
     commands_title: Εντολές
+    by: "by"
 ClientErrorMessages:
     Transpile_warning: 'Προσοχή!'
     Transpile_error: 'Δεν μπορούμε να εκτελέσουμε το πρόγραμμά σου.'

coursedata/texts/en.yaml

@@ -7,6 +7,7 @@ ui:
     video_title: "Videos"
     run_code_button: "Run code"
     save_code_button: "Save code"
+    edit_code_button: "Edit code"
     share_code_button: "Save & share code"
     regress_button: "Go back to level"
     advance_button: "Go to level"
@@ -22,6 +23,7 @@ ui:
     switch_to_adventures: "Go to adventures"
     switch_to_another_adventure: "Choose a different adventure"
     commands_title: "Commands"
+    by: "by"
 ClientErrorMessages:
     Transpile_warning: "Warning!"
     Transpile_error: "We can't run your program."

coursedata/texts/es.yaml

@@ -6,6 +6,7 @@ ui:
     contact: "Contacto"
     video_title: "Videos"
     run_code_button: "Ejecutar código"
+    edit_code_button: "Editar código"
     save_code_button: "Grabar código"
     share_code_button: "Grabar & compartir código"
     regress_button: "Regresar al nivel"
@@ -22,6 +23,7 @@ ui:
     switch_to_adventures: "Ir a aventuras"
     switch_to_another_adventure: "Elegir otra aventura"
     commands_title: "Comandos"
+    by: "por"
 ClientErrorMessages:
     Transpile_warning: "Atención!"
     Transpile_error: "El servidor no puede traducir este programa."

coursedata/texts/fr.yaml

@@ -7,6 +7,7 @@ ui:
     video_title: "Vidéos"
     run_code_button: "Exécuter le code"
     save_code_button: "Save code"
+    edit_code_button: "Edit code"
     share_code_button: "Save & share code"
     regress_button: "Retourner au niveau"
     advance_button: "Aller au niveau"
@@ -22,6 +23,7 @@ ui:
     switch_to_adventures: "Aller aux aventures"
     switch_to_another_adventure: "Choose a different adventure"
     commands_title: "Commandos"
+    by: "per"
 ClientErrorMessages:
     Transpile_warning: "Attention!"
     Transpile_error: "Le serveur n’a pas pu traduire ce code."

coursedata/texts/hu.yaml

@@ -7,6 +7,7 @@ ui:
     video_title: "Videók"
     run_code_button: "Kód futtatása"
     save_code_button: "Kód mentése"
+    edit_code_button: "Edit code"
     share_code_button: "Save & share code"
     regress_button: "Menj vissza: szint"
     advance_button: "Menj tovább: szint"
@@ -24,6 +25,7 @@ ui:
     switch_to_another_adventure: |
         Válassz egy másik kalandot
     commands_title: "Parancsok"
+    by: "by"
 ClientErrorMessages:
     Transpile_warning: "Vigyázat!"
     Transpile_error: "Nem tudjuk futtatni a kódodat."

coursedata/texts/it.yaml

@@ -7,6 +7,7 @@ ui:
     video_title: "Video"
     run_code_button: "Eseguire codice"
     save_code_button: "Salva codice"
+    edit_code_button: "Edit code"
     share_code_button: "Save & share code"
     regress_button: "Torna a livello"
     advance_button: "Vai a livello"
@@ -22,6 +23,7 @@ ui:
     switch_to_adventures: "Vai alle avventure"
     switch_to_another_adventure: "Choose a different adventure"
     commands_title: "Commandos"
+    by: "by"
 ClientErrorMessages:
     Transpile_warning: "Attenzione!"
     Transpile_error: "Non possiamo eseguire il tuo programma."

coursedata/texts/nl.yaml

@@ -8,6 +8,7 @@ ui:
     try_button: "Probeer"
     run_code_button: "Voer de code uit"
     save_code_button: "Code opslaan"
+    edit_code_button: "Pas de code aan"
     share_code_button: "Code opslaan & delen"
     regress_button: "Ga terug naar level"
     advance_button: "Ga naar level"
@@ -22,6 +23,7 @@ ui:
     switch_to_adventures: "Ga naar avonturenmodus"
     switch_to_another_adventure: "Kies een ander avontuur"
     commands_title: "Commando's"
+    by: "door"
 ClientErrorMessages:
     Transpile_warning: "Let op!"
     Transpile_error: "We konden je code niet goed lezen."

coursedata/texts/pt_br.yaml

@@ -7,6 +7,7 @@ ui:
     video_title: "Vídeos"
     run_code_button: "Executar código"
     save_code_button: "Save code"
+    edit_code_button: "Edit code"
     share_code_button: "Save & share code"
     regress_button: "Voltar para o nível"
     advance_button: "Ir para o nível"
@@ -22,6 +23,7 @@ ui:
     switch_to_adventures: "Ir a aventuras"
     switch_to_another_adventure: "Choose a different adventure"
     commands_title: "Comandos"
+    by: "by"
 ClientErrorMessages:
     Transpile_warning: "Aviso!"
     Transpile_error: "O servidor não pode traduzir este programa."

coursedata/texts/sw.yaml

@@ -7,6 +7,7 @@ ui:
   video_title: "Videos"
   run_code_button: "Endesha programu"
   save_code_button: "Hifadhi programu"
+  edit_code_button: "Edit code"
   share_code_button: "Save & share code"
   regress_button: "Rudi kiwango cha"
   advance_button: "Enda kiwango cha"
@@ -22,6 +23,7 @@ ui:
   switch_to_adventures: "Go to adventures"
   switch_to_another_adventure: "Choose a different adventure"
   commands_title: "Commands"
+  by: "by"
 ClientErrorMessages:
   Transpile_warning: "Onyo!"
   Transpile_error: "Hatuwezi kuendesha programu yako."

coursedata/texts/zh.yaml

@@ -7,6 +7,7 @@ ui:
     video_title: "视频"
     run_code_button: "运行代码"
     save_code_button: "保存代码"
+    edit_code_button: "Edit code"
     share_code_button: "Save & share code"
     regress_button: "返回级别"
     advance_button: "前往级别"
@@ -22,6 +23,7 @@ ui:
     switch_to_adventures: "Go to adventures"
     switch_to_another_adventure: "Choose a different adventure"
     commands_title: "Commands"
+    by: "by"
 ClientErrorMessages:
     Transpile_warning: "警告!"
     Transpile_error: "服务器无法将这个Hedy程序翻译成Python程序."

static/js/app.js

@@ -1,14 +1,25 @@
 (function() {
+  // A bunch of code expects a global "State" object. Set it here if not 
+  // set yet.
+  if (!window.State) {
+    window.State = {};
+  }
 
   // If there's no #editor div, we're requiring this code in a non-code page.
   // Therefore, we don't need to initialize anything.
-  if (! $ ('#editor').length) return;
+  const $editor = $('#editor');
+  if (!$editor.length) return;
 
   // *** EDITOR SETUP ***
   // We expose the editor globally so it's available to other functions for resizing
   var editor = window.editor = ace.edit("editor");
   editor.setTheme("ace/theme/monokai");
 
+  // Editor could have been initialized as readonly
+  if ($editor.data('readonly')) {
+    editor.setReadOnly(true);
+  }
+
   // a variable which turns on(1) highlighter or turns it off(0)
   var highlighter = 0;
 
@@ -76,8 +87,8 @@
   // Load existing code from session, if it exists
   const storage = window.sessionStorage;
   if (storage) {
-    const levelKey = $('#editor').data('lskey');
-    const loadedProgram = $('#editor').data('loaded-program');
+    const levelKey = $editor.data('lskey');
+    const loadedProgram = $editor.data('loaded-program');
 
     // On page load, if we have a saved program and we are not loading a program by id, we load the saved program
     if (loadedProgram !== 'True' && storage.getItem(levelKey)) {
@@ -217,7 +228,7 @@ window.saveit = function saveit(level, lang, name, code, cb) {
     if (! window.auth.profile) {
        if (! confirm (window.auth.texts.save_prompt)) return;
        // If there's an adventure_name, we store it together with the level, because it won't be available otherwise after signup/login.
-       if (window.State.adventure_name) level = [level, window.State.adventure_name];
+       if (window.State && window.State.adventure_name) level = [level, window.State.adventure_name];
        localStorage.setItem ('hedy-first-save', JSON.stringify ([level, lang, name, code]));
        window.location.pathname = '/login';
        return;
@@ -284,6 +295,10 @@ window.saveit = function saveit(level, lang, name, code, cb) {
   }
 }
 
+function viewProgramLink(programId) {
+  return window.location.origin + '/hedy/' + programId + '/view';
+}
+
 window.share_program = function share_program (level, lang, id, Public, reload) {
   if (! window.auth.profile) return alert (window.auth.texts.must_be_logged);
 
@@ -303,11 +318,11 @@ window.share_program = function share_program (level, lang, id, Public, reload)
         $ ('#okbox .caption').html (window.auth.texts.save_success);
         $ ('#okbox .details').html (Public ? window.auth.texts.share_success_detail : window.auth.texts.unshare_success_detail);
         // If we're sharing the program, copy the link to the clipboard.
-        if (Public) window.copy_to_clipboard (window.location.origin + '/hedy/' + level + '/' + id, true);
+        if (Public) window.copy_to_clipboard (viewProgramLink(id), true);
       }
       else {
         // If we're sharing the program, copy the link to the clipboard.
-        if (Public) window.copy_to_clipboard (window.location.origin + '/hedy/' + level + '/' + id, true);
+        if (Public) window.copy_to_clipboard (viewProgramLink(id), true);
         alert (Public ? window.auth.texts.share_success_detail : window.auth.texts.unshare_success_detail);
       }
       if (reload) setTimeout (function () {location.reload ()}, 1000);
@@ -502,23 +517,23 @@ var error = {
   hide() {
     $('#errorbox').hide();
     $('#warningbox').hide();
-    if ($ ('#editor').length) editor.resize ();
+    if ($('#editor').length) editor.resize ();
   },
 
   showWarning(caption, message) {
     $('#warningbox .caption').text(caption);
     $('#warningbox .details').text(message);
     $('#warningbox').show();
-    if ($ ('#editor').length) editor.resize ();
+    if ($('#editor').length) editor.resize ();
   },
 
   show(caption, message) {
     $('#errorbox .caption').text(caption);
     $('#errorbox .details').text(message);
     $('#errorbox').show();
-    if ($ ('#editor').length) editor.resize ();
+    if ($('#editor').length) editor.resize ();
   }
-};
+}
 
 function queryParam(param) {
   const urlParams = new URLSearchParams(window.location.search);
@@ -534,4 +549,4 @@ function buildUrl(url, params) {
     }
   }
   return url + (clauses.length > 0 ? '?' + clauses.join('&') : '');
-}
+}

static/js/tabs.js

@@ -78,5 +78,6 @@ $(function() {
 
   // If we're opening an adventure from the beginning (either through a link to /hedy/adventures or through a saved program for an adventure), we click on the relevant tab.
   // We click on `level` to load a program associated with level, if any.
-  $('[data-tab="t-' + (window.State.adventure_name || 'level') + '"]') [0].click ();
+  const adventureName = window.State && window.State.adventure_name;
+  $('[data-tab="t-' + (adventureName || 'level') + '"]').click ();
 });

tailwind/styles.css

@@ -42,6 +42,7 @@ strong {
 
 .btn-shape {
   @apply font-bold py-2 px-4 border-b-4 rounded;
+  display: inline-block;
 }
 
 .green-btn {
@@ -144,7 +145,7 @@ code {
 
 .btn {
   @apply btn-shape;
-  @apply bg-blue-500 text-white border-blue-700;
+  @apply bg-blue-500 text-white border-blue-700 no-underline;
 }
 
 .btn:hover {