Customizable icons. Commited the JS file.

README.md

@@ -21,21 +21,23 @@ TODO:
 	- exercise 3: Ambiguity in order of operations
 	- exercise 4: Select task, before something is shown
 	- exercise 6: UI specific words, like 'click'
+	- Slide 20: With option task, the first choises should not be application tasks
 
 
 Some things I learned:
 ----------------------
 
 - Scala is a very smooth programming language. But has to many features.
-
 - Maven dependencies just seem to work.
-
 - Java-FX has no descend way to render SVG
-	When using a webview, assets with a relative path are not loaded.
-
+	- When using a webview, assets with a relative path are not loaded.
 - Using el.innerHTML is very fast. I use it to load the SVG in the html page, to be less dependent on platform specific code.
-
-- Sync requests don't seem that bad when the site is always loading on localhost. A request takes ~10ms~.
-
+- Sync requests don't seem that bad when the site is always loading on localhost. A request takes ~ 10ms.
 - The backend (CrudServer) is very simple backend that gives the user all file permissions in the folder where it operates.
 For applications running locally, this isn't a security problem. For online applications, this should only be used in small teams with people you trust.
+
+
+Building
+--------
+CrudServer and ctt-editor-fastopt.js need to be build separatly.
+Copy them to the correct location and commit to save a new version.

build.sbt

@@ -24,3 +24,4 @@ libraryDependencies += "org.scalafx" %% "scalafx" % "8.0.144-R12"
 
 // https://mvnrepository.com/artifact/com.typesafe.play/play-json
 libraryDependencies += "com.typesafe.play" %%% "play-json" % "2.7.0-RC2"
+

ctt-editor-files/deactivation_test.txt

@@ -1,11 +1,11 @@
 deactivation_test
-	A
+	A user
 	>>
 	B
 	[>
-	C
+	C application
 	>>
 	D
-		lol
+		E
 		[>
-		lolz
+		F abstraction

ctt-editor-files/example2.txt

@@ -0,0 +1,15 @@
+Handle Agenda
+	Make Appointment*
+		DefineDate
+			ShowCalendar*
+			|[]|
+			EnterDate
+				EnterDay
+				|||
+				EnterMonth
+				|||
+				EnterYear
+		[>
+		EnterAppointmentTopic
+	[>
+	Close

ctt-editor-files/from_internet_AccesATM.txt

@@ -0,0 +1,27 @@
+AccesATM https://www.researchgate.net/figure/Example-of-task-model-in-ConcurTaskTrees_fig1_2413967
+	EnableAccess
+		InserCard
+		>>
+		RequirePassword
+		>>
+		InsertPassword
+	>>
+	Access*
+		WithdrawCash
+			SelectWithdrawn
+			>>
+			ShowPossibleAmounts
+			[]>>
+			DecideAmount user
+			[]>>
+			SelectAmount
+			[]>>
+			ProvideCash
+			[]>>
+			Checkcash
+		[]
+		DepositCash
+		[]
+		GetInformation
+	[>
+	CloseAccess

src/main/scala/CttEditor.scala

@@ -90,14 +90,14 @@ object CttEditor {
       cttMake.removeAttribute("hidden")
   }
 
+
   private def makeNewCtt(evt: Event): Unit = {
     var newCttName = cttFilter.value
     if (!newCttName.endsWith(".txt"))
       newCttName += ".txt"
 
     {
       val oReq = new XMLHttpRequest()
-      //oReq.addEventListener("load", fileUploaded)
       oReq.open("POST", "../ctt-editor-files/" + newCttName, async = false)
       oReq.setRequestHeader("file_content", URIUtils.encodeURI("")) // empty file
       oReq.send()
@@ -114,10 +114,14 @@ object CttEditor {
     oReq.send()
   }
 
+  var wantToUpladCtt = false
+  var cttUploadingInProccess = false
+
   def cttChanged(evt: Event): Unit = {
     try {
       cttMessage.innerHTML = ""
 
+      // Set UI state
       val ctt_code = cttArea.value
       val ctt = StaticUtil.linear_parse_ctt(ctt_code)
       if (cttNormalize.checked)
@@ -127,30 +131,70 @@ object CttEditor {
         StaticUtil.normalise_ctt(ctt)
       cttEts.innerHTML = StaticUtil.ctt_to_enabled_task_sets(ctt).toString.replace("\n", "<br/>\n")
 
-      val oReq = new XMLHttpRequest()
-      oReq.addEventListener("load", fileUploaded)
-      oReq.addEventListener("error", fileUploadFailed);
-      oReq.open("POST", "../ctt-editor-files/" + cttFiles.value) //, async = false)
-      oReq.setRequestHeader("file_content", URIUtils.encodeURI(ctt_code))
-      oReq.send()
 
-      println("cttChanged and was valid")
+      wantToUpladCtt = true
+      cttUploadingBeatingHearth()
     } catch {
       case (e: Throwable) => {
         cttMessage.innerHTML = e.getMessage
       }
     }
   }
 
-  def fileUploaded(evt: Event) = {
+  def cttUploadingBeatingHearth() = {
+    if (wantToUpladCtt) {
+      if (cttUploadingInProccess) {
+        // Wait to next 'hearthbeat'
+      } else {
+        try {
+          cttMessage.innerHTML = ""
+
+          // Set UI state
+          val ctt_code = cttArea.value
+          val ctt = StaticUtil.linear_parse_ctt(ctt_code)
+          if (cttNormalize.checked)
+            StaticUtil.normalise_ctt(ctt)
+          cttHolder.innerHTML = StaticUtil.ctt_code_to_svg(ctt)
+          if (!cttNormalize.checked)
+            StaticUtil.normalise_ctt(ctt)
+          cttEts.innerHTML = StaticUtil.ctt_to_enabled_task_sets(ctt).toString.replace("\n", "<br/>\n")
+
+
+          val oReq = new XMLHttpRequest()
+          oReq.addEventListener("load", fileUploadedSucces)
+          oReq.addEventListener("error", fileUploadFailed)
+          oReq.open("POST", "../ctt-editor-files/" + cttFiles.value) //, async = false)
+          oReq.setRequestHeader("file_content", URIUtils.encodeURI(ctt_code))
+          oReq.send()
+          cttUploadingInProccess = true
+
+          wantToUpladCtt = false
+          println("cttChanged and was valid")
+        } catch {
+          case (e: Throwable) => {
+            cttMessage.innerHTML = e.getMessage
+          }
+        }
+      }
+    }
+  }
+
+  def fileUploaded_delayed():Unit = {
+    cttUploadingInProccess = false
+    cttUploadingBeatingHearth()
+  }
+
+  def fileUploadedSucces(evt: Event) = {
     cttMessage.innerHTML = ""
+    dom.window.setTimeout(() => fileUploaded_delayed(), 500) // Short delay to ba safe on slower backends
   }
 
   def fileUploadFailed(evt: Event) = {
     if (dom.window.location.protocol == "file:")
       cttMessage.innerHTML = "CTT upload failed. <br/>This app should be accesed trough a webserver, not as a plain HTML-file."
     else
       cttMessage.innerHTML = "CTT upload failed. <br/>Submit issue here: https://github.com/EmileSonneveld/CTT-editor"
+    dom.window.setTimeout(() => fileUploaded_delayed(), 500) // Short delay to ba safe on slower backends
   }
 
 

src/main/scala/CttNode.scala

@@ -32,6 +32,15 @@ class CttNode {
   var width: Double = -1 // not calculated yet
   var parent: CttNode = _
 
+  val icons = List("abstraction", "application", "interaction", "user")
+
+  def displayName(): String = {
+    val sp = name.split(' ')
+    if (icons.contains(sp.last))
+      return name.substring(0, name.length - sp.last.length - 1)
+    return name
+  }
+
   def addChild(child: CttNode, index: Int = -1) = {
     child.parent = this
     var idx = index
@@ -79,6 +88,9 @@ class CttNode {
   }
 
   def GetIconName(): String = {
+    val sp = name.split(' ')
+    if (icons.contains(sp.last)) return sp.last + ".gif"
+
     if (children.size > 0) return "abstraction.gif"
     val n = name.toLowerCase()
     if (Operator() != null) return ""
@@ -90,6 +102,6 @@ class CttNode {
   }
 
   override def toString = {
-    name
+    displayName()
   }
 }

src/main/scala/StaticUtil.scala

@@ -47,7 +47,7 @@ object StaticUtil {
               n.children.remove(i)
               n.children.remove(i - 1)
 
-              newNode.name = "(" + left.name + " & " + right.name + ")"
+              newNode.name = "(" + left.displayName + " & " + right.displayName + ")"
               newNode.addChild(left)
               newNode.addChild(child)
               newNode.addChild(right)
@@ -285,10 +285,10 @@ object StaticUtil {
         bg_y = (n.pos.y + 26 - 11)
         sb.append("<image x='" + (n.pos.x - 16) + "' y='" + (n.pos.y - 16) + "' width='32' height='32' href='" + icon + "' visibility='visible'></image>\n")
       }
-
-      val w = (n.name.length * 7.2)
-      sb.append("<rect x='" + (n.pos.x - n.name.length * 3) + "' y='" + bg_y + "' width='" + w + "' height='15' style='fill: rgba(255, 255, 255, 0.7);'></rect>\n")
-      sb.append("<text x='" + (n.pos.x - n.name.length * 3) + "' y='" + text_y + "' width='" + w + "' height='15' style='font-family: monospace;'>" + n.name + "</text>\n")
+      val nam = n.displayName()
+      val w = (nam.length * 7.2)
+      sb.append("<rect x='" + (n.pos.x - nam.length * 3) + "' y='" + bg_y + "' width='" + w + "' height='15' style='fill: rgba(255, 255, 255, 0.7);'></rect>\n")
+      sb.append("<text x='" + (n.pos.x - nam.length * 3) + "' y='" + text_y + "' width='" + w + "' height='15' style='font-family: monospace;'>" + nam + "</text>\n")
 
 
       for (child <- n.children) {