Merge pull request #14 from Cambio-Project/dashboard_useability

Useability improvement of dashboard

app.vue

@@ -1,12 +1,3 @@
-<script>
-export default {
-  mounted() {
-    console.log(this.$store);
-  },
-};
-
-</script>
-
 <template>
   <div class="mainContainer">
     <NuxtPage />
@@ -20,22 +11,5 @@ export default {
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
     color: #2c3e50;
-    margin-top: 60px;
-  }
-
-  h3 {
-    margin: 40px 0 0;
-  }
-  ul {
-    list-style-type: none;
-    padding: 0;
-  }
-  li {
-    display: inline-block;
-    margin: 0 10px;
-  }
-  a {
-    color: #42b983;
-
   }
 </style>

components/ScenarioEditor.vue

@@ -10,6 +10,7 @@ export default {
       name: this.$store.state.name,
       category: this.$store.state.category,
       description: this.$store.state.description,
+      showTooltip: false
     }
   },
   methods:{
@@ -40,6 +41,15 @@ export default {
       this.$store.commit('addScenario')
       this.$router.push('/scenariosSite')
     },
+    //Changes all target logics to the same one
+    changeAllTargets() {
+      this.stimuli.forEach(stimulus => {
+        stimulus[7]= this.target;
+      })
+      this.responses.forEach(response => {
+        response[7]= this.target;
+      })
+    }
   },
   computed:{
     stimuli(){
@@ -68,13 +78,12 @@ export default {
 <template>
 
   <!--Headline-->
-  <h1 class ="headline-frame">
-    Scenario Editor
-  </h1>
+  <div class ="headline-frame">
+    <h1 class="headline"> Scenario Editor </h1>
+  </div>
 
   <!--Main Frame-->
   <div class="box-frame">
-    <div>
 
         <h3 class="center">
           Name: 
@@ -87,19 +96,24 @@ export default {
         </h3>
 
         <textarea v-model="description" type="text" placeholder="Enter description" class="larger-text-field"/>
-
-    </div>
 
+        <div>
+        {{ "Transform all Target Logics to " }}
+        <select class="select-box" @change="changeAllTargets" v-model="target">
+            <option v-for="targetLogic in targetLogics" :key="targetLogic" :value="targetLogics.indexOf(targetLogic)">{{ targetLogic }}</option>
+        </select>
+      </div>
 
     <div class="message-container">
 
       <p>Stimuli:</p>
 
       <li v-for="(stimulus, index) in stimuli" :key="stimulus" class="left">
+        {{ index +1}}.
         <select v-model="stimulus[7]" class="select-box">
           <option v-for="targetLogic in targetLogics" :key="targetLogic" :value="targetLogics.indexOf(targetLogic)">{{ targetLogic }}</option>
         </select>
-        {{ index +1}}. {{ stimulus[stimulus[7]] }}
+        {{ stimulus[stimulus[7]] }}
         <button class="remove-button" @click="removeStimulus(index)">Remove</button>
       </li>
 
@@ -111,18 +125,29 @@ export default {
 
       <p>Responses:</p>
       <li v-for="(response, index) in responses" :key="response" class="left">
+        {{ index +1}}.
         <select v-model="response[7]" class="select-box">
           <option v-for="targetLogic in targetLogics" :key="targetLogic" :value="targetLogics.indexOf(targetLogic)">{{ targetLogic }}</option>
         </select>
-        {{ index +1}}. {{ response[response[7]] }}
+        {{ response[response[7]] }}
         <button class="remove-button" @click="removeResponse(index)">Remove</button>
       </li>
 
       <button class="new-button" @click="openPSPResponse">Add Response</button>
 
     </div>
 
-    <button class="new-button" @click="addScenario">Complete</button>
+    <div v-if="this.name.length !== 0 && stimuli.length !== 0 && responses.length !== 0">
+      <button class="new-button" @click="addScenario">Complete</button>
+    </div>
+
+    <div v-else>
+      <div class="info">
+        <button class="not-ready-button" @mouseover="showTooltip = true" @mouseleave="showTooltip = false">Complete</button>
+        <span v-if="showTooltip" class="info-text">A Name and at least one Stimulus and one Response is mandatory</span>
+      </div>
+
+    </div>
 
   </div>
 
@@ -133,22 +158,25 @@ export default {
 
 .headline-frame {
   background-color: #eaf6ff; 
-  display: flex;
+  padding: 0px; 
+  display:flex;
   justify-content: center; 
-  align-items: center;
-  height: 100px; 
+  align-items: center; 
   width: 100%;
-  margin-left: 0px;
+  margin-top: -25px;
+}
+
+.headline {
+  color: #333; 
 }
 .box-frame {
   background-color: #d3d3d3;
-  display:block;
-  justify-content: center;
-  align-items: center;
-  height: 80vh;
+  justify-content:center; 
+  align-items:center; 
+  display: block;
+  height: 87vh;
   width: 100%;
-  margin: -40px;
-  margin-left: 0px;
+  margin-top: -22px;
 }
 
 .center {
@@ -164,14 +192,48 @@ export default {
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
-  margin-top: 10px;
   cursor: pointer;
   border-radius: 4px;
+  margin-top: -1vh;
 }
 
 .new-button:hover {
   background-color: rgb(73, 167, 61);
 }
+
+.not-ready-button {
+  background-color: rgb(114, 214, 101);
+  border: none;
+  color: white;
+  padding: 10px 20px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin-top: -1vh;
+  border-radius: 4px;
+  opacity: 70%
+}
+
+.not-ready-button:hover .info-text {
+  display: block;
+}
+
+.info {
+  transform: translateX(0vh);
+  color: #999;
+}
+
+.info-text {
+  position: absolute;
+  top: 20%;
+  right: 20%;
+  padding: 8px;
+  background-color: #f9f9f9;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  z-index: 1;
+}
 .remove-button {
   background-color: rgb(219, 65, 65);
   border: none;
@@ -189,11 +251,6 @@ export default {
   background-color: rgb(160, 40, 40);
 }
 
-body {
-  font-family: 'Arial', sans-serif;
-  background-color: #f4f4f4;
-}
-
 .message-container p {
 font-weight: bold;
 }
@@ -202,10 +259,12 @@ font-weight: bold;
 background-color: #f2f2f2;
 border: 1px solid #ddd;
 border-radius: 1vw;
+padding-left: 2vw;
+padding-right: 2vw;
 padding-top: 0.5vw;
 padding-bottom: 1.5vw;
 margin: 1vw;
-height: 20vh;
+height: 25%;
 overflow-y: auto;
 }