From 46101ca896004e13e5666efbf22f049b3ca0ffd6 Mon Sep 17 00:00:00 2001
From: mabasian <mr.abbasian.d@gmail.com>
Date: Wed, 1 Dec 2021 20:56:42 +0100
Subject: [PATCH] start frontend proj

added new components and changed the route
---
 launcher/src/components/UI/LangButton.vue   | 27 ++++++++
 launcher/src/components/UI/LangDialog.vue   | 40 +++++++++++
 launcher/src/components/layers/BaseLogo.vue | 26 +++++++
 launcher/src/components/layers/TheFirst.vue | 75 +++++++++++++++++++++
 launcher/src/router/index.js                | 16 +++--
 5 files changed, 179 insertions(+), 5 deletions(-)
 create mode 100644 launcher/src/components/UI/LangButton.vue
 create mode 100644 launcher/src/components/UI/LangDialog.vue
 create mode 100644 launcher/src/components/layers/BaseLogo.vue
 create mode 100644 launcher/src/components/layers/TheFirst.vue

diff --git a/launcher/src/components/UI/LangButton.vue b/launcher/src/components/UI/LangButton.vue
new file mode 100644
index 000000000..2a21257d3
--- /dev/null
+++ b/launcher/src/components/UI/LangButton.vue
@@ -0,0 +1,27 @@
+<template>
+  <img :src="flag" />
+</template>
+
+<script>
+export default {
+  name: "LangButton",
+  props: ["flag"],
+};
+</script>
+
+<style scoped>
+button {
+  background-image: inherit;
+}
+img {
+  display: block;
+  position: absolute;
+  top: 10%;
+  left: 10%;
+  width: 55%;
+  min-height: 10%;
+  min-width: 10%;
+  transform: translate(-50%, -50%);
+  resize: both;
+}
+</style>
diff --git a/launcher/src/components/UI/LangDialog.vue b/launcher/src/components/UI/LangDialog.vue
new file mode 100644
index 000000000..9e589d39b
--- /dev/null
+++ b/launcher/src/components/UI/LangDialog.vue
@@ -0,0 +1,40 @@
+<template>
+  <dialog open v-if="open">
+    <!-- @link="setLink" -->
+    <slot></slot>
+  </dialog>
+</template>
+
+<script>
+export default {
+  name: "LangDialog",
+  props: ["open"],
+  //    data(){
+  //      return{
+  //        links:''
+  //      }
+  //    },
+  //    methods: {
+  //      setLink(linkUrl){
+  // links=linkUrl
+  //      }
+  //    },
+};
+</script>
+
+<style scoped>
+dialog {
+  position: fixed;
+  top: 30vh;
+  width: 30rem;
+  left: calc(50% - 15rem);
+  margin: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+  border-radius: 12px;
+  padding: 1rem;
+  background-color: white;
+  z-index: 100;
+  border: none;
+  /* animation: modal 0.3s ease-out forwards; */
+}
+</style>
diff --git a/launcher/src/components/layers/BaseLogo.vue b/launcher/src/components/layers/BaseLogo.vue
new file mode 100644
index 000000000..9853b1322
--- /dev/null
+++ b/launcher/src/components/layers/BaseLogo.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <img :src="link" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BaseLogo",
+  props: ["link"],
+};
+</script>
+
+<style scoped>
+img {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 52%;
+  min-height: 20%;
+  min-width: 20%;
+  transform: translate(-50%, -50%);
+  resize: both;
+}
+</style>
diff --git a/launcher/src/components/layers/TheFirst.vue b/launcher/src/components/layers/TheFirst.vue
new file mode 100644
index 000000000..f2890f076
--- /dev/null
+++ b/launcher/src/components/layers/TheFirst.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <div id="container">
+      <base-logo :link="link"> </base-logo>
+      <!-- <lang-dialog @click="$emit('open')" v-if="dialogIsVisible"></lang-dialog> -->
+      <lang-dialog @close="hideDialog" :open="dialogIsVisible">
+        <ul>
+          <li v-for="link in linkFlags" :key="link" @click="hideDialog">
+            <img :src="link" />
+          </li>
+        </ul>
+      </lang-dialog>
+      <section @click="showDialog">
+        <lang-button :flag="flag" class="lang"></lang-button>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseLogo from "./BaseLogo.vue";
+import LangButton from "../UI/LangButton.vue";
+import LangDialog from "../UI/LangDialog.vue";
+export default {
+  name: "TheFirst",
+  components: { BaseLogo, LangButton, LangDialog },
+  name: "TheFirst",
+  emit: ["open"],
+  data() {
+    return {
+      link: "stereumLogoExtern.png",
+      flag: "SelectLang.png",
+      dialogIsVisible: false,
+      linkFlags: ["Img/Flag/ENGLISH.png", "Img/Flag/ENGLISH.png"],
+    };
+  },
+  methods: {
+    showDialog() {
+      this.dialogIsVisible = true;
+    },
+
+    hideDialog() {
+      this.dialogIsVisible = false;
+    },
+  },
+};
+</script>
+
+<style scoped>
+#container {
+  border-radius: 40px;
+
+  padding: 1rem;
+  margin: 2rem auto;
+  width: 95vw;
+  height: 95vh;
+  background-color: #336666;
+}
+div {
+  background-color: #000;
+
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  display: flex;
+}
+.lang {
+  position: fixed;
+  top: 81vh;
+  left: 86%;
+  width: 4em;
+  z-index: 100;
+  resize: both;
+}
+</style>
diff --git a/launcher/src/router/index.js b/launcher/src/router/index.js
index e4f4a2447..673d9b9b3 100644
--- a/launcher/src/router/index.js
+++ b/launcher/src/router/index.js
@@ -1,19 +1,25 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import Setup from "../views/Setup.vue";
+//import Setup from "../views/Setup.vue";
+import TheFirst from "../components/layers/TheFirst.vue";
 
 Vue.use(VueRouter);
 
 const routes = [
+  // {
+  //   path: "/",
+  //   name: "Setup",
+  //   component: Setup,
+  // },
   {
     path: "/",
-    name: "Setup",
-    component: Setup,
-  },  
+    name: "TheFirst",
+    component: TheFirst,
+  },
 ];
 
 const router = new VueRouter({
-  mode: 'hash',
+  mode: "hash",
   base: process.env.BASE_URL,
   routes,
 });