issue: Landing Page text into localization/translation

frontend/src/components/RoundedAvatar.vue

@@ -1,6 +1,7 @@
 <template>
   <div
-    class="rounded-avatar rounded-circle bigAvatars"
+    class="rounded-avatar rounded-circle"
+    :class="admin ? 'smallAvatars' : 'bigAvatars'"
     :style="`background-color: ${member.hexColor}`"
   >
     <div :id="'avatar' + member.name" class="text-center">
@@ -36,10 +37,17 @@ export default Vue.extend({
   justify-content: center; /* Centering y-axis */
   align-items: center; /* Centering x-axis */
   overflow: hidden;
+}
+
+.smallAvatars {
+  width: 100px;
+  height: 100px;
+}
+
+.bigAvatars {
   width: 150px;
   height: 150px;
 }
-
 .rounded-avatar__image {
   width: 50px;
 }

frontend/src/components/UserStoryDescriptions.vue

@@ -51,7 +51,7 @@
         <div v-if="!editDescription">
           <b-form-textarea
             id="textarea-auto-height-plaintext"
-            class="py-2 description-text-area"
+            class="py-2"
             plaintext
             :value="userStories[idx].description"
             rows="15"

frontend/src/locales/en.json

@@ -145,6 +145,11 @@
         }
       },
       "hostLeft": "Waiting for the host to come back..."
+    },
+    "instruction": {
+      "setUpSession": "Create a planning session and select your prefered voting set. <br> <br> You could import your user stories or connect JIRA to syncronize story points. <br> <br> <span style='color: grey;'>Connecting to Issue-Tracker </span> <br> <br> DIVENI could connect to issue trackers like Azure DevOps, JIRA Server and Cloud to show user stories and update the voted results of your planning poker.",
+      "inviteYourTeam": "Invite your team using QR-Code, invite link or code. <br> <br>  Every user will be randomly assinged to a animal and is ready to estimate. <br> <br> If everybody is in the session, you could start estimation. Having defined a time limit this will be used as limit for voting time.",
+      "estimateUserStories": "Every member of the Team could use your defined set to vote the selected user story. <br> <br> If everybody has voted, DIVENI shows results and randomly selects two voters having voted minimum / maximum to discuss their estimation. <br> <br> After discussion you could repeat estimation."
     }
   },
   "session": {

frontend/src/views/LandingPage.vue

@@ -59,38 +59,13 @@
           </b-card-group>
           <b-card-group deck>
             <b-card class="aboutDiveni" title="Set up Session">
-              <b-card-text>
-                Create a planning session and select your prefered voting set.
-              </b-card-text>
-              <b-card-text>
-                You could import your user stories or connect JIRA to syncronize story points.
-              </b-card-text>
-
-              <b-card-sub-title> Connecting to Issue-Tracker </b-card-sub-title>
-              <b-card-text>
-                DIVENI could connect to issue trackers like Azure DevOps, JIRA Server and Cloud to
-                show user stories and update the voted results of your planning poker.
-              </b-card-text>
+              <b-card-text v-html="$t('page.instruction.setUpSession')"></b-card-text>
             </b-card>
             <b-card class="aboutDiveni" title="Invite your Team">
-              <b-card-text> Invite your team using QR-Code, invite link or code. </b-card-text>
-              <b-card-text>
-                Every user will be randomly assinged to a animal and is ready to estimate.
-              </b-card-text>
-              <b-card-text>
-                If everybody is in the session, you could start estimation. Having defined a time
-                limit this will be used as limit for voting time.
-              </b-card-text>
+              <b-card-text v-html="$t('page.instruction.inviteYourTeam')"></b-card-text>
             </b-card>
             <b-card class="aboutDiveni" title="Estimate User Stories">
-              <b-card-text>
-                Every member of team could use your defined set to vote the selected user story.
-              </b-card-text>
-              <b-card-text>
-                If everybody has voted, DIVENI shows results and randomly selects two voters having
-                voted minimum / maximum to discuss their estimation.
-              </b-card-text>
-              <b-card-text> After discussion you could repeat estimation. </b-card-text>
+              <b-card-text v-html="$t('page.instruction.estimateUserStories')"></b-card-text>
             </b-card>
           </b-card-group>
         </div>
@@ -111,6 +86,7 @@
 import Constants from "../constants";
 import Session from "../model/Session";
 import AnalyticsDataComponent from "../components/AnalyticsDataComponent.vue";
+
 export default Vue.extend({
   name: "LandingPage",
   components: {
@@ -241,6 +217,7 @@
 .card-sub-title {
   color: red;
 }
+
 .card-title {
   color: var(--text-primary-color);
 }

frontend/src/views/PrepareSessionPage.vue

@@ -165,7 +165,6 @@ export default Vue.extend({
       timer: 30,
       warningWhenUnderZero: "",
       tabIndex: 0,
-      hostVoting: false,
       isIssueTrackerEnabled: false,
       theme: localStorage.getItem("user-theme"),
     };
@@ -239,7 +238,6 @@ export default Vue.extend({
             sessionState: string;
           };
           adminCookie: string;
-          hostVoting: string;
         };
         window.localStorage.setItem("adminCookie", response.adminCookie);
         this.goToSessionPage(response.session as Session);
@@ -257,7 +255,6 @@ export default Vue.extend({
           voteSetJson: JSON.stringify(session.sessionConfig.set),
           sessionState: session.sessionState,
           userStoryMode: session.sessionConfig.userStoryMode,
-          hostVoting: this.hostVoting.toString(),
           rejoined: "false",
         },
       });

frontend/src/views/SessionPage.vue

@@ -47,11 +47,7 @@
       </b-row>
       <b-row>
         <b-col class="text-center">
-          <session-start-button
-            :members="members"
-            :host-voting="session_hostVoting"
-            @clicked="onPlanningStarted"
-          />
+          <session-start-button @clicked="onPlanningStarted" />
         </b-col>
       </b-row>
     </div>
@@ -108,51 +104,12 @@
         />
       </b-row>
       <hr class="my-5 breakingLine" />
-      <h4 v-if="!session_hostVoting">
+      <h4>
         {{ $t("page.session.during.estimation.message.finished") }}
         {{ membersEstimated.length }} /
-        {{ members.length }}
-      </h4>
-      <h4 v-else>
-        <div v-if="hostEstimation == ''">
-          {{ $t("page.session.during.estimation.message.finished") }}
-          {{ membersEstimated.length }} /
-          {{ members.length + 1 }}
-        </div>
-        <div v-else>
-          {{ $t("page.session.during.estimation.message.finished") }}
-          {{ membersEstimated.length + 1 }} /
-          {{ members.length + 1 }}
-        </div>
+        {{ membersPending.length + membersEstimated.length }}
       </h4>
-      <b-row
-        v-if="highlightedMembers.includes(adminID)"
-        class="my-1 d-flex justify-content-center flex-wrap overflow-auto kick-user"
-        style="max-height: 500px"
-      >
-        <session-admin-card
-          v-if="(safedHostVoting && estimateFinished) || hostEstimation !== ''"
-          :current-estimation="hostEstimation"
-          :estimate-finished="estimateFinished"
-          :highlight="highlightedMembers.includes(adminID) || highlightedMembers.length === 0"
-        />
-        <kick-user-wrapper
-          v-for="member of estimateFinished ? members : membersEstimated"
-          :key="member.memberID"
-          child="SessionMemberCard"
-          :member="member"
-          :props="{
-            estimateFinished: estimateFinished,
-            highlight:
-              highlightedMembers.includes(member.memberID) || highlightedMembers.length === 0,
-          }"
-        />
-      </b-row>
-      <b-row
-        v-else
-        class="my-1 d-flex justify-content-center flex-wrap overflow-auto"
-        style="max-height: 500px"
-      >
+      <b-row class="my-1 d-flex justify-content-center flex-wrap overflow-auto kick-user">
         <kick-user-wrapper
           v-for="member of estimateFinished ? members : membersEstimated"
           :key="member.memberID"
@@ -164,31 +121,7 @@
               highlightedMembers.includes(member.memberID) || highlightedMembers.length === 0,
           }"
         />
-        <session-admin-card
-          v-if="(safedHostVoting && estimateFinished) || hostEstimation !== ''"
-          :current-estimation="hostEstimation"
-          :estimate-finished="estimateFinished"
-          :highlight="highlightedMembers.includes(adminID) || highlightedMembers.length === 0"
-        />
       </b-row>
-      <div v-if="session_hostVoting && estimateFinished === false">
-        <div v-if="!estimateFinished">
-          <hr class="breakingLine" />
-          <h4 class="d-inline">Your Estimation</h4>
-        </div>
-        <div v-if="!estimateFinished" class="newVotes m-1">
-          <b-button
-            v-for="item in voteSet"
-            :key="item"
-            class="activePills m-1"
-            pill
-            style="width: 60px"
-            @click="vote(item)"
-          >
-            {{ item }}
-          </b-button>
-        </div>
-      </div>
     </div>
     <b-row v-if="session_userStoryMode !== 'NO_US'" class="mt-4">
       <b-col>
@@ -282,7 +215,6 @@
 import SessionCloseButton from "@/components/actions/SessionCloseButton.vue";
 import SessionStartButton from "@/components/actions/SessionStartButton.vue";
 import { BIconArrowClockwise, BIconBarChartFill } from "bootstrap-vue";
-import SessionAdminCard from "@/components/SessionAdminCard.vue";
 
 export default Vue.extend({
   name: "SessionPage",
@@ -298,21 +230,19 @@
     NotifyHostComponent,
     BIconArrowClockwise,
     BIconBarChartFill,
-    SessionAdminCard,
   },
   props: {
-    adminID: { type: String, required: false, default: undefined },
-    sessionID: { type: String, required: false, default: undefined },
-    voteSetJson: { type: String, required: false, default: undefined },
-    sessionState: { type: String, required: false, default: undefined },
-    timerSecondsString: { type: String, required: false, default: undefined },
-    hostVoting: { type: String, required: true },
+    adminID: { type: String, required: false },
+    sessionID: { type: String, required: false },
+    voteSetJson: { type: String, required: false },
+    sessionState: { type: String, required: false },
+    timerSecondsString: { type: String, required: false },
     startNewSessionOnMountedString: {
       type: String,
       required: false,
       default: "false",
     },
-    userStoryMode: { type: String, required: false, default: undefined },
+    userStoryMode: { type: String, required: false },
     rejoined: { type: String, required: false, default: "true" },
   },
   data() {
@@ -324,7 +254,6 @@
       session_sessionState: "",
       session_timerSecondsString: "",
       session_userStoryMode: "",
-      session_hostVoting: false,
       //data
       index: 0,
       stageLabelReady: "Ready",
@@ -335,8 +264,6 @@
       startTimerOnComponentCreation: true,
       estimateFinished: false,
       session: {},
-      hostEstimation: "",
-      safedHostVoting: false,
     };
   },
   computed: {
@@ -404,12 +331,7 @@
     },
     membersEstimated() {
       if (this.membersPending.length === 0 && this.membersEstimated.length > 0) {
-        if (this.safedHostVoting && this.hostEstimation !== "") {
-          this.estimateFinished = true;
-        }
-        if (!this.safedHostVoting) {
-          this.estimateFinished = true;
-        }
+        this.estimateFinished = true;
       }
     },
   },
@@ -490,7 +412,6 @@
         this.session_timerSecondsString = this.timerSecondsString;
         this.session_voteSetJson = this.voteSetJson;
         this.session_userStoryMode = this.userStoryMode;
-        this.session_hostVoting = String(this.hostVoting).toLowerCase() === "true";
       }
     },
     assignSessionToData(session) {
@@ -501,7 +422,6 @@
         this.session_timerSecondsString = session.sessionConfig.timerSeconds.toString();
         this.session_voteSetJson = JSON.stringify(session.sessionConfig.set);
         this.session_userStoryMode = session.sessionConfig.userStoryMode;
-        this.session_hostVoting = String(session.hostVoting).toLowerCase() === "true";
         this.$store.commit("setUserStories", {
           stories: session.sessionConfig.userStories,
         });
@@ -534,11 +454,7 @@
       if (this.session_userStoryMode === "US_JIRA") {
         let response;
         if (doRemove) {
-          if (us[idx].id === null) {
-            response = 204;
-          } else {
-            response = await apiService.deleteUserStory(us[idx].id);
-          }
+          response = await apiService.deleteUserStory(us[idx].id);
           us.splice(idx, 1);
           doRemove = false;
         } else {
@@ -564,8 +480,6 @@
           this.$toast.success(
             this.$t("session.notification.messages.issueTrackerSynchronizeSuccess")
           );
-        } else if (response === 204) {
-          this.$toast.info(this.$t("session.notification.messages.issueTrackerNothingChanged"));
         } else {
           this.$toast.error(this.$t("session.notification.messages.issueTrackerSynchronizeFailed"));
         }
@@ -667,41 +581,20 @@
     },
     sendRestartMessage() {
       this.estimateFinished = false;
-      this.hostEstimation = "";
-      this.safedHostVoting = this.session_hostVoting;
       const endPoint = Constants.webSocketRestartPlanningRoute;
-      this.$store.commit("sendViaBackendWS", { endPoint, data: this.session_hostVoting });
+      this.$store.commit("sendViaBackendWS", { endPoint });
     },
     goToLandingPage() {
       this.$router.push({ name: "LandingPage" });
     },
     onPlanningStarted() {
       this.planningStart = true;
-      this.safedHostVoting = this.session_hostVoting;
-    },
-    vote(vote: string) {
-      this.hostEstimation = vote;
-      const endPoint = `${Constants.webSocketVoteRouteAdmin}`;
-      this.$store.commit("sendViaBackendWS", { endPoint, data: vote });
     },
   },
 });
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-.newVotes {
-  text-align: center;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.hostVotingButtons {
-  position: relative;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
 .optionButtonCol {
   margin-top: auto;
   margin-bottom: auto;
@@ -776,19 +669,4 @@
   width: 240px;
   height: 180px;
 }
-
-.activePills {
-  background-color: var(--preparePageMainColor);
-  color: var(--text-primary-color);
-}
-
-.activePills:hover {
-  background-color: var(--preparePageInActiveTabHover);
-  color: var(--text-primary-color);
-}
-
-.activePills:focus {
-  background-color: var(--preparePageInActiveTabHover) !important;
-  color: var(--text-primary-color);
-}
 </style>