added Clients Page
This commit is contained in:
jo.kuehner
179
components/server/Client.vue
Normal file
179
components/server/Client.vue
Normal file
@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<section class="information">
|
||||
<h2 class="client-name">Client name</h2>
|
||||
<div class="data-field" id="client-id">
|
||||
<pre class="label">ID:</pre>
|
||||
<pre class="data">...</pre>
|
||||
</div>
|
||||
<div class="client-data">
|
||||
<div class="contact">
|
||||
<h3 class="area-title">Contact:</h3>
|
||||
<div class="data-field" id="contact-person">
|
||||
<pre class="label">Contact person:</pre>
|
||||
<pre class="data">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="e-mail">
|
||||
<pre class="label">E-Mail:</pre>
|
||||
<pre class="data">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="phone">
|
||||
<pre class="label">Phone number:</pre>
|
||||
<pre class="data">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="address">
|
||||
<h3 class="area-title">Address:</h3>
|
||||
<div class="street-address">
|
||||
<div class="data-field" id="street-name">
|
||||
<pre class="label">Street:</pre>
|
||||
<pre class="data">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="street-no">
|
||||
<pre class="label">No.:</pre>
|
||||
<pre class="data">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-field" id="postal-code">
|
||||
<pre class="label">Postcode:</pre>
|
||||
<pre class="data">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="city">
|
||||
<pre class="label">City:</pre>
|
||||
<pre class="data">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notes">
|
||||
<h3 class="area-title">Notes:</h3>
|
||||
<pre class="data" id="notes">...</pre>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "Client",
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
.information {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 20px 30px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
|
||||
.client-name {
|
||||
align-self: stretch;
|
||||
padding: 20px 0;
|
||||
color: #fff;
|
||||
letter-spacing: 0.8px;
|
||||
text-decoration-line: underline;
|
||||
font: italic 400 16px/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.data-field {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 0 30px;
|
||||
gap: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.data-field#client-id {
|
||||
padding: 10px 30px;
|
||||
}
|
||||
.data-field#street-name {
|
||||
width: 70%;
|
||||
}
|
||||
.data-field#street-no {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #fff;
|
||||
letter-spacing: 0.7px;
|
||||
font: 400 14px/30px Overpass, sans-serif;
|
||||
}
|
||||
.data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: 0 10px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.25) inset;
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
letter-spacing: 0.6px;
|
||||
font: 400 12px/250% Overpass, sans-serif;
|
||||
}
|
||||
.data#notes {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.client-data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
align-self: stretch;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.contact, .address {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
line-height: normal;
|
||||
width: 50%;
|
||||
padding: 20px 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.area-title {
|
||||
color: #fff;
|
||||
letter-spacing: 0.7px;
|
||||
font: 400 14px/30px Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.street-address {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-self: stretch;
|
||||
padding: 0 30px 0 0;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.notes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
padding: 10px 30px 10px 20px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
79
components/server/ClientQuickAccess.vue
Normal file
79
components/server/ClientQuickAccess.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<section class="quick-access">
|
||||
<h2 class="heading">Quick Access</h2>
|
||||
<div class="shortcuts">
|
||||
<input type="button" id="maintenance-visits" value="Maintenance Visits">
|
||||
<input type="button" id="production-orders" value="Production Orders">
|
||||
<input type="button" id="issue-slips" value="Assets">
|
||||
<input type="button" id="solutions" value="Solutions">
|
||||
<input type="button" id="issue-slips" value="Issue Slips">
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "ClientQuickAccess",
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
.quick-access {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
padding: 30px 30px 50px;
|
||||
gap: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.heading {
|
||||
color: #fff;
|
||||
letter-spacing: 0.8px;
|
||||
text-decoration-line: underline;
|
||||
font: 400 16px/32px Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.shortcuts {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
padding: 10px 30px;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
input {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 240px;
|
||||
height: 64px;
|
||||
border-radius: 10px;
|
||||
padding: 15px 20px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
letter-spacing: 0.7px;
|
||||
font: 400 14px/32px Overpass, sans-serif;
|
||||
background-color: #343434;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
90
components/server/ClientTable.vue
Normal file
90
components/server/ClientTable.vue
Normal file
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="data">
|
||||
<table class="data-table" id="client-table">
|
||||
<tr class="table-row" id="table-head">
|
||||
<th class="ID">ID</th>
|
||||
<th class="Name">Name</th>
|
||||
</tr>
|
||||
<tr class="table-row" id="row-1">
|
||||
<td class="ID">...</td>
|
||||
<td class="Name">...</td>
|
||||
</tr>
|
||||
<tr class="table-row" id="row-2">
|
||||
<td class="ID">...</td>
|
||||
<td class="Name">...</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "ClientTable",
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
.data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
padding: 20px 30px;
|
||||
gap: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 50px;
|
||||
padding: 10px;
|
||||
gap: 10px;
|
||||
border-top: 1px solid #000000;
|
||||
}
|
||||
#table-head {
|
||||
border-top: none;
|
||||
border-bottom: 1px solid #000000;
|
||||
}
|
||||
|
||||
th, td {
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
color: #ffffff;
|
||||
letter-spacing: 0.7px;
|
||||
font: 400 14px/30px Overpass, sans-serif;
|
||||
}
|
||||
th {
|
||||
font: 700 14px/30px Overpass, sans-serif;
|
||||
}
|
||||
.ID {
|
||||
width: 40%;
|
||||
border-right: 1px solid #000000;
|
||||
}
|
||||
.Name {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user