Change language for all available

hugvey/central_command.py

@@ -502,7 +502,7 @@ class HugveyState(object):
         
     def isAvailable(self):
         if self.command.config['story']['loop']:
-            if self.status == self.STATE_RUNNING and self.story:
+            if (self.status == self.STATE_RUNNING or self.status == self.STATE_PAUSE) and self.story:
                 if self.story.currentMessage:
                     if self.story.currentMessage.id == self.story.startMessage.id:
                         return True
@@ -639,6 +639,9 @@ class HugveyState(object):
 
             if event['event'] == 'change_language':
                 self.setLanguage(event['lang_code'])
+            if event['event'] == 'change_language_if_available':
+                if self.isAvailable() or self.status == self.STATE_BLOCKED:
+                    self.setLanguage(event['lang_code'])
             if event['event'] == 'change_light':
                 self.setLightId(event['light_id'])
             if event['event'] == 'change_light_status':

hugvey/panopticon.py

@@ -69,6 +69,8 @@ def getWebSocketHandler(central_command):
                     self.msgFinish(msg['hugvey'])
                 elif msg['action'] == 'change_language':
                     self.msgChangeLanguage(msg['hugvey'], msg['lang_code'])
+                elif msg['action'] == 'change_language_for_available':
+                    self.msgChangeLanguageForAllAvailableHugveys(msg['lang_code'])
                 elif msg['action'] == 'change_light':
                     self.msgChangeLightId(msg['hugvey'], int(msg['light_id']))
                 elif msg['action'] == 'change_light_status':
@@ -137,6 +139,10 @@ def getWebSocketHandler(central_command):
         def msgChangeLanguage(self, hv_id, lang_code):
             central_command.hugveys[hv_id].eventQueue.put_nowait({'event': 'change_language', 'lang_code': lang_code})
         
+        def msgChangeLanguageForAllAvailableHugveys(self, lang_code):
+            for hv_id in central_command.hugveys:
+                central_command.hugveys[hv_id].eventQueue.put_nowait({'event': 'change_language_if_available', 'lang_code': lang_code})
+        
         def msgSetLoopTime(self, loop_time):
             parts = loop_time.split(":")
             if len(parts) == 2:

www/css/styles.css

@@ -1,3 +1,19 @@
+@-webkit-keyframes sk-scaleout {
+  0% {
+    -webkit-transform: scale(0); }
+  100% {
+    -webkit-transform: scale(1);
+    opacity: 0; } }
+
+@keyframes sk-scaleout {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0); }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 0; } }
+
 body {
   font-family: "Noto Sans", sans-serif;
   margin: 0;
@@ -67,9 +83,23 @@ img.icon {
     height: 200px;
     border: solid 1px;
     box-sizing: border-box;
-    position: relative; }
+    position: relative;
+    padding: 5px; }
     #status > div#overview {
-      width: 100% / 3; }
+      width: calc(100% / 3 * 2); }
+      #status > div#overview #languages {
+        color: #ccc;
+        list-style: none;
+        padding: 0; }
+        #status > div#overview #languages .loading:after {
+          display: inline-block;
+          content: '';
+          width: 15px;
+          height: 15px;
+          background-color: white;
+          border-radius: 100%;
+          -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
+          animation: sk-scaleout 1.0s infinite ease-in-out; }
   #status .counts dd, #status .counts dt {
     display: inline-block;
     width: 30px;

www/index.html

@@ -25,9 +25,12 @@
 
 				<ul id='languages'>
 					<li v-for="lang in languages" :title="lang.file"
-						:id="'lang-' + lang.code" class="btn lang--btn"
+						:id="'lang-' + lang.code">
-						@click="loadNarrative(lang.code, lang.file)"><span
+						<span :class="['flag-icon', lang.code]"></span>
-						:class="['flag-icon', lang.code]"></span> {{lang.code}}</li>
+						{{lang.code}}:
+						<span class='edit btn lang--btn' @click="loadNarrative(lang.code, lang.file)">Edit</span>
+						<span :id="'change-lang-' + lang.code" class='switch btn lang--btn' @click="changeLanguageForAvailable(lang.code)">Switch free</span>
+					</li>
 				</ul>
 
 			</div>

www/js/hugvey_console.js

@@ -35,6 +35,13 @@ class Panopticon {
 	                    return panopticon.loadNarrative( code, file );
                 	}
                 },
+                changeLanguageForAvailable: function(code){
+                	console.log('TODO: set loader icon for 3 sec', this);
+                	panopticon.send( { action: 'change_language_for_available', lang_code: code } );
+                	let el = document.getElementById("change-lang-"+code);
+                	el.classList.add('loading');
+                	setTimeout(function(){el.classList.remove('loading');}, 3000);
+                },
                 block: function(hv) {
                 	hv.status = "loading";
                     return panopticon.block(hv.id);

www/scss/styles.scss

@@ -1,6 +1,26 @@
 $status_width: 380px;
 $status_width_open: 860px;
 
+
+@-webkit-keyframes sk-scaleout {
+  0% { -webkit-transform: scale(0) }
+  100% {
+    -webkit-transform: scale(1.0);
+    opacity: 0;
+  }
+}
+
+@keyframes sk-scaleout {
+  0% { 
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 100% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+    opacity: 0;
+  }
+}
+	
 body{
 	font-family: "Noto Sans", sans-serif;
 	margin: 0;
@@ -94,9 +114,27 @@ img.icon{
 	    border: solid 1px;
 	    box-sizing: border-box;
 	    position: relative;
+	    padding: 5px;
 	    
 	    &#overview{
-	    	width: 100% / 3;
+	    	width: calc(100% / 3 * 2);
+	    	#languages{
+	    		color:#ccc;
+	    		list-style: none;padding:0;
+	    		
+	    		.loading:after {
+					display:inline-block;
+					content: '';
+				  width: 15px;
+				  height: 15px;
+				  background-color: white;
+				
+				  border-radius: 100%;  
+				  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
+				  animation: sk-scaleout 1.0s infinite ease-in-out;
+				}
+
+	    	}
 	    }
 	}