Skip to content

Commit

Permalink
Merge branch 'newDesign' into 'development'
Browse files Browse the repository at this point in the history
New Design Implemented

See merge request lappis-unb/projects/SMI/smi-mobile!16
  • Loading branch information
gabibguedes committed Mar 2, 2020
2 parents 741fb5a + b75475e commit 4531d59
Show file tree
Hide file tree
Showing 23 changed files with 791 additions and 305 deletions.
6 changes: 6 additions & 0 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,9 @@ export default {
}
}
</script>

<style lang="scss">
body {
background-color: #fafafa;
}
</style>
14 changes: 12 additions & 2 deletions src/components/historyItem.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<q-list>
<div v-for="item in items" v-bind:key="item.id">
<q-item :to="'/transducer/' + item.transductor">
<div v-for="item in items" v-bind:key="item.id + item.transductor + item.start_time">
<q-item :to="'/transducer/' + item.transductor" class="container">
<q-item-section>
<q-item-label>{{item.type}}</q-item-label>
<q-item-label caption>{{item.location}} ({{item.campus}})</q-item-label>
Expand All @@ -28,3 +28,13 @@ export default {
}
}
</script>

<style lang="scss" scoped>
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 0 0;
}
</style>
35 changes: 26 additions & 9 deletions src/components/listItem.vue
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<template>
<q-list>
<div v-for="item in items" v-bind:key="item.id">
<q-item :to="'/transducer/' + item.serial_number">
<q-item :to="'/transducer/' + item.serial_number" class="container">
<q-item-section>
<q-item-label>{{item.name}} ({{item.campus_acronym}})</q-item-label>
<q-item-label class="text">{{item.name}} ({{item.campus_acronym}})</q-item-label>
</q-item-section>

<q-item-section side top class="icons">
<q-icon v-if="item.serious_occurence" size="xs" name="error" />
<q-icon v-if="item.light_occurence" size="xs" name="warning" />
<q-item-section avatar class="icons">
<q-icon v-if="item.serious_occurence" size="sm" name="img:statics/ic_ocorrencia_critica_mono_grey.svg" />
<q-icon v-if="item.light_occurence" size="sm" name="img:statics/ic_ocorrencia_precaria_mono.svg" />
</q-item-section>
</q-item>
</div>
Expand All @@ -28,10 +28,27 @@ export default {
}
}
</script>
<style lang="scss">
.icons{
display: flex;
flex-direction: row;

<style lang="scss" scoped>
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 0 0;
}
.text {
width: 288px;
height: 28px;
font-family: Roboto;
font-size: 16px;
line-height: 1.75;
letter-spacing: 0.5px;
color: rgba(0, 0, 0, 0.87);
}
.icons {
flex-direction: row;
}
</style>
53 changes: 42 additions & 11 deletions src/components/mainList.vue
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<template>
<div v-if="items">
<div v-if="items" :class="{'q-mt-md' : type == 'occurence'}" >
<div class="container" v-if="!list">
<q-icon class="icon" :name="getIcon()" />
<div class="title_container" :class="{'light' : !this.serious}">{{this.title}}</div>
</div>
<div class="content q-mb-xs">
<q-card class="card-title q-mb-sm" v-if="!list">
<q-icon :name="getIcon()" />
{{this.title}}
</q-card>
<occurence-item v-if="type == 'occurence'" :items="items" :info="info"/>
<occurence-item v-if="type == 'occurence'" :items="items" :type="type" :info="info"/>
<history-item v-else-if="type == 'history'" :items="items" />
<transducer-item v-else-if="type == 'transducer'" :items="items" />
<list-item v-else :items="items" />
Expand Down Expand Up @@ -51,6 +51,10 @@ export default {
type: {
type: String,
default: 'list'
},
serious: {
type: Boolean,
default: true
}
},
methods: {
Expand All @@ -60,10 +64,37 @@ export default {
}
}
</script>
<style lang="scss">
.card-title {
font-size: 150%;
background: #e8e8e8;
padding: 5%;

<style lang="scss" scoped>
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
.icon {
height: 10%;
width: 12%;
}
.title_container {
display: flex;
justify-content: flex-start;
align-items: center;
background-color: $color_tertiary;
margin-left: -1px;
padding-left: 2%;
width: 100%;
font-family: Roboto;
font-size: 7vw;
font-weight: 300;
font-style: italic;
color: #ffffff;
}
.light {
background-color: $color_secondary-accent;
}
</style>
56 changes: 49 additions & 7 deletions src/components/occurenceItem.vue
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<template>
<q-list>
<div v-for="item in items" v-bind:key="item.id">
<q-item :to="'/transducer/' + item.transductor">
<q-list :class="{ 'q-ml-lg': type == 'occurence'}">
<div v-for="item in items" v-bind:key="item.id + item.transductor + item.start_time">
<q-item :to="'/transducer/' + item.transductor" class="q-my-sm">
<q-item-section>
<q-item-label>{{item.location}} ({{item.campus}})</q-item-label>
<q-item-label caption>{{showInfo(item)}}</q-item-label>
<q-item-label class="title-1">{{item.location}} ({{item.campus}})</q-item-label>
<q-item-label caption class="subtitle-1">{{showInfo(item)}}</q-item-label>
</q-item-section>
<q-item-section side top>
<q-item-label caption>{{showTime(item)}}</q-item-label>
<q-item-section side top class="label-container">
<q-item-label caption class="label-1">{{showTime(item)}}</q-item-label>
</q-item-section>
</q-item>
<q-separator spaced inset />
Expand All @@ -27,6 +27,10 @@ export default {
type: Array,
default: []
},
type: {
type: String,
default: ""
},
/* eslint-enable */
info: {
type: String,
Expand All @@ -43,3 +47,41 @@ export default {
}
}
</script>

<style lang="scss" scoped>
.title-1 {
width: 205px;
height: 24px;
font-family: Roboto;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.15px;
color: rgba(0, 0, 0, 0.87);
margin-bottom: 5%;
}
.subtitle-1 {
width: 290px;
height: 20px;
font-family: Roboto;
font-size: 14px;
line-height: 1.43;
letter-spacing: 0.25px;
color: rgba(0, 0, 0, 0.6);
}
.label-1 {
width: 78px;
height: 16px;
font-family: Roboto;
font-size: 12px;
line-height: 1.33;
letter-spacing: 0.4px;
text-align: right;
color: rgba(0, 0, 0, 0.87);
}
.label-container {
padding-left: 0px;
}
</style>
108 changes: 62 additions & 46 deletions src/components/occurences.vue
Original file line number Diff line number Diff line change
@@ -1,48 +1,55 @@
<template>
<div>
<q-spinner v-if="isLoading" size="3em" class="spinner"/>
<main-list
v-if="critical_tension.length > 0"
:title="'Tensão crítica'"
:items="critical_tension"
:type="'occurence'"
:info="'critical_tension'"
icon="error"
/>
<main-list
v-if="phase_drop.length > 0"
:title="'Queda de tensão'"
:items="phase_drop"
:type="'occurence'"
:info="'phase_drop'"
icon="error"
/>
<main-list
v-if="transductor_connection_fail.length > 0"
:title="'Falha de comunicação'"
:items="transductor_connection_fail"
:type="'occurence'"
:info="'conection_fail'"
icon="warning"
/>
<main-list
v-if="precarious_tension.length > 0"
:title="'Tensão precária'"
:items="precarious_tension"
:type="'occurence'"
:info="'precarious_tension'"
icon="warning"

/>

<div v-if="!isLoading &&
transductor_connection_fail.length === 0 &&
<div :class="{'container': isLoading || transductor_connection_fail.length === 0 &&
critical_tension.length === 0 &&
precarious_tension.length === 0 &&
phase_drop.length === 0">
<p>Não há nenhuma ocorrência em andamento</p>
phase_drop.length === 0 }">
<q-spinner v-if="isLoading" size="3em" class="spinner" />
<div
v-else-if="transductor_connection_fail.length === 0 &&
critical_tension.length === 0 &&
precarious_tension.length === 0 &&
phase_drop.length === 0"
>
<p >Não há nenhuma ocorrência em andamento</p>
</div>
<div v-else>
<main-list
v-if="critical_tension.length > 0"
:title="'Tensão crítica'"
:items="critical_tension"
:type="'occurence'"
:info="'critical_tension'"
:icon="serious_icon"
:serious="true"
/>
<main-list
v-if="phase_drop.length > 0"
:title="'Queda de fase'"
:items="phase_drop"
:type="'occurence'"
:info="'phase_drop'"
:icon="serious_icon"
:serious="true"
/>
<main-list
v-if="transductor_connection_fail.length > 0"
:title="'Falha de comunicação'"
:items="transductor_connection_fail"
:type="'occurence'"
:info="'conection_fail'"
:icon="light_icon"
:serious="false"
/>
<main-list
v-if="precarious_tension.length > 0"
:title="'Tensão precária'"
:items="precarious_tension"
:type="'occurence'"
:info="'precarious_tension'"
:icon="light_icon"
:serious="false"
/>
</div>

</div>
</template>
<script>
Expand All @@ -56,6 +63,8 @@ export default {
},
data () {
return {
serious_icon: 'img:statics/[email protected]',
light_icon: 'img:statics/[email protected]',
transductor_connection_fail: [],
critical_tension: [],
precarious_tension: [],
Expand All @@ -65,7 +74,7 @@ export default {
},
created () {
MASTER.get('occurences/')
.then((res) => {
.then(res => {
this.transductor_connection_fail = res.data.transductor_connection_fail
this.critical_tension = res.data.critical_tension
this.precarious_tension = res.data.precarious_tension
Expand All @@ -77,18 +86,25 @@ export default {
})
this.isLoading = false
})
.catch((err) => {
.catch(err => {
console.log('ERROR: ', err)
this.isLoading = false
})
}
}
</script>

<style lang="scss">
.spinner{
<style lang="scss" scoped>
.spinner {
display: flex;
flex: center;
margin: 0 auto;
}
.container {
height: 80vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
</style>
Loading

0 comments on commit 4531d59

Please sign in to comment.