refactor more to tailwind

src/components/AreaControlCard.vue

@@ -108,6 +108,7 @@ p {
   border-width: 2px;
   border-radius: 10px;
   border-style: solid;
+  border-color: black;
   margin: 5px;
   padding: 5px;
   width: 250px;

src/components/irrigation/irrigationAreaConfCard.vue

@@ -1,35 +1,35 @@
 <template>
-    <div class="rounded-lg border-2 border-solid border-black flex flex-wrap">
+    <div class="rounded-lg border-2 border-solid border-black flex flex-row mb-3 w-full h-72">
-        <div class="areaDiv">
+        <div class="flex flex-col m-2 w-full space-y-1">
-            <label for="name">
+            <div class="flex flex-row justify-between">
-                Name:
+                <label class="w-1/3" for="name">Name:</label>
-                <input type="text" name="name" class="width" v-model="area.name" @keypress="sthChanged">
+                <input class="w-2/3" type="text" name="name" v-model="area.name" @keypress="sthChanged">
-            </label>
+            </div>
-            <label for="valve">Ventil:
+            <div class="flex flex-row justify-between">
-                <select name="valve" class="width" v-model="area.valveId" @change="sthChanged">
+                <label class="w-1/3" for="valve">Ventil:</label>
+                <select class="w-2/3" name="valve" v-model="area.valveId" @change="sthChanged">
                     <option v-for="valve in valves" :key="valve.id" :value="valve.id">
                         Ventil {{ valve.number }}
                     </option>
                 </select>
-            </label>
+            </div>
-            <label for="description">
+            <div class="flex flex-row items-center w-full justify-between">
-                Beschreibung:
+                <div>
-                <textarea name="description" rows="8" class="width" v-model="area.description" @keypress="sthChanged"></textarea>
+                    <button v-if="!changed">
-            </label>
+                        <img class="w-10 ml-2" src="../../assets/img/buttons/delete_icon.svg" alt="Löschen" @click="deleteArea">
+                    </button>
+                    <button v-else>
+                        <img class="w-10 ml-2" src="../../assets/img/buttons/sync_icon.svg" alt="Aktualisieren" @click="updateArea">
+                    </button>
+                </div>
+                <textarea class="w-2/3" name="description" rows="8" v-model="area.description" @keypress="sthChanged"></textarea>
+            </div>
         </div>
-        <div class="areaConfDiv">
+        <div class="w-full overflow-auto">
-            <h3>Konfigurationen</h3>
+            <h3 class="text-center text-xl">Konfigurationen</h3>
             <IrrigationAreaConfLine v-for="conf in area.areaConfs" :key="conf.id" :areaConf="conf" @confDeleted="confDeleted">
             </IrrigationAreaConfLine>
         </div>
-        <div class="buttons">
-            <button v-if="!changed">
-                <img src="../../assets/img/buttons/delete_icon.svg" alt="Löschen" @click="deleteArea">
-            </button>
-            <button v-else>
-                <img src="../../assets/img/buttons/sync_icon.svg" alt="Aktualisieren" @click="updateArea">
-            </button>
-        </div>
     </div>
 </template>
 
@@ -96,64 +96,3 @@ function confDeleted(id) {
 }
 
 </script>
-
-<style scoped>
-/* .areaConfDiv{
-    width: 300px;
-    overflow-y: scroll;
-}
-
-.areaConfDiv::-webkit-scrollbar {
-  border: 0;
-}
-
-h3 {
-    text-align: center;
-    width: 100%;
-    margin: 4px 0;
-}
-
-button img{
-    width: 50px;
-    height: 50px;
-}
-
-button {
-    position: absolute;
-    bottom: 20px;
-    left: 20px;
-    padding: 8px;
-    border-radius: 10px;
-}
-
-button:hover {
-    background-color: rgba(0, 0, 0, 0.1);
-    cursor: pointer;
-}
-
-.areaDiv {
-    width: 300px;
-    margin: 8px;
-}
-
-.mainDiv {
-    display: flex;
-    position: relative;
-    border-radius: 10px;
-    border-style: solid;
-    border-width: 2px;
-    margin: 8px;
-    height: 215px;
-    width: fit-content;
-}
-
-.width {
-    width: 60%;
-}
-
-label {
-    display: flex;
-    justify-content: space-between;
-    margin: 0px 0px 8px 0px;
-} */
-</style>

src/components/siteElements/FixedFooter.vue

@@ -30,7 +30,7 @@ function updateTime() {
 </script>
 
 <template>
-  <footer>
+  <footer class="bg-white flex flex-wrap flex-row justify-between items-center text-xs fixed bottom-0 w-full">
     <div>
       <ul>
         <li>
@@ -39,7 +39,9 @@ function updateTime() {
         <li>Server Zeit: <span id="footerServerTime">00:00:00</span></li>
       </ul>
     </div>
-    <div>Kleiax Irrigation Frontend</div>
+    <div >
+      Kleiax Irrigation Frontend
+    </div>
     <div>
       <ul class="links">
         <li><RouterLink to="/imprint">Impressum</RouterLink></li>
@@ -48,36 +50,3 @@ function updateTime() {
     </div>
   </footer>
 </template>
-
-<style scoped>
-footer {
-  position: fixed;
-  bottom: 0px;
-  width: 100%;
-  height: 4em;
-  display: flex;
-  justify-content: space-between;
-  place-items: center;
-  background-color: aquamarine;
-}
-
-ul {
-  list-style-type: none;
-  padding: 0px;
-  margin-left: 8px;
-  margin-right: 8px;
-}
-
-.links {
-  text-align: right;
-}
-
-a {
-  text-decoration: none;
-  color: black;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-</style>

src/components/siteElements/Sidebar.vue

@@ -71,102 +71,37 @@ function close(event) {
 </script>
 
 <template>
-    <aside>
+    <aside class="flex flex-col items-center space-y-3 ml-3">
-        <h2>Infos</h2>
+        <div class="bg-white rounded-xl w-full shadow-md">
-        <hr />
+            <h2 class="text-3xl text-center ">Infos</h2>
-        <h3>Pumpe</h3>
+        </div>
-        <p>
+
-            Status: <br />
+        <div class="bg-white rounded-xl w-full shadow-md">
-            <b>{{ pump.status }}</b> <br />
+            <h3 class="text-2xl text-center">Pumpe</h3>
-            seit <br />
+            <p class="text-center">
-            <b>{{ parseInt(pump.time / 60) }}</b> <br />
+                Status: <br />
-            Minuten
+                <b>{{ pump.status }}</b> <br />
-        </p>
+                seit <br />
-        <hr />
+                <b>{{ parseInt(pump.time / 60) }}</b> <br />
-        <h3>
+                Minuten
-            Offene <br />
+            </p>
-            Bereiche
+        </div>
-        </h3>
+
-        <p v-if="openValves.length === 0">Alles zu!</p>
+        <div v-if="openValves.length !== 0" class="bg-white rounded-xl w-full shadow-md">
-        <ul v-else>
+            <h3 class="text-2xl text-center">
-            <li v-for="valve in openValves" :key="valve.id">
+                Offene <br />
-                Bereich: <br />
+                Bereiche
-                <b>{{ getAreaName(valve.id) }} </b> <br />
+            </h3>
-                Verbleibende Zeit: <br />
+            <ul>
-                <b>{{ parseInt(valve.remainingTime / 60) }} min </b> <br />
+                <li class="text-center my-4" v-for="valve in openValves" :key="valve.id">
-                <a class="closeLink" @click="close" :id=valve.id>Schließen!</a>
+                    Bereich: <br />
-            </li>
+                    <b>{{ getAreaName(valve.id) }} </b> <br />
-        </ul>
+                    Verbleibende Zeit: <br />
+                    <b>{{ parseInt(valve.remainingTime / 60) }} min </b> <br />
+                    <a class="hover:cursor-pointer hover:bg-slate-400 text-xl border rounded-lg p-1" @click="close" :id=valve.id>Schließen!</a>
+                </li>
+            </ul>
+        </div>
     </aside>
 </template>
-
+fixed bottom-0
-<style scoped>
-ul {
-    list-style: none;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-li {
-    width: 80%;
-    padding-top: 8px;
-    padding-bottom: 8px;
-    margin-bottom: 16px;
-    text-align: center;
-    border-style: solid;
-    border-width: 1px;
-    border-radius: 10px;
-}
-
-a {
-    color: blue;
-    text-decoration: underline;
-}
-
-a:hover {
-    color: darkblue;
-    cursor: pointer;
-}
-
-aside {
-    min-width: 200px;
-    border-radius: 10px;
-    border-style: solid;
-    border-width: 2px;
-}
-
-h2 {
-    display: inline-block;
-    width: 100%;
-    height: 40px;
-    line-height: 40px;
-    text-align: center;
-    vertical-align: middle;
-}
-
-h3 {
-    display: inline-block;
-    width: 100%;
-    height: 20px;
-    line-height: 20px;
-    text-align: center;
-    vertical-align: middle;
-}
-
-p {
-    text-align: center;
-    font-size: larger;
-    margin: 0;
-}
-
-b {
-    display: inline-block;
-    width: 150px;
-    text-decoration: underline;
-    /* padding-left: 15px;
-    padding-right: 15px; */
-
-}
-</style>