Compare commits
125 Commits
master
...
US-43-Acti
Author | SHA1 | Date |
---|---|---|
Mariela | fcba6b673e | |
Eduardo Quiros | cbe1361f59 | |
Eduardo Quiros | bb748477e0 | |
Mariela | 3da1bf7755 | |
Mariela | 7dc9e0304d | |
Eduardo Quiros | bc10a8d3eb | |
Eduardo Quiros | b356c9bd20 | |
Mariela | 71c3006e49 | |
Mariela | f2e019361d | |
Mariela | 8398dd1f21 | |
Mariela | c4a726d050 | |
Mariela | 3294422e6a | |
Mariela | 52fea9937e | |
Mariela | 3463991cd0 | |
Mariela | 5f2e2e764e | |
Mariela | 8428463a9e | |
Mariela | ce8e16e135 | |
Mariela | a82ad4ff07 | |
Mariela | e0fe79a1e5 | |
Mariela | 2424d78bf6 | |
Mariela | 89469a687c | |
Mariela | e2f0b401c5 | |
Mariela | ca19da1d19 | |
Mariela | f0078082c6 | |
Mariela | 45b459742c | |
Mariela | 6d8fcd264e | |
Mariela | 823cba4c3f | |
Mariela | 8ce33eefa8 | |
Eduardo Quiros | 5895f74b9c | |
Mariela | 2499c0ab64 | |
Mariela | e449b28e87 | |
Mariela | 89134ec7a6 | |
Mariela | ac0984d5af | |
Mariela | fa4dc9f410 | |
Traym17 | 112813c216 | |
Eduardo Quiros | 9676e08e6d | |
Mariela | d6b95dd143 | |
Eduardo Quiros | 74c5560033 | |
Eduardo Quiros | a0a342f5dd | |
Traym17 | b9f04f7221 | |
Mariela | 38fc80f81e | |
Mariela | 162b838e75 | |
Mariela | 6200ebf42c | |
Eduardo Quiros | 721c9f6fa7 | |
Mariela | 609d5f6741 | |
Mariela | 8fa7e4a76f | |
Eduardo Quiros | b4dd2a7eb1 | |
Mariela | d4beea04aa | |
Mariela | 18cf5ea7cc | |
Eduardo Quiros | 4e1605c6d3 | |
Mariela | 060bd28bf8 | |
Mariela | eed7af0274 | |
Mariela | b35666ee5b | |
Mariela | b213900733 | |
Mariela | 443b09e8e3 | |
Mariela | 373012be14 | |
Mariela | fc2dc8e2a6 | |
Eduardo Quiros | a781bf42cf | |
Mariela | 6e24540d00 | |
Mariela | 859c420067 | |
Mariela | bb05560668 | |
Mariela | e59678d689 | |
Mariela | 82d0eeb4c6 | |
Mariela | e2d151e155 | |
Mariela | 2262484188 | |
Mariela | 09f774a5db | |
Mariela | d0fa99b49b | |
Mariela | 0f983cb182 | |
Mariela | c5dfdb480d | |
Mariela | 6cf9874cd5 | |
Mariela | 236bdcd052 | |
Mariela | 7ba62d9db1 | |
Mariela | 4a8effac6d | |
Mariela | 9dce98fc76 | |
Mariela | 0456b3735b | |
Mariela | 868049079d | |
Mariela | ea3d35158f | |
Mariela | 99ecc65b06 | |
Mariela | 61ec6018ec | |
Mariela | 440c13018a | |
Mariela | a9f2e39572 | |
Mariela | 7fc01af71e | |
Mariela | b89bcd68bb | |
Mariela | 16b00e9284 | |
Mariela | 18ab1f4700 | |
Mariela | 9cac88f333 | |
Mariela | 8ff8382d54 | |
Mariela | 17941893cb | |
Mariela | 2519136654 | |
Mariela | 14df451c0a | |
Mariela | 91ac92719a | |
Mariela | 95d5a5dd0f | |
Mariela | 86cfcc64cd | |
Mariela | a39dc26216 | |
Mariela | 06084ed899 | |
Eduardo Quiros | 437a092920 | |
Eduardo Quiros | 6d336228e8 | |
Eduardo Quiros | fd19e1f0cb | |
Eduardo Quiros | 6f6ded53bd | |
Eduardo Quiros | 66cfa942e7 | |
Eduardo Quiros | af680149bd | |
Eduardo Quiros | b00233cd3b | |
Eduardo Quiros | 0479a162c1 | |
Mariela | 23a8fa192d | |
Mariela | c498db7937 | |
Maria Sánchez | 2b9d8ab329 | |
Mariela | 9f0f2fc8ef | |
Mariela | 969c5c5d59 | |
Eduardo Quiros | c574326bcc | |
Eduardo Quiros | 6f827b799c | |
Mariela | d1c96e641f | |
Mariela | 7b435df0e3 | |
Mariela | ef3e9fcb56 | |
Mariela | 59d99c1cfb | |
Traym17 | 6871c3f22f | |
Traym17 | 8989178ed7 | |
Mariela | cf0b5c2d27 | |
Mariela | ce4dc9bf53 | |
Mariela | 51d76c9841 | |
Mariela | 1629edc32a | |
Mariela | 9b8e324bf1 | |
Mariela | 90c329a806 | |
Mariela | 4466d48bb6 | |
Mariela | 305a343936 | |
Mariela | 72ea9d2033 |
|
@ -29,3 +29,22 @@ jobs:
|
||||||
cd ./api-gateway
|
cd ./api-gateway
|
||||||
npm ci
|
npm ci
|
||||||
npm run build --if-present
|
npm run build --if-present
|
||||||
|
build-web:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
strategy:
|
||||||
|
matrix:
|
||||||
|
node-version: [14.x, 16.x, 18.x]
|
||||||
|
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
|
||||||
|
steps:
|
||||||
|
- name: checkout
|
||||||
|
uses: actions/checkout@v3
|
||||||
|
- name: Use Node.js ${{ matrix.node-version }}
|
||||||
|
uses: actions/setup-node@v3
|
||||||
|
with:
|
||||||
|
node-version: ${{ matrix.node-version }}
|
||||||
|
cache: 'npm'
|
||||||
|
- name: Test
|
||||||
|
run: |
|
||||||
|
cd ./web-ui/web-react/
|
||||||
|
npm ci
|
||||||
|
npm run build --if-present
|
|
@ -11,22 +11,12 @@ export class AppController {
|
||||||
@Body('last_name') last_name: string,
|
@Body('last_name') last_name: string,
|
||||||
@Body('email') email: string,
|
@Body('email') email: string,
|
||||||
@Body('phone') phone: number,
|
@Body('phone') phone: number,
|
||||||
@Body('password') password: string,
|
|
||||||
@Body('user_type') user_type: string,
|
@Body('user_type') user_type: string,
|
||||||
@Body('status') status: string,
|
@Body('status') status: string,
|
||||||
@Body('date_entry') date_entry: Date,
|
@Body('date_entry') date_entry: Date,
|
||||||
) {
|
) {
|
||||||
return this.appService.createAdminSystem(
|
return this.appService.createAdminSystem(dni, name, last_name, email, phone,
|
||||||
dni,
|
user_type, status, date_entry);
|
||||||
name,
|
|
||||||
last_name,
|
|
||||||
email,
|
|
||||||
phone,
|
|
||||||
password,
|
|
||||||
user_type,
|
|
||||||
status,
|
|
||||||
date_entry,
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Post('user/createGuard')
|
@Post('user/createGuard')
|
||||||
|
@ -37,24 +27,30 @@ export class AppController {
|
||||||
@Body('last_name') last_name: string,
|
@Body('last_name') last_name: string,
|
||||||
@Body('email') email: string,
|
@Body('email') email: string,
|
||||||
@Body('phone') phone: number,
|
@Body('phone') phone: number,
|
||||||
@Body('password') password: string,
|
|
||||||
@Body('user_type') user_type: string,
|
@Body('user_type') user_type: string,
|
||||||
@Body('status') status: string,
|
@Body('status') status: string,
|
||||||
@Body('date_entry') date_entry: Date,
|
@Body('date_entry') date_entry: Date,
|
||||||
@Body('community_id') community_id: string,
|
@Body('community_id') community_id: string,
|
||||||
) {
|
) {
|
||||||
return this.appService.createGuard(
|
return this.appService.createGuard(dni, name, last_name, email, phone,
|
||||||
dni,
|
user_type, status, date_entry,community_id);
|
||||||
name,
|
}
|
||||||
last_name,
|
|
||||||
email,
|
@Post('user/createAdminCommunity')
|
||||||
phone,
|
createAdminCommunity(
|
||||||
password,
|
//Nombre, Apellidos, Correo electrónico, Cédula, Teléfono, Contraseña
|
||||||
user_type,
|
@Body('dni') dni: string,
|
||||||
status,
|
@Body('name') name: string,
|
||||||
date_entry,
|
@Body('last_name') last_name: string,
|
||||||
community_id,
|
@Body('email') email: string,
|
||||||
);
|
@Body('phone') phone: number,
|
||||||
|
@Body('user_type') user_type: string,
|
||||||
|
@Body('status') status: string,
|
||||||
|
@Body('date_entry') date_entry: Date,
|
||||||
|
@Body('community_id') community_id:string
|
||||||
|
) {
|
||||||
|
return this.appService.createAdminCommunity(dni, name, last_name, email, phone,
|
||||||
|
user_type, status, date_entry,community_id);
|
||||||
}
|
}
|
||||||
|
|
||||||
@Post('user/createUser')
|
@Post('user/createUser')
|
||||||
|
@ -106,21 +102,40 @@ export class AppController {
|
||||||
allUsersAdminComunidad() {
|
allUsersAdminComunidad() {
|
||||||
return this.appService.allUsersAdminComunidad();
|
return this.appService.allUsersAdminComunidad();
|
||||||
}
|
}
|
||||||
|
|
||||||
@Get('user/findGuards/:community')
|
@Get('user/findGuards/:community')
|
||||||
findGuardsCommunity(@Param('community_id') community_id: string) {
|
findGuardsCommunity(@Param('community_id') community_id: string) {
|
||||||
return this.appService.findGuardsCommunity(community_id);
|
return this.appService.findGuardsCommunity(community_id);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@Get('user/findTenants/:community_id')
|
||||||
|
allUsersTenants(@Param('community_id') paramCommunity_id: string) {
|
||||||
|
return this.appService.findTenantsCommunity(paramCommunity_id);
|
||||||
|
}
|
||||||
|
|
||||||
@Get('user/find/:dni')
|
@Get('user/find/:dni')
|
||||||
findUser(@Param('dni') paramUserDNI: string) {
|
findUser(@Param('dni') paramUserDNI: string) {
|
||||||
return this.appService.findUser(paramUserDNI);
|
return this.appService.findUser(paramUserDNI);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@Get('user/findUserById/:id')
|
||||||
|
findUserById(@Param('id') id: string) {
|
||||||
|
return this.appService.findUserById(id);
|
||||||
|
}
|
||||||
|
|
||||||
@Delete('user/deleteAdminSystem/:id')
|
@Delete('user/deleteAdminSystem/:id')
|
||||||
deleteAdminSystem(@Param('id') id: string) {
|
deleteAdminSystem(@Param('id') id: string) {
|
||||||
return this.appService.deleteAdminSystem(id);
|
return this.appService.deleteAdminSystem(id);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@Post('user/changeStatus')
|
||||||
|
changeStatusUser(
|
||||||
|
@Body('id') pId: string,
|
||||||
|
@Body('status') pStatus: string,
|
||||||
|
) {
|
||||||
|
return this.appService.changeStatusUser(pId, pStatus);
|
||||||
|
}
|
||||||
|
|
||||||
// #==== API Communities
|
// #==== API Communities
|
||||||
@Post('community/createCommunity')
|
@Post('community/createCommunity')
|
||||||
createCommunity(
|
createCommunity(
|
||||||
|
@ -166,7 +181,13 @@ export class AppController {
|
||||||
findCommunityAdmin(@Body('community_id') community_id: string) {
|
findCommunityAdmin(@Body('community_id') community_id: string) {
|
||||||
return this.appService.findCommunityAdmin(community_id);
|
return this.appService.findCommunityAdmin(community_id);
|
||||||
}
|
}
|
||||||
|
@Post('community/changeStatus')
|
||||||
|
changeStatusCommunity(
|
||||||
|
@Body('id') pId: string,
|
||||||
|
@Body('status') pStatus: string,
|
||||||
|
) {
|
||||||
|
return this.appService.changeStatusCommunity(pId, pStatus);
|
||||||
|
}
|
||||||
// #==== API Common Areas
|
// #==== API Common Areas
|
||||||
@Post('commonArea/createCommonArea')
|
@Post('commonArea/createCommonArea')
|
||||||
createCommonArea(
|
createCommonArea(
|
||||||
|
@ -195,6 +216,17 @@ export class AppController {
|
||||||
return this.appService.findCommonArea(paramCommonAreaId);
|
return this.appService.findCommonArea(paramCommonAreaId);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@Get('commonArea/findByCommunity/:community_id')
|
||||||
|
findByCommunity(@Param('community_id') paramCommunityId: string) {
|
||||||
|
return this.appService.findByCommunity(paramCommunityId);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@Delete('commonArea/deleteCommonArea/:id')
|
||||||
|
deleteCommonArea(@Param('id') id: string) {
|
||||||
|
return this.appService.deleteCommonArea(id);
|
||||||
|
}
|
||||||
|
|
||||||
// #==== API GUEST
|
// #==== API GUEST
|
||||||
//#API userService - create user
|
//#API userService - create user
|
||||||
@Post('guest/createGuest')
|
@Post('guest/createGuest')
|
||||||
|
|
|
@ -54,64 +54,47 @@ export class AppService {
|
||||||
}
|
}
|
||||||
|
|
||||||
//POST parameter from API
|
//POST parameter from API
|
||||||
createAdminSystem(
|
createAdminSystem(dni: string, name: string, last_name: string, email: string, phone: number
|
||||||
dni: string,
|
, user_type: string, status: string, date_entry: Date) {
|
||||||
name: string,
|
|
||||||
last_name: string,
|
|
||||||
email: string,
|
|
||||||
phone: number,
|
|
||||||
password: string,
|
|
||||||
user_type: string,
|
|
||||||
status: string,
|
|
||||||
date_entry: Date,
|
|
||||||
) {
|
|
||||||
const pattern = { cmd: 'createAdminSystem' };
|
const pattern = { cmd: 'createAdminSystem' };
|
||||||
const payload = {
|
const payload = {
|
||||||
dni: dni,
|
dni: dni, name: name, last_name: last_name, email: email, phone: phone,
|
||||||
name: name,
|
password: this.generatePassword(), user_type: user_type, status: status, date_entry: date_entry
|
||||||
last_name: last_name,
|
|
||||||
email: email,
|
|
||||||
phone: phone,
|
|
||||||
password: password,
|
|
||||||
user_type: user_type,
|
|
||||||
status: status,
|
|
||||||
date_entry: date_entry,
|
|
||||||
};
|
};
|
||||||
return this.clientUserApp
|
return this.clientUserApp
|
||||||
.send<string>(pattern, payload)
|
.send<string>(pattern, payload)
|
||||||
.pipe(map((message: string) => ({ message })));
|
.pipe(map((message: string) => ({ message })));
|
||||||
}
|
}
|
||||||
|
|
||||||
createGuard(
|
createGuard(dni: string, name: string, last_name: string, email: string, phone: number
|
||||||
dni: string,
|
, user_type: string, status: string, date_entry: Date, community_id: string) {
|
||||||
name: string,
|
|
||||||
last_name: string,
|
|
||||||
email: string,
|
|
||||||
phone: number,
|
|
||||||
password: string,
|
|
||||||
user_type: string,
|
|
||||||
status: string,
|
|
||||||
date_entry: Date,
|
|
||||||
community_id: string,
|
|
||||||
) {
|
|
||||||
const pattern = { cmd: 'createGuard' };
|
const pattern = { cmd: 'createGuard' };
|
||||||
const payload = {
|
const payload = {
|
||||||
dni: dni,
|
dni: dni, name: name, last_name: last_name, email: email, phone: phone,
|
||||||
name: name,
|
password: this.generatePassword(), user_type: user_type, status: status, date_entry: date_entry, community_id
|
||||||
last_name: last_name,
|
|
||||||
email: email,
|
|
||||||
phone: phone,
|
|
||||||
password: password,
|
|
||||||
user_type: user_type,
|
|
||||||
status: status,
|
|
||||||
date_entry: date_entry,
|
|
||||||
community_id,
|
|
||||||
};
|
};
|
||||||
return this.clientUserApp
|
return this.clientUserApp
|
||||||
.send<string>(pattern, payload)
|
.send<string>(pattern, payload)
|
||||||
.pipe(map((message: string) => ({ message })));
|
.pipe(map((message: string) => ({ message })));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
createAdminCommunity(dni: string, name: string, last_name: string, email: string, phone: number
|
||||||
|
, user_type: string, status: string, date_entry: Date, community_id: string) {
|
||||||
|
const pattern = { cmd: 'createAdminCommunity' };
|
||||||
|
const payload = {
|
||||||
|
dni: dni, name: name, last_name: last_name, email: email, phone: phone,
|
||||||
|
password: this.generatePassword(), user_type: user_type, status: status, date_entry: date_entry, community_id
|
||||||
|
|
||||||
|
};
|
||||||
|
return this.clientUserApp
|
||||||
|
.send<string>(pattern, payload)
|
||||||
|
.pipe(
|
||||||
|
map((message: string) => ({ message })),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
allUsers() {
|
allUsers() {
|
||||||
const pattern = { cmd: 'findAllUsers' };
|
const pattern = { cmd: 'findAllUsers' };
|
||||||
const payload = {};
|
const payload = {};
|
||||||
|
@ -136,6 +119,17 @@ export class AppService {
|
||||||
.pipe(map((message: string) => ({ message })));
|
.pipe(map((message: string) => ({ message })));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
allUsersTenants() {
|
||||||
|
const pattern = { cmd: 'findTenants' };
|
||||||
|
const payload = {};
|
||||||
|
return this.clientUserApp
|
||||||
|
.send<string>(pattern, payload)
|
||||||
|
.pipe(
|
||||||
|
map((message: string) => ({ message })),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
//GET parameter from API
|
//GET parameter from API
|
||||||
findUser(paramUserDNI: string) {
|
findUser(paramUserDNI: string) {
|
||||||
const pattern = { cmd: 'findUserDNI' };
|
const pattern = { cmd: 'findUserDNI' };
|
||||||
|
@ -153,6 +147,14 @@ export class AppService {
|
||||||
.pipe(map((message: string) => ({ message })));
|
.pipe(map((message: string) => ({ message })));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
findTenantsCommunity(community_id: string) {
|
||||||
|
const pattern = { cmd: 'findTenantsCommunity' };
|
||||||
|
const payload = { community_id: community_id };
|
||||||
|
return this.clientUserApp
|
||||||
|
.send<string>(pattern, payload)
|
||||||
|
.pipe(map((message: string) => ({ message })));
|
||||||
|
}
|
||||||
|
|
||||||
deleteAdminSystem(id: string) {
|
deleteAdminSystem(id: string) {
|
||||||
const pattern = { cmd: 'deleteAdminSystem' };
|
const pattern = { cmd: 'deleteAdminSystem' };
|
||||||
const payload = { id: id };
|
const payload = { id: id };
|
||||||
|
@ -178,20 +180,37 @@ export class AppService {
|
||||||
.pipe(map((message: string) => ({ message })));
|
.pipe(map((message: string) => ({ message })));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//GET parameter from API
|
||||||
|
findUserById(id: string) {
|
||||||
|
const pattern = { cmd: 'findById' };
|
||||||
|
const payload = { id: id };
|
||||||
|
return this.clientUserApp
|
||||||
|
.send<string>(pattern, payload)
|
||||||
|
.pipe(map((message: string) => ({ message })));
|
||||||
|
}
|
||||||
|
|
||||||
|
changeStatusUser(pId: string, pStatus: string) {
|
||||||
|
const pattern = { cmd: 'changeStatus' };
|
||||||
|
const payload = { id: pId, status: pStatus };
|
||||||
|
return this.clientUserApp
|
||||||
|
.send<string>(pattern, payload)
|
||||||
|
.pipe(map((message: string) => ({ message })));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// ====================== COMMUNITIES ===============================
|
// ====================== COMMUNITIES ===============================
|
||||||
|
changeStatusCommunity(pId: string, pStatus: string) {
|
||||||
|
const pattern = { cmd: 'changeStatus' };
|
||||||
|
const payload = { id: pId, status: pStatus };
|
||||||
|
return this.clientCommunityApp
|
||||||
|
.send<string>(pattern, payload)
|
||||||
|
.pipe(map((message: string) => ({ message })));
|
||||||
|
}
|
||||||
|
|
||||||
//POST parameter from API
|
//POST parameter from API
|
||||||
createCommunity(
|
createCommunity(name: string, province: string, canton: string, district: string
|
||||||
name: string,
|
, num_houses: number, phone: string, status: string, date_entry: Date, houses: []) {
|
||||||
province: string,
|
|
||||||
canton: string,
|
|
||||||
district: string,
|
|
||||||
num_houses: number,
|
|
||||||
phone: string,
|
|
||||||
status: string,
|
|
||||||
date_entry: Date,
|
|
||||||
houses: [],
|
|
||||||
) {
|
|
||||||
const pattern = { cmd: 'createCommunity' };
|
const pattern = { cmd: 'createCommunity' };
|
||||||
const payload = {
|
const payload = {
|
||||||
name: name,
|
name: name,
|
||||||
|
@ -250,6 +269,7 @@ export class AppService {
|
||||||
hourMax: hourMax,
|
hourMax: hourMax,
|
||||||
bookable: bookable,
|
bookable: bookable,
|
||||||
community_id: community_id,
|
community_id: community_id,
|
||||||
|
status: '1'
|
||||||
};
|
};
|
||||||
return this.clientCommonAreaApp
|
return this.clientCommonAreaApp
|
||||||
.send<string>(pattern, payload)
|
.send<string>(pattern, payload)
|
||||||
|
@ -273,6 +293,26 @@ export class AppService {
|
||||||
.pipe(map((message: string) => ({ message })));
|
.pipe(map((message: string) => ({ message })));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//GET parameter from API
|
||||||
|
findByCommunity(paramCommunityId: string) {
|
||||||
|
const pattern = { cmd: 'findByCommunity' };
|
||||||
|
const payload = { community_id: paramCommunityId };
|
||||||
|
return this.clientCommonAreaApp
|
||||||
|
.send<string>(pattern, payload)
|
||||||
|
.pipe(map((message: string) => ({ message })));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//DELETE parameter from API
|
||||||
|
deleteCommonArea(paramCommonAreaId: string) {
|
||||||
|
const pattern = { cmd: 'removeCommonArea' };
|
||||||
|
const payload = { id: paramCommonAreaId };
|
||||||
|
return this.clientCommonAreaApp
|
||||||
|
.send<string>(pattern, payload)
|
||||||
|
.pipe(map((message: string) => ({ message })));
|
||||||
|
}
|
||||||
|
|
||||||
// ====================== GUESTS ===============================
|
// ====================== GUESTS ===============================
|
||||||
|
|
||||||
//POST parameter from API
|
//POST parameter from API
|
||||||
|
@ -287,13 +327,8 @@ export class AppService {
|
||||||
) {
|
) {
|
||||||
const pattern = { cmd: 'createGuest' };
|
const pattern = { cmd: 'createGuest' };
|
||||||
const payload = {
|
const payload = {
|
||||||
name: name,
|
name: name, last_name: last_name, dni: dni, number_plate: number_plate, phone: phone,
|
||||||
last_name: last_name,
|
status: status, date_entry: date_entry
|
||||||
dni: dni,
|
|
||||||
number_plate: number_plate,
|
|
||||||
phone: phone,
|
|
||||||
status: status,
|
|
||||||
date_entry: date_entry,
|
|
||||||
};
|
};
|
||||||
return this.clientGuestApp
|
return this.clientGuestApp
|
||||||
.send<string>(pattern, payload)
|
.send<string>(pattern, payload)
|
||||||
|
@ -331,13 +366,8 @@ export class AppService {
|
||||||
) {
|
) {
|
||||||
const pattern = { cmd: 'createPayment' };
|
const pattern = { cmd: 'createPayment' };
|
||||||
const payload = {
|
const payload = {
|
||||||
date_payment: date_payment,
|
date_payment: date_payment, mount: mount, description: description,
|
||||||
mount: mount,
|
period: period, status: status, user_id: user_id, communty_id: communty_id
|
||||||
description: description,
|
|
||||||
period: period,
|
|
||||||
status: status,
|
|
||||||
user_id: user_id,
|
|
||||||
communty_id: communty_id,
|
|
||||||
};
|
};
|
||||||
return this.clientPaymentApp
|
return this.clientPaymentApp
|
||||||
.send<string>(pattern, payload)
|
.send<string>(pattern, payload)
|
||||||
|
@ -364,22 +394,12 @@ export class AppService {
|
||||||
// ====================== RESERVATIONS ===============================
|
// ====================== RESERVATIONS ===============================
|
||||||
|
|
||||||
//POST parameter from API
|
//POST parameter from API
|
||||||
createReservation(
|
createReservation(start_time: string, finish_time: string, status: string,
|
||||||
start_time: string,
|
date_entry: Date, user_id: string, common_area_id: string) {
|
||||||
finish_time: string,
|
|
||||||
status: string,
|
|
||||||
date_entry: Date,
|
|
||||||
user_id: string,
|
|
||||||
common_area_id: string,
|
|
||||||
) {
|
|
||||||
const pattern = { cmd: 'createReservation' };
|
const pattern = { cmd: 'createReservation' };
|
||||||
const payload = {
|
const payload = {
|
||||||
start_time: start_time,
|
start_time: start_time, finish_time: finish_time, status: status,
|
||||||
finish_time: finish_time,
|
date_entry: date_entry, user_id: user_id, common_area_id: common_area_id
|
||||||
status: status,
|
|
||||||
date_entry: date_entry,
|
|
||||||
user_id: user_id,
|
|
||||||
common_area_id: common_area_id,
|
|
||||||
};
|
};
|
||||||
return this.clientReservationApp
|
return this.clientReservationApp
|
||||||
.send<string>(pattern, payload)
|
.send<string>(pattern, payload)
|
||||||
|
@ -406,18 +426,12 @@ export class AppService {
|
||||||
// ====================== POSTS ===============================
|
// ====================== POSTS ===============================
|
||||||
|
|
||||||
//POST parameter from API
|
//POST parameter from API
|
||||||
createPost(
|
createPost(post: string, date_entry: Date, user_id: string,
|
||||||
post: string,
|
community_id: string) {
|
||||||
date_entry: Date,
|
|
||||||
user_id: string,
|
|
||||||
community_id: string,
|
|
||||||
) {
|
|
||||||
const pattern = { cmd: 'createPost' };
|
const pattern = { cmd: 'createPost' };
|
||||||
const payload = {
|
const payload = {
|
||||||
post: post,
|
post: post, date_entry: date_entry, user_id: user_id,
|
||||||
date_entry: date_entry,
|
community_id: community_id
|
||||||
user_id: user_id,
|
|
||||||
community_id: community_id,
|
|
||||||
};
|
};
|
||||||
return this.clientPostApp
|
return this.clientPostApp
|
||||||
.send<string>(pattern, payload)
|
.send<string>(pattern, payload)
|
||||||
|
@ -444,18 +458,12 @@ export class AppService {
|
||||||
// ====================== COMMNENT POSTS ===============================
|
// ====================== COMMNENT POSTS ===============================
|
||||||
|
|
||||||
//Comment parameter from API
|
//Comment parameter from API
|
||||||
createComment(
|
createComment(comment: string, date_entry: Date, user_id: string,
|
||||||
comment: string,
|
post_id: string) {
|
||||||
date_entry: Date,
|
|
||||||
user_id: string,
|
|
||||||
post_id: string,
|
|
||||||
) {
|
|
||||||
const pattern = { cmd: 'createComment' };
|
const pattern = { cmd: 'createComment' };
|
||||||
const payload = {
|
const payload = {
|
||||||
comment: comment,
|
comment: comment, date_entry: date_entry, user_id: user_id,
|
||||||
date_entry: date_entry,
|
post_id: post_id
|
||||||
user_id: user_id,
|
|
||||||
post_id: post_id,
|
|
||||||
};
|
};
|
||||||
return this.clientPostApp
|
return this.clientPostApp
|
||||||
.send<string>(pattern, payload)
|
.send<string>(pattern, payload)
|
||||||
|
@ -482,18 +490,12 @@ export class AppService {
|
||||||
// ====================== REPORTS ===============================
|
// ====================== REPORTS ===============================
|
||||||
|
|
||||||
//Report parameter from API
|
//Report parameter from API
|
||||||
createReport(
|
createReport(action: string, description: string, date_entry: Date,
|
||||||
action: string,
|
user_id: string) {
|
||||||
description: string,
|
|
||||||
date_entry: Date,
|
|
||||||
user_id: string,
|
|
||||||
) {
|
|
||||||
const pattern = { cmd: 'createReport' };
|
const pattern = { cmd: 'createReport' };
|
||||||
const payload = {
|
const payload = {
|
||||||
action: action,
|
action: action, description: description, date_entry: date_entry,
|
||||||
description: description,
|
user_id: user_id
|
||||||
date_entry: date_entry,
|
|
||||||
user_id: user_id,
|
|
||||||
};
|
};
|
||||||
return this.clientReportApp
|
return this.clientReportApp
|
||||||
.send<string>(pattern, payload)
|
.send<string>(pattern, payload)
|
||||||
|
@ -532,4 +534,22 @@ export class AppService {
|
||||||
.send<string>(pattern, payload)
|
.send<string>(pattern, payload)
|
||||||
.pipe(map((message: string) => ({ message })));
|
.pipe(map((message: string) => ({ message })));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Function to generate combination of password */
|
||||||
|
generatePassword() {
|
||||||
|
var pass = '';
|
||||||
|
var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' +
|
||||||
|
'abcdefghijklmnopqrstuvwxyz0123456789@#$';
|
||||||
|
|
||||||
|
for (let i = 1; i <= 8; i++) {
|
||||||
|
var char = Math.floor(Math.random()
|
||||||
|
* str.length + 1);
|
||||||
|
|
||||||
|
pass += str.charAt(char)
|
||||||
|
}
|
||||||
|
|
||||||
|
return pass;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
123
mobile-ui/App.js
|
@ -1,123 +0,0 @@
|
||||||
import React, {useState} from "react";
|
|
||||||
import { Image } from "react-native";
|
|
||||||
import AppLoading from "expo-app-loading";
|
|
||||||
import { useFonts } from '@use-expo/font';
|
|
||||||
import { Asset } from "expo-asset";
|
|
||||||
import { Block, GalioProvider } from "galio-framework";
|
|
||||||
import { NavigationContainer } from "@react-navigation/native";
|
|
||||||
|
|
||||||
// Before rendering any navigation stack
|
|
||||||
import { enableScreens } from "react-native-screens";
|
|
||||||
enableScreens();
|
|
||||||
|
|
||||||
import Screens from "./navigation/Screens";
|
|
||||||
import { Images, articles, argonTheme } from "./constants";
|
|
||||||
|
|
||||||
// cache app images
|
|
||||||
const assetImages = [
|
|
||||||
Images.Onboarding,
|
|
||||||
Images.LogoOnboarding,
|
|
||||||
Images.Logo,
|
|
||||||
Images.Pro,
|
|
||||||
Images.ArgonLogo,
|
|
||||||
Images.iOSLogo,
|
|
||||||
Images.androidLogo
|
|
||||||
];
|
|
||||||
|
|
||||||
// cache product images
|
|
||||||
articles.map(article => assetImages.push(article.image));
|
|
||||||
|
|
||||||
function cacheImages(images) {
|
|
||||||
return images.map(image => {
|
|
||||||
if (typeof image === "string") {
|
|
||||||
return Image.prefetch(image);
|
|
||||||
} else {
|
|
||||||
return Asset.fromModule(image).downloadAsync();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export default props => {
|
|
||||||
const [isLoadingComplete, setLoading] = useState(false);
|
|
||||||
let [fontsLoaded] = useFonts({
|
|
||||||
'ArgonExtra': require('./assets/font/argon.ttf'),
|
|
||||||
});
|
|
||||||
|
|
||||||
function _loadResourcesAsync() {
|
|
||||||
return Promise.all([...cacheImages(assetImages)]);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _handleLoadingError(error) {
|
|
||||||
// In this case, you might want to report the error to your error
|
|
||||||
// reporting service, for example Sentry
|
|
||||||
console.warn(error);
|
|
||||||
};
|
|
||||||
|
|
||||||
function _handleFinishLoading() {
|
|
||||||
setLoading(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
if(!fontsLoaded && !isLoadingComplete) {
|
|
||||||
return (
|
|
||||||
<AppLoading
|
|
||||||
startAsync={_loadResourcesAsync}
|
|
||||||
onError={_handleLoadingError}
|
|
||||||
onFinish={_handleFinishLoading}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
} else if(fontsLoaded) {
|
|
||||||
return (
|
|
||||||
<NavigationContainer>
|
|
||||||
<GalioProvider theme={argonTheme}>
|
|
||||||
<Block flex>
|
|
||||||
<Screens />
|
|
||||||
</Block>
|
|
||||||
</GalioProvider>
|
|
||||||
</NavigationContainer>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// export default class App extends React.Component {
|
|
||||||
// state = {
|
|
||||||
// isLoadingComplete: false
|
|
||||||
// };
|
|
||||||
|
|
||||||
// render() {
|
|
||||||
// if (!this.state.isLoadingComplete) {
|
|
||||||
// return (
|
|
||||||
// <AppLoading
|
|
||||||
// startAsync={this._loadResourcesAsync}
|
|
||||||
// onError={this._handleLoadingError}
|
|
||||||
// onFinish={this._handleFinishLoading}
|
|
||||||
// />
|
|
||||||
// );
|
|
||||||
// } else {
|
|
||||||
// return (
|
|
||||||
// <NavigationContainer>
|
|
||||||
// <GalioProvider theme={argonTheme}>
|
|
||||||
// <Block flex>
|
|
||||||
// <Screens />
|
|
||||||
// </Block>
|
|
||||||
// </GalioProvider>
|
|
||||||
// </NavigationContainer>
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// _loadResourcesAsync = async () => {
|
|
||||||
// return Promise.all([...cacheImages(assetImages)]);
|
|
||||||
// };
|
|
||||||
|
|
||||||
// _handleLoadingError = error => {
|
|
||||||
// // In this case, you might want to report the error to your error
|
|
||||||
// // reporting service, for example Sentry
|
|
||||||
// console.warn(error);
|
|
||||||
// };
|
|
||||||
|
|
||||||
// _handleFinishLoading = () => {
|
|
||||||
// this.setState({ isLoadingComplete: true });
|
|
||||||
// };
|
|
||||||
// }
|
|
|
@ -1,14 +1,9 @@
|
||||||
import { StatusBar } from 'expo-status-bar';
|
import { StatusBar } from 'expo-status-bar';
|
||||||
import { StyleSheet, Text, View } from 'react-native';
|
import { StyleSheet, Text, View } from 'react-native';
|
||||||
//import { NavigationContainer } from "@react-navigation/native";
|
|
||||||
import { Button } from './components';
|
|
||||||
|
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
return (
|
return (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
|
|
||||||
<Button>testing</Button>
|
|
||||||
<Text>Open up App.tsx to start working on your app!</Text>
|
<Text>Open up App.tsx to start working on your app!</Text>
|
||||||
<StatusBar style="auto" />
|
<StatusBar style="auto" />
|
||||||
</View>
|
</View>
|
||||||
|
|
|
@ -1,18 +1,14 @@
|
||||||
{
|
{
|
||||||
"expo": {
|
"expo": {
|
||||||
"name": "Argon FREE React Native",
|
"name": "mobile-ui",
|
||||||
"slug": "argon-free-react-native",
|
"slug": "mobile-ui",
|
||||||
"privacy": "public",
|
"version": "1.0.0",
|
||||||
"platforms": [
|
|
||||||
"ios",
|
|
||||||
"android"
|
|
||||||
],
|
|
||||||
"version": "1.7.1",
|
|
||||||
"orientation": "portrait",
|
"orientation": "portrait",
|
||||||
"icon": "./assets/icon.png",
|
"icon": "./assets/icon.png",
|
||||||
|
"userInterfaceStyle": "light",
|
||||||
"splash": {
|
"splash": {
|
||||||
"image": "./assets/splash.png",
|
"image": "./assets/splash.png",
|
||||||
"resizeMode": "cover",
|
"resizeMode": "contain",
|
||||||
"backgroundColor": "#ffffff"
|
"backgroundColor": "#ffffff"
|
||||||
},
|
},
|
||||||
"updates": {
|
"updates": {
|
||||||
|
@ -24,6 +20,14 @@
|
||||||
"ios": {
|
"ios": {
|
||||||
"supportsTablet": true
|
"supportsTablet": true
|
||||||
},
|
},
|
||||||
"description": "Argon React Native, based on Argon Design System. Coded by Creative Tim"
|
"android": {
|
||||||
|
"adaptiveIcon": {
|
||||||
|
"foregroundImage": "./assets/adaptive-icon.png",
|
||||||
|
"backgroundColor": "#FFFFFF"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"web": {
|
||||||
|
"favicon": "./assets/favicon.png"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
After Width: | Height: | Size: 17 KiB |
After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 9.4 KiB |
Before Width: | Height: | Size: 3.8 KiB |
Before Width: | Height: | Size: 7.9 KiB |
Before Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 114 KiB |
Before Width: | Height: | Size: 271 KiB |
Before Width: | Height: | Size: 778 KiB |
Before Width: | Height: | Size: 2.9 KiB |
Before Width: | Height: | Size: 6.8 KiB |
Before Width: | Height: | Size: 77 KiB |
Before Width: | Height: | Size: 74 KiB |
Before Width: | Height: | Size: 7.0 KiB |
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M20,0H4C2.3,0,1,1.3,1,3v20c0,0.6,0.4,1,1,1h20c0.6,0,1-0.4,1-1V3C23,1.3,21.7,0,20,0z M12,16 c-3.3,0-6-2.7-6-6c0-0.6,0.4-1,1-1s1,0.4,1,1c0,2.2,1.8,4,4,4s4-1.8,4-4c0-0.6,0.4-1,1-1s1,0.4,1,1C18,13.3,15.3,16,12,16z M20,4H4 C3.4,4,3,3.6,3,3s0.4-1,1-1h16c0.6,0,1,0.4,1,1S20.6,4,20,4z"/></g></svg>
|
|
Before Width: | Height: | Size: 497 B |
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" width="12" height="12"><g class="nc-icon-wrapper" fill="#444444"><path d="M1,10.5A1.5,1.5,0,0,0,2.5,12h7A1.5,1.5,0,0,0,11,10.5V7H1Z" fill="#444444"/> <path d="M9.838,4,8.171.665a.75.75,0,0,0-1.342.67L8.162,4H3.838L5.171,1.335A.75.75,0,0,0,3.829.665L2.162,4H0V6H12V4Z" fill="#444444" data-color="color-2"/></g></svg>
|
|
Before Width: | Height: | Size: 434 B |
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path d="M20,10V8A8,8,0,0,0,4,8v2a4.441,4.441,0,0,1-1.547,3.193A4.183,4.183,0,0,0,1,16c0,2.5,4.112,4,11,4s11-1.5,11-4a4.183,4.183,0,0,0-1.453-2.807A4.441,4.441,0,0,1,20,10Z" fill="#444444"/> <path data-color="color-2" d="M9.145,21.9a2.992,2.992,0,0,0,5.71,0c-.894.066-1.844.1-2.855.1S10.039,21.968,9.145,21.9Z" fill="#444444"/></g></svg>
|
|
Before Width: | Height: | Size: 521 B |
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><rect data-color="color-2" x="4" y="10" width="4" height="3" fill="#444444"/> <rect data-color="color-2" x="10" y="10" width="4" height="3" fill="#444444"/> <rect data-color="color-2" x="4" y="15" width="4" height="3" fill="#444444"/> <rect data-color="color-2" x="10" y="15" width="4" height="3" fill="#444444"/> <rect data-color="color-2" x="16" y="10" width="4" height="3" fill="#444444"/> <path d="M23,3H18V1a1,1,0,0,0-2,0V3H8V1A1,1,0,0,0,6,1V3H1A1,1,0,0,0,0,4V22a1,1,0,0,0,1,1H23a1,1,0,0,0,1-1V4A1,1,0,0,0,23,3ZM22,21H2V7H22Z" fill="#444444"/></g></svg>
|
|
Before Width: | Height: | Size: 742 B |
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path data-color="color-2" fill="#444444" d="M13,11h10.949C23.466,5.181,18.819,0.534,13,0.051V11z"/> <path fill="#444444" d="M12.414,13l-8.155,8.155C6.351,22.926,9.051,24,12,24c6.279,0,11.438-4.851,11.949-11H12.414z"/> <path fill="#444444" d="M11,11.586V0.051C4.851,0.562,0,5.721,0,12c0,2.949,1.074,5.649,2.845,7.741L11,11.586z"/></g></svg>
|
|
Before Width: | Height: | Size: 524 B |
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M18.768,1.36C18.578,1.132,18.297,1,18,1H6C5.703,1,5.422,1.132,5.232,1.36l-5,6 c-0.294,0.353-0.31,0.861-0.039,1.231l11,15C11.382,23.848,11.682,24,12,24s0.618-0.152,0.807-0.409l11-15 c0.271-0.371,0.256-0.878-0.039-1.231L18.768,1.36z M19,9H5V7h14V9z"/></g></svg>
|
|
Before Width: | Height: | Size: 467 B |
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path d="M8,15A7,7,0,0,1,3.333,2.783l1.334,1.49a5,5,0,1,0,6.666,0l1.333-1.49A7,7,0,0,1,8,15Z" fill="#444444"/> <rect x="7" width="2" height="7" fill="#444444" data-color="color-2"/></g></svg>
|
|
Before Width: | Height: | Size: 375 B |
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M16,3.6L15.2,2C8.3,4,4.8,8.4,4.8,8.4L1.6,6L0,7.6L4.8,14C8.5,7.1,16,3.6,16,3.6z"/></g></svg>
|
|
Before Width: | Height: | Size: 299 B |
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><rect x="22" y="11" fill="#444444" width="2" height="6"/> <path data-color="color-2" fill="#444444" d="M13.241,15.73C12.847,15.91,12.43,16,12,16s-0.847-0.09-1.24-0.269L4,12.658V18 c0,2.626,4.024,4,8,4s8-1.374,8-4v-5.341L13.241,15.73z"/> <path fill="#444444" d="M23.414,7.09l-11-5c-0.263-0.119-0.564-0.119-0.827,0l-11,5C0.229,7.252,0,7.607,0,8s0.229,0.748,0.586,0.91 l11,5C11.718,13.97,11.859,14,12,14s0.282-0.03,0.414-0.09l11-5C23.771,8.748,24,8.393,24,8S23.771,7.252,23.414,7.09z"/></g></svg>
|
|
Before Width: | Height: | Size: 677 B |
|
@ -1,5 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
||||||
<g class="nc-icon-wrapper" fill="#444444">
|
|
||||||
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 276 B |
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><polygon fill="#444444" points="17,1.382 13,3.382 13,22.618 17,20.618 "/> <polygon data-color="color-2" fill="#444444" points="11,3.382 7,1.382 7,20.618 11,22.618 "/> <path fill="#444444" d="M5,1.434L0.485,4.143C0.185,4.323,0,4.648,0,5v19l5-3.234V1.434z"/> <path data-color="color-2" fill="#444444" d="M23.515,4.143L19,1.434v19.332L24,24V5C24,4.648,23.815,4.323,23.515,4.143z"/></g></svg>
|
|
Before Width: | Height: | Size: 572 B |
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" width="12" height="12"><g class="nc-icon-wrapper" fill="#444444"><path d="M11,9H1a1,1,0,0,0,0,2H11a1,1,0,0,0,0-2Z" fill="#444444"/> <path d="M11,1H1A1,1,0,0,0,1,3H11a1,1,0,0,0,0-2Z" fill="#444444"/> <path d="M11,5H1A1,1,0,0,0,1,7H11a1,1,0,0,0,0-2Z" fill="#444444" data-color="color-2"/></g></svg>
|
|
Before Width: | Height: | Size: 415 B |
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" width="12" height="12"><g class="nc-icon-wrapper" fill="#444444"><polygon points="6 5.882 2.148 2.03 0.074 4.104 6 10.03 11.926 4.104 9.852 2.03 6 5.882" fill="#444444"/></g></svg>
|
|
Before Width: | Height: | Size: 299 B |
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" width="12" height="12"><g class="nc-icon-wrapper" fill="#444444"><polygon points="7.92 0 1.92 6 7.92 12 10.02 9.9 6.12 6 10.02 2.1 7.92 0" fill="#444444"></polygon></g></svg>
|
|
Before Width: | Height: | Size: 293 B |
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" width="12" height="12"><g class="nc-icon-wrapper" fill="#444444"><polygon points="1.98 2.1 5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1" fill="#444444"/></g></svg>
|
|
Before Width: | Height: | Size: 285 B |
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M8,2c0.6,0,1.1,0.2,1.5,0.7l0.7,0.7l1.5-1.3L11,1.3C10.2,0.5,9.1,0,8,0C5.8,0,4,1.8,4,4v1.5 C2.8,6.6,2,8.2,2,10c0,3.3,2.7,6,6,6s6-2.7,6-6s-2.7-6-6-6C7.3,4,6.6,4.1,6,4.4V4C6,2.9,6.9,2,8,2z M8,7c1.1,0,2,0.9,2,2 c0,0.7-0.4,1.4-1,1.7V13H7v-2.3c-0.6-0.3-1-1-1-1.7C6,7.9,6.9,7,8,7z"/></g></svg>
|
|
Before Width: | Height: | Size: 493 B |
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M20.4,6.1c-1.1-0.5-2.2-0.8-3.4-0.8c-1.6,0-3,0.5-4.3,0.9c-0.8,0.3-1.6,0.5-2.2,0.5c-0.4,0-0.6-0.1-0.7-0.3 c0-0.1,0.1-0.6,0.2-0.9c0.3-0.9,0.6-2-0.2-3.1c-0.5-0.6-1.3-1-2.2-1c-0.9,0-1.7,0.3-2.5,0.8C1.9,4.4,0,8.1,0,12c0,6.6,5.4,12,12,12 c5.3,0,10.1-3.6,11.6-8.8C23.7,14.6,25.1,8.4,20.4,6.1z M3,12c0-1.1,0.9-2,2-2s2,0.9,2,2s-0.9,2-2,2S3,13.1,3,12z M7.5,19 c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S8.6,19,7.5,19z M13,21c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S14.1,21,13,21z M17,15 c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3S18.7,15,17,15z"/></g></svg>
|
|
Before Width: | Height: | Size: 741 B |
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path data-color="color-2" fill="#444444" d="M10,8H8v2H6V8H4V6h2V4h2v2h2V8z"/> <path fill="#444444" d="M7,14c-3.86,0-7-3.14-7-7s3.14-7,7-7s7,3.14,7,7S10.86,14,7,14z M7,2C4.243,2,2,4.243,2,7s2.243,5,5,5 s5-2.243,5-5S9.757,2,7,2z"/> <path data-color="color-2" fill="#444444" d="M15.707,14.293L13.314,11.9c-0.411,0.529-0.885,1.003-1.414,1.414l2.393,2.393 C14.488,15.902,14.744,16,15,16s0.512-0.098,0.707-0.293C16.098,15.316,16.098,14.684,15.707,14.293z"/> </g></svg>
|
|
Before Width: | Height: | Size: 647 B |
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M13.9,0.5C13.7,0.2,13.4,0,13,0H3C2.6,0,2.3,0.2,2.1,0.5C0,4.5,0,4.7,0,5c0,1.1,0.9,2,2,2v8c0,0.6,0.4,1,1,1 h10c0.6,0,1-0.4,1-1V7c1.1,0,2-0.9,2-2C16,4.7,16,4.5,13.9,0.5z M10,14v-4H6v4H4V6.7C4.3,6.9,4.6,7,5,7c0.6,0,1.1-0.3,1.5-0.7 C6.9,6.7,7.4,7,8,7s1.1-0.3,1.5-0.7C9.9,6.7,10.4,7,11,7c0.4,0,0.7-0.1,1-0.3V14H10z"></path></g></svg>
|
|
Before Width: | Height: | Size: 535 B |
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path d="M23.58.424A1,1,0,0,0,22.819.13C8.791.862,3.609,13.358,3.559,13.484a1,1,0,0,0,.22,1.08l5.657,5.657a1,1,0,0,0,1.085.218c.125-.051,12.554-5.291,13.348-19.253A1,1,0,0,0,23.58.424Zm-8.166,10.99a2,2,0,1,1,0-2.828A2,2,0,0,1,15.414,11.414Z" fill="#444444"/> <path data-color="color-2" d="M1.113,18.844a2.844,2.844,0,1,1,4.022,4.022C4.024,23.977,0,24,0,24S0,19.954,1.113,18.844Z" fill="#444444"/> <path id="color-2" d="M10.357,2.341A8.911,8.911,0,0,0,2.522,4.825a9.084,9.084,0,0,0-1.384,1.8,1,1,0,0,0,.155,1.215l1.989,1.99A26.623,26.623,0,0,1,10.357,2.341Z" fill="#444444"/> <path id="color-3" d="M21.659,13.643a8.911,8.911,0,0,1-2.484,7.835,9.084,9.084,0,0,1-1.8,1.384,1,1,0,0,1-1.215-.155l-1.99-1.989A26.623,26.623,0,0,0,21.659,13.643Z" fill="#444444"/></g></svg>
|
|
Before Width: | Height: | Size: 949 B |
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M8,0C3.6,0,0,3.6,0,8c0,4.4,3.6,8,8,8s8-3.6,8-8C16,3.6,12.4,0,8,0z M8,10c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2 s2,0.9,2,2C10,9.1,9.1,10,8,10z M8,2c0.9,0,1.8,0.2,2.6,0.6L9.044,4.156c-0.761-0.207-1.327-0.207-2.089,0L5.4,2.6 C6.2,2.2,7.1,2,8,2z M2,8c0-0.9,0.2-1.8,0.6-2.6l1.556,1.556c-0.207,0.761-0.207,1.327,0,2.089L2.6,10.6C2.2,9.8,2,8.9,2,8z M8,14 c-0.9,0-1.8-0.2-2.6-0.6l1.556-1.556c0.761,0.207,1.327,0.207,2.089,0L10.6,13.4C9.8,13.8,8.9,14,8,14z M13.4,10.6l-1.556-1.556 c0.207-0.761,0.207-1.327,0-2.089L13.4,5.4C13.8,6.2,14,7.1,14,8C14,8.9,13.8,9.8,13.4,10.6z"/></g></svg>
|
|
Before Width: | Height: | Size: 776 B |
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M6.5,11h11c3,0,5.5-2.5,5.5-5.5S20.5,0,17.5,0h-11C3.5,0,1,2.5,1,5.5S3.5,11,6.5,11z M6.5,2 C8.4,2,10,3.6,10,5.5S8.4,9,6.5,9S3,7.4,3,5.5S4.6,2,6.5,2z"></path> <path data-color="color-2" fill="#444444" d="M17.5,13h-11c-3,0-5.5,2.5-5.5,5.5S3.5,24,6.5,24h11c3,0,5.5-2.5,5.5-5.5S20.5,13,17.5,13z M17.5,22c-1.9,0-3.5-1.6-3.5-3.5s1.6-3.5,3.5-3.5s3.5,1.6,3.5,3.5S19.4,22,17.5,22z"></path></g></svg>
|
|
Before Width: | Height: | Size: 596 B |
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M11,12H1c-0.553,0-1-0.447-1-1V1c0-0.552,0.447-1,1-1h10c0.553,0,1,0.448,1,1v10C12,11.553,11.553,12,11,12z "></path> <path data-color="color-2" fill="#444444" d="M15,16H4v-2h10V4h2v11C16,15.553,15.553,16,15,16z"></path></g></svg>
|
|
Before Width: | Height: | Size: 435 B |
Before Width: | Height: | Size: 298 KiB After Width: | Height: | Size: 46 KiB |
|
@ -1,57 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import { StyleSheet } from "react-native";
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { Button } from "galio-framework";
|
|
||||||
|
|
||||||
import argonTheme from "../constants/Theme";
|
|
||||||
|
|
||||||
class ArButton extends React.Component {
|
|
||||||
render() {
|
|
||||||
const { small, shadowless, children, color, style, ...props } = this.props;
|
|
||||||
|
|
||||||
const colorStyle = color && argonTheme.COLORS[color.toUpperCase()];
|
|
||||||
|
|
||||||
const buttonStyles = [
|
|
||||||
small && styles.smallButton,
|
|
||||||
color && { backgroundColor: colorStyle },
|
|
||||||
!shadowless && styles.shadow,
|
|
||||||
{...style}
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
style={buttonStyles}
|
|
||||||
shadowless
|
|
||||||
textStyle={{ fontSize: 12, fontWeight: '700' }}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</Button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ArButton.propTypes = {
|
|
||||||
small: PropTypes.bool,
|
|
||||||
shadowless: PropTypes.bool,
|
|
||||||
color: PropTypes.oneOfType([
|
|
||||||
PropTypes.string,
|
|
||||||
PropTypes.oneOf(['default', 'primary', 'secondary', 'info', 'error', 'success', 'warning'])
|
|
||||||
])
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
smallButton: {
|
|
||||||
width: 75,
|
|
||||||
height: 28
|
|
||||||
},
|
|
||||||
shadow: {
|
|
||||||
shadowColor: 'black',
|
|
||||||
shadowOffset: { width: 0, height: 4 },
|
|
||||||
shadowRadius: 4,
|
|
||||||
shadowOpacity: 0.1,
|
|
||||||
elevation: 2,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export default ArButton;
|
|
|
@ -1,98 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { withNavigation } from '@react-navigation/native';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { StyleSheet, Dimensions, Image, TouchableWithoutFeedback } from 'react-native';
|
|
||||||
import { Block, Text, theme } from 'galio-framework';
|
|
||||||
|
|
||||||
import { argonTheme } from '../constants';
|
|
||||||
|
|
||||||
|
|
||||||
class Card extends React.Component {
|
|
||||||
render() {
|
|
||||||
const { navigation, item, horizontal, full, style, ctaColor, imageStyle } = this.props;
|
|
||||||
|
|
||||||
const imageStyles = [
|
|
||||||
full ? styles.fullImage : styles.horizontalImage,
|
|
||||||
imageStyle
|
|
||||||
];
|
|
||||||
const cardContainer = [styles.card, styles.shadow, style];
|
|
||||||
const imgContainer = [styles.imageContainer,
|
|
||||||
horizontal ? styles.horizontalStyles : styles.verticalStyles,
|
|
||||||
styles.shadow
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Block row={horizontal} card flex style={cardContainer}>
|
|
||||||
<TouchableWithoutFeedback onPress={() => navigation.navigate('Pro')}>
|
|
||||||
<Block flex style={imgContainer}>
|
|
||||||
<Image source={{uri: item.image}} style={imageStyles} />
|
|
||||||
</Block>
|
|
||||||
</TouchableWithoutFeedback>
|
|
||||||
<TouchableWithoutFeedback onPress={() => navigation.navigate('Pro')}>
|
|
||||||
<Block flex space="between" style={styles.cardDescription}>
|
|
||||||
<Text size={14} style={styles.cardTitle}>{item.title}</Text>
|
|
||||||
<Text size={12} muted={!ctaColor} color={ctaColor || argonTheme.COLORS.ACTIVE} bold>{item.cta}</Text>
|
|
||||||
</Block>
|
|
||||||
</TouchableWithoutFeedback>
|
|
||||||
</Block>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Card.propTypes = {
|
|
||||||
item: PropTypes.object,
|
|
||||||
horizontal: PropTypes.bool,
|
|
||||||
full: PropTypes.bool,
|
|
||||||
ctaColor: PropTypes.string,
|
|
||||||
imageStyle: PropTypes.any,
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
card: {
|
|
||||||
backgroundColor: theme.COLORS.WHITE,
|
|
||||||
marginVertical: theme.SIZES.BASE,
|
|
||||||
borderWidth: 0,
|
|
||||||
minHeight: 114,
|
|
||||||
marginBottom: 16
|
|
||||||
},
|
|
||||||
cardTitle: {
|
|
||||||
flex: 1,
|
|
||||||
flexWrap: 'wrap',
|
|
||||||
paddingBottom: 6
|
|
||||||
},
|
|
||||||
cardDescription: {
|
|
||||||
padding: theme.SIZES.BASE / 2
|
|
||||||
},
|
|
||||||
imageContainer: {
|
|
||||||
borderRadius: 3,
|
|
||||||
elevation: 1,
|
|
||||||
overflow: 'hidden',
|
|
||||||
},
|
|
||||||
image: {
|
|
||||||
// borderRadius: 3,
|
|
||||||
},
|
|
||||||
horizontalImage: {
|
|
||||||
height: 122,
|
|
||||||
width: 'auto',
|
|
||||||
},
|
|
||||||
horizontalStyles: {
|
|
||||||
borderTopRightRadius: 0,
|
|
||||||
borderBottomRightRadius: 0,
|
|
||||||
},
|
|
||||||
verticalStyles: {
|
|
||||||
borderBottomRightRadius: 0,
|
|
||||||
borderBottomLeftRadius: 0
|
|
||||||
},
|
|
||||||
fullImage: {
|
|
||||||
height: 215
|
|
||||||
},
|
|
||||||
shadow: {
|
|
||||||
shadowColor: theme.COLORS.BLACK,
|
|
||||||
shadowOffset: { width: 0, height: 2 },
|
|
||||||
shadowRadius: 4,
|
|
||||||
shadowOpacity: 0.1,
|
|
||||||
elevation: 2,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export default withNavigation(Card);
|
|
|
@ -1,130 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import { StyleSheet, TouchableOpacity, Linking } from "react-native";
|
|
||||||
import { Block, Text, theme } from "galio-framework";
|
|
||||||
|
|
||||||
import Icon from "./Icon";
|
|
||||||
import argonTheme from "../constants/Theme";
|
|
||||||
|
|
||||||
class DrawerItem extends React.Component {
|
|
||||||
renderIcon = () => {
|
|
||||||
const { title, focused } = this.props;
|
|
||||||
|
|
||||||
switch (title) {
|
|
||||||
case "Home":
|
|
||||||
return (
|
|
||||||
<Icon
|
|
||||||
name="shop"
|
|
||||||
family="ArgonExtra"
|
|
||||||
size={14}
|
|
||||||
color={focused ? "white" : argonTheme.COLORS.PRIMARY}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
case "Elements":
|
|
||||||
return (
|
|
||||||
<Icon
|
|
||||||
name="map-big"
|
|
||||||
family="ArgonExtra"
|
|
||||||
size={14}
|
|
||||||
color={focused ? "white" : argonTheme.COLORS.ERROR}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
case "Articles":
|
|
||||||
return (
|
|
||||||
<Icon
|
|
||||||
name="spaceship"
|
|
||||||
family="ArgonExtra"
|
|
||||||
size={14}
|
|
||||||
color={focused ? "white" : argonTheme.COLORS.PRIMARY}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
case "Profile":
|
|
||||||
return (
|
|
||||||
<Icon
|
|
||||||
name="chart-pie-35"
|
|
||||||
family="ArgonExtra"
|
|
||||||
size={14}
|
|
||||||
color={focused ? "white" : argonTheme.COLORS.WARNING}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
case "Account":
|
|
||||||
return (
|
|
||||||
<Icon
|
|
||||||
name="calendar-date"
|
|
||||||
family="ArgonExtra"
|
|
||||||
size={14}
|
|
||||||
color={focused ? "white" : argonTheme.COLORS.INFO}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
case "Getting Started":
|
|
||||||
return (<Icon
|
|
||||||
name="spaceship"
|
|
||||||
family="ArgonExtra"
|
|
||||||
size={14}
|
|
||||||
color={focused ? "white" : "rgba(0,0,0,0.5)"}
|
|
||||||
/>);
|
|
||||||
case "Log out":
|
|
||||||
return <Icon />;
|
|
||||||
default:
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { focused, title, navigation } = this.props;
|
|
||||||
|
|
||||||
const containerStyles = [
|
|
||||||
styles.defaultStyle,
|
|
||||||
focused ? [styles.activeStyle, styles.shadow] : null
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<TouchableOpacity
|
|
||||||
style={{ height: 60 }}
|
|
||||||
onPress={() =>
|
|
||||||
title == "Getting Started"
|
|
||||||
? Linking.openURL(
|
|
||||||
"https://demos.creative-tim.com/argon-pro-react-native/docs/"
|
|
||||||
).catch(err => console.error("An error occurred", err))
|
|
||||||
: navigation.navigate(title)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Block flex row style={containerStyles}>
|
|
||||||
<Block middle flex={0.1} style={{ marginRight: 5 }}>
|
|
||||||
{this.renderIcon()}
|
|
||||||
</Block>
|
|
||||||
<Block row center flex={0.9}>
|
|
||||||
<Text
|
|
||||||
size={15}
|
|
||||||
bold={focused ? true : false}
|
|
||||||
color={focused ? "white" : "rgba(0,0,0,0.5)"}
|
|
||||||
>
|
|
||||||
{title}
|
|
||||||
</Text>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</TouchableOpacity>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
defaultStyle: {
|
|
||||||
paddingVertical: 16,
|
|
||||||
paddingHorizontal: 16
|
|
||||||
},
|
|
||||||
activeStyle: {
|
|
||||||
backgroundColor: argonTheme.COLORS.ACTIVE,
|
|
||||||
borderRadius: 4
|
|
||||||
},
|
|
||||||
shadow: {
|
|
||||||
shadowColor: theme.COLORS.BLACK,
|
|
||||||
shadowOffset: {
|
|
||||||
width: 0,
|
|
||||||
height: 2
|
|
||||||
},
|
|
||||||
shadowRadius: 8,
|
|
||||||
shadowOpacity: 0.1
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
export default DrawerItem;
|
|
|
@ -1,281 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { withNavigation } from '@react-navigation/native';
|
|
||||||
import { TouchableOpacity, StyleSheet, Platform, Dimensions } from 'react-native';
|
|
||||||
import { Button, Block, NavBar, Text, theme } from 'galio-framework';
|
|
||||||
|
|
||||||
import Icon from './Icon';
|
|
||||||
import Input from './Input';
|
|
||||||
import Tabs from './Tabs';
|
|
||||||
import argonTheme from '../constants/Theme';
|
|
||||||
|
|
||||||
const { height, width } = Dimensions.get('window');
|
|
||||||
const iPhoneX = () => Platform.OS === 'ios' && (height === 812 || width === 812 || height === 896 || width === 896);
|
|
||||||
|
|
||||||
const BellButton = ({isWhite, style, navigation}) => (
|
|
||||||
<TouchableOpacity style={[styles.button, style]} onPress={() => navigation.navigate('Pro')}>
|
|
||||||
<Icon
|
|
||||||
family="ArgonExtra"
|
|
||||||
size={16}
|
|
||||||
name="bell"
|
|
||||||
color={argonTheme.COLORS[isWhite ? 'WHITE' : 'ICON']}
|
|
||||||
/>
|
|
||||||
<Block middle style={styles.notify} />
|
|
||||||
</TouchableOpacity>
|
|
||||||
);
|
|
||||||
|
|
||||||
const BasketButton = ({isWhite, style, navigation}) => (
|
|
||||||
<TouchableOpacity style={[styles.button, style]} onPress={() => navigation.navigate('Pro')}>
|
|
||||||
<Icon
|
|
||||||
family="ArgonExtra"
|
|
||||||
size={16}
|
|
||||||
name="basket"
|
|
||||||
color={argonTheme.COLORS[isWhite ? 'WHITE' : 'ICON']}
|
|
||||||
/>
|
|
||||||
</TouchableOpacity>
|
|
||||||
);
|
|
||||||
|
|
||||||
const SearchButton = ({isWhite, style, navigation}) => (
|
|
||||||
<TouchableOpacity style={[styles.button, style]} onPress={() => navigation.navigate('Pro')}>
|
|
||||||
<Icon
|
|
||||||
size={16}
|
|
||||||
family="Galio"
|
|
||||||
name="search-zoom-in"
|
|
||||||
color={theme.COLORS[isWhite ? 'WHITE' : 'ICON']}
|
|
||||||
/>
|
|
||||||
</TouchableOpacity>
|
|
||||||
);
|
|
||||||
|
|
||||||
class Header extends React.Component {
|
|
||||||
handleLeftPress = () => {
|
|
||||||
const { back, navigation } = this.props;
|
|
||||||
return (back ? navigation.goBack() : navigation.openDrawer());
|
|
||||||
}
|
|
||||||
renderRight = () => {
|
|
||||||
const { white, title, navigation } = this.props;
|
|
||||||
|
|
||||||
if (title === 'Title') {
|
|
||||||
return [
|
|
||||||
<BellButton key='chat-title' navigation={navigation} isWhite={white} />,
|
|
||||||
<BasketButton key='basket-title' navigation={navigation} isWhite={white} />
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (title) {
|
|
||||||
case 'Home':
|
|
||||||
return ([
|
|
||||||
<BellButton key='chat-home' navigation={navigation} isWhite={white} />,
|
|
||||||
<BasketButton key='basket-home' navigation={navigation} isWhite={white} />
|
|
||||||
]);
|
|
||||||
case 'Deals':
|
|
||||||
return ([
|
|
||||||
<BellButton key='chat-categories' navigation={navigation} />,
|
|
||||||
<BasketButton key='basket-categories' navigation={navigation} />
|
|
||||||
]);
|
|
||||||
case 'Categories':
|
|
||||||
return ([
|
|
||||||
<BellButton key='chat-categories' navigation={navigation} isWhite={white} />,
|
|
||||||
<BasketButton key='basket-categories' navigation={navigation} isWhite={white} />
|
|
||||||
]);
|
|
||||||
case 'Category':
|
|
||||||
return ([
|
|
||||||
<BellButton key='chat-deals' navigation={navigation} isWhite={white} />,
|
|
||||||
<BasketButton key='basket-deals' navigation={navigation} isWhite={white} />
|
|
||||||
]);
|
|
||||||
case 'Profile':
|
|
||||||
return ([
|
|
||||||
<BellButton key='chat-profile' navigation={navigation} isWhite={white} />,
|
|
||||||
<BasketButton key='basket-deals' navigation={navigation} isWhite={white} />
|
|
||||||
]);
|
|
||||||
case 'Product':
|
|
||||||
return ([
|
|
||||||
<SearchButton key='search-product' navigation={navigation} isWhite={white} />,
|
|
||||||
<BasketButton key='basket-product' navigation={navigation} isWhite={white} />
|
|
||||||
]);
|
|
||||||
case 'Search':
|
|
||||||
return ([
|
|
||||||
<BellButton key='chat-search' navigation={navigation} isWhite={white} />,
|
|
||||||
<BasketButton key='basket-search' navigation={navigation} isWhite={white} />
|
|
||||||
]);
|
|
||||||
case 'Settings':
|
|
||||||
return ([
|
|
||||||
<BellButton key='chat-search' navigation={navigation} isWhite={white} />,
|
|
||||||
<BasketButton key='basket-search' navigation={navigation} isWhite={white} />
|
|
||||||
]);
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
renderSearch = () => {
|
|
||||||
const { navigation } = this.props;
|
|
||||||
return (
|
|
||||||
<Input
|
|
||||||
right
|
|
||||||
color="black"
|
|
||||||
style={styles.search}
|
|
||||||
placeholder="What are you looking for?"
|
|
||||||
placeholderTextColor={'#8898AA'}
|
|
||||||
onFocus={() => navigation.navigate('Pro')}
|
|
||||||
iconContent={<Icon size={16} color={theme.COLORS.MUTED} name="search-zoom-in" family="ArgonExtra" />}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
renderOptions = () => {
|
|
||||||
const { navigation, optionLeft, optionRight } = this.props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Block row style={styles.options}>
|
|
||||||
<Button shadowless style={[styles.tab, styles.divider]} onPress={() => navigation.navigate('Pro')}>
|
|
||||||
<Block row middle>
|
|
||||||
<Icon name="diamond" family="ArgonExtra" style={{ paddingRight: 8 }} color={argonTheme.COLORS.ICON} />
|
|
||||||
<Text size={16} style={styles.tabTitle}>{optionLeft || 'Beauty'}</Text>
|
|
||||||
</Block>
|
|
||||||
</Button>
|
|
||||||
<Button shadowless style={styles.tab} onPress={() => navigation.navigate('Pro')}>
|
|
||||||
<Block row middle>
|
|
||||||
<Icon size={16} name="bag-17" family="ArgonExtra" style={{ paddingRight: 8 }} color={argonTheme.COLORS.ICON}/>
|
|
||||||
<Text size={16} style={styles.tabTitle}>{optionRight || 'Fashion'}</Text>
|
|
||||||
</Block>
|
|
||||||
</Button>
|
|
||||||
</Block>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
renderTabs = () => {
|
|
||||||
const { tabs, tabIndex, navigation } = this.props;
|
|
||||||
const defaultTab = tabs && tabs[0] && tabs[0].id;
|
|
||||||
|
|
||||||
if (!tabs) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Tabs
|
|
||||||
data={tabs || []}
|
|
||||||
initialIndex={tabIndex || defaultTab}
|
|
||||||
onChange={id => navigation.setParams({ tabId: id })} />
|
|
||||||
)
|
|
||||||
}
|
|
||||||
renderHeader = () => {
|
|
||||||
const { search, options, tabs } = this.props;
|
|
||||||
if (search || tabs || options) {
|
|
||||||
return (
|
|
||||||
<Block center>
|
|
||||||
{search ? this.renderSearch() : null}
|
|
||||||
{options ? this.renderOptions() : null}
|
|
||||||
{tabs ? this.renderTabs() : null}
|
|
||||||
</Block>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
render() {
|
|
||||||
const { back, title, white, transparent, bgColor, iconColor, titleColor, navigation, ...props } = this.props;
|
|
||||||
|
|
||||||
const noShadow = ['Search', 'Categories', 'Deals', 'Pro', 'Profile'].includes(title);
|
|
||||||
const headerStyles = [
|
|
||||||
!noShadow ? styles.shadow : null,
|
|
||||||
transparent ? { backgroundColor: 'rgba(0,0,0,0)' } : null,
|
|
||||||
];
|
|
||||||
|
|
||||||
const navbarStyles = [
|
|
||||||
styles.navbar,
|
|
||||||
bgColor && { backgroundColor: bgColor }
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Block style={headerStyles}>
|
|
||||||
<NavBar
|
|
||||||
back={false}
|
|
||||||
title={title}
|
|
||||||
style={navbarStyles}
|
|
||||||
transparent={transparent}
|
|
||||||
right={this.renderRight()}
|
|
||||||
rightStyle={{ alignItems: 'center' }}
|
|
||||||
left={
|
|
||||||
<Icon
|
|
||||||
name={back ? 'chevron-left' : "menu"} family="entypo"
|
|
||||||
size={20} onPress={this.handleLeftPress}
|
|
||||||
color={iconColor || (white ? argonTheme.COLORS.WHITE : argonTheme.COLORS.ICON)}
|
|
||||||
style={{ marginTop: 2 }}
|
|
||||||
/>
|
|
||||||
|
|
||||||
}
|
|
||||||
leftStyle={{ paddingVertical: 12, flex: 0.2 }}
|
|
||||||
titleStyle={[
|
|
||||||
styles.title,
|
|
||||||
{ color: argonTheme.COLORS[white ? 'WHITE' : 'HEADER'] },
|
|
||||||
titleColor && { color: titleColor }
|
|
||||||
]}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
{this.renderHeader()}
|
|
||||||
</Block>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
button: {
|
|
||||||
padding: 12,
|
|
||||||
position: 'relative',
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
width: '100%',
|
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
},
|
|
||||||
navbar: {
|
|
||||||
paddingVertical: 0,
|
|
||||||
paddingBottom: theme.SIZES.BASE * 1.5,
|
|
||||||
paddingTop: iPhoneX ? theme.SIZES.BASE * 4 : theme.SIZES.BASE,
|
|
||||||
zIndex: 5,
|
|
||||||
},
|
|
||||||
shadow: {
|
|
||||||
backgroundColor: theme.COLORS.WHITE,
|
|
||||||
shadowColor: 'black',
|
|
||||||
shadowOffset: { width: 0, height: 2 },
|
|
||||||
shadowRadius: 6,
|
|
||||||
shadowOpacity: 0.2,
|
|
||||||
elevation: 3,
|
|
||||||
},
|
|
||||||
notify: {
|
|
||||||
backgroundColor: argonTheme.COLORS.LABEL,
|
|
||||||
borderRadius: 4,
|
|
||||||
height: theme.SIZES.BASE / 2,
|
|
||||||
width: theme.SIZES.BASE / 2,
|
|
||||||
position: 'absolute',
|
|
||||||
top: 9,
|
|
||||||
right: 12,
|
|
||||||
},
|
|
||||||
header: {
|
|
||||||
backgroundColor: theme.COLORS.WHITE,
|
|
||||||
},
|
|
||||||
divider: {
|
|
||||||
borderRightWidth: 0.3,
|
|
||||||
borderRightColor: theme.COLORS.ICON,
|
|
||||||
},
|
|
||||||
search: {
|
|
||||||
height: 48,
|
|
||||||
width: width - 32,
|
|
||||||
marginHorizontal: 16,
|
|
||||||
borderWidth: 1,
|
|
||||||
borderRadius: 3,
|
|
||||||
borderColor: argonTheme.COLORS.BORDER
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
marginBottom: 24,
|
|
||||||
marginTop: 10,
|
|
||||||
elevation: 4,
|
|
||||||
},
|
|
||||||
tab: {
|
|
||||||
backgroundColor: theme.COLORS.TRANSPARENT,
|
|
||||||
width: width * 0.35,
|
|
||||||
borderRadius: 0,
|
|
||||||
borderWidth: 0,
|
|
||||||
height: 24,
|
|
||||||
elevation: 0,
|
|
||||||
},
|
|
||||||
tabTitle: {
|
|
||||||
lineHeight: 19,
|
|
||||||
fontWeight: '400',
|
|
||||||
color: argonTheme.COLORS.HEADER
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export default withNavigation(Header);
|
|
|
@ -1,34 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import * as Font from 'expo-font';
|
|
||||||
import { createIconSetFromIcoMoon } from '@expo/vector-icons';
|
|
||||||
import { Icon } from 'galio-framework';
|
|
||||||
|
|
||||||
import argonConfig from '../assets/config/argon.json';
|
|
||||||
const ArgonExtra = require('../assets/font/argon.ttf');
|
|
||||||
const IconArgonExtra = createIconSetFromIcoMoon(argonConfig, 'ArgonExtra');
|
|
||||||
|
|
||||||
class IconExtra extends React.Component {
|
|
||||||
state = {
|
|
||||||
fontLoaded: false,
|
|
||||||
}
|
|
||||||
|
|
||||||
async componentDidMount() {
|
|
||||||
await Font.loadAsync({ ArgonExtra: ArgonExtra });
|
|
||||||
this.setState({ fontLoaded: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { name, family, ...rest } = this.props;
|
|
||||||
|
|
||||||
if (name && family && this.state.fontLoaded) {
|
|
||||||
if (family === 'ArgonExtra') {
|
|
||||||
return <IconArgonExtra name={name} family={family} {...rest} />;
|
|
||||||
}
|
|
||||||
return <Icon name={name} family={family} {...rest} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default IconExtra;
|
|
|
@ -1,76 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import { StyleSheet } from "react-native";
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
import { Input } from "galio-framework";
|
|
||||||
|
|
||||||
import Icon from './Icon';
|
|
||||||
import { argonTheme } from "../constants";
|
|
||||||
|
|
||||||
class ArInput extends React.Component {
|
|
||||||
render() {
|
|
||||||
const { shadowless, success, error } = this.props;
|
|
||||||
|
|
||||||
const inputStyles = [
|
|
||||||
styles.input,
|
|
||||||
!shadowless && styles.shadow,
|
|
||||||
success && styles.success,
|
|
||||||
error && styles.error,
|
|
||||||
{...this.props.style}
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Input
|
|
||||||
placeholder="write something here"
|
|
||||||
placeholderTextColor={argonTheme.COLORS.MUTED}
|
|
||||||
style={inputStyles}
|
|
||||||
color={argonTheme.COLORS.HEADER}
|
|
||||||
iconContent={
|
|
||||||
<Icon
|
|
||||||
size={14}
|
|
||||||
color={argonTheme.COLORS.ICON}
|
|
||||||
name="link"
|
|
||||||
family="AntDesign"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
{...this.props}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ArInput.defaultProps = {
|
|
||||||
shadowless: false,
|
|
||||||
success: false,
|
|
||||||
error: false
|
|
||||||
};
|
|
||||||
|
|
||||||
ArInput.propTypes = {
|
|
||||||
shadowless: PropTypes.bool,
|
|
||||||
success: PropTypes.bool,
|
|
||||||
error: PropTypes.bool
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
input: {
|
|
||||||
borderRadius: 4,
|
|
||||||
borderColor: argonTheme.COLORS.BORDER,
|
|
||||||
height: 44,
|
|
||||||
backgroundColor: '#FFFFFF'
|
|
||||||
},
|
|
||||||
success: {
|
|
||||||
borderColor: argonTheme.COLORS.INPUT_SUCCESS,
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
borderColor: argonTheme.COLORS.INPUT_ERROR,
|
|
||||||
},
|
|
||||||
shadow: {
|
|
||||||
shadowColor: argonTheme.COLORS.BLACK,
|
|
||||||
shadowOffset: { width: 0, height: 1 },
|
|
||||||
shadowRadius: 2,
|
|
||||||
shadowOpacity: 0.05,
|
|
||||||
elevation: 2,
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
export default ArInput;
|
|
|
@ -1,85 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { StyleSheet } from 'react-native';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import ModalDropdown from 'react-native-material-dropdown';
|
|
||||||
import { Block, Text } from 'galio-framework';
|
|
||||||
|
|
||||||
import Icon from './Icon';
|
|
||||||
import { argonTheme } from '../constants';
|
|
||||||
|
|
||||||
class DropDown extends React.Component {
|
|
||||||
state = {
|
|
||||||
value: 1,
|
|
||||||
}
|
|
||||||
|
|
||||||
handleOnSelect = (index, value) => {
|
|
||||||
const { onSelect } = this.props;
|
|
||||||
|
|
||||||
this.setState({ value: value });
|
|
||||||
onSelect && onSelect(index, value);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { onSelect, iconName, iconFamily, iconSize, iconColor, color, textStyle, style, ...props } = this.props;
|
|
||||||
|
|
||||||
const modalStyles = [
|
|
||||||
styles.qty,
|
|
||||||
color && { backgroundColor: color },
|
|
||||||
style
|
|
||||||
];
|
|
||||||
|
|
||||||
const textStyles = [
|
|
||||||
styles.text,
|
|
||||||
textStyle
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ModalDropdown
|
|
||||||
style={modalStyles}
|
|
||||||
onSelect={this.handleOnSelect}
|
|
||||||
dropdownStyle={styles.dropdown}
|
|
||||||
dropdownTextStyle={{paddingLeft:16, fontSize:12}}
|
|
||||||
{...props}>
|
|
||||||
<Block flex row middle space="between">
|
|
||||||
<Text size={12} style={textStyles}>{this.state.value}</Text>
|
|
||||||
<Icon name={iconName || "nav-down"} family={iconFamily || "ArgonExtra"} size={iconSize || 10} color={iconColor || argonTheme.COLORS.WHITE} />
|
|
||||||
</Block>
|
|
||||||
</ModalDropdown>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
DropDown.propTypes = {
|
|
||||||
onSelect: PropTypes.func,
|
|
||||||
iconName: PropTypes.string,
|
|
||||||
iconFamily: PropTypes.string,
|
|
||||||
iconSize: PropTypes.number,
|
|
||||||
color: PropTypes.string,
|
|
||||||
textStyle: PropTypes.any,
|
|
||||||
};
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
qty: {
|
|
||||||
width: 100,
|
|
||||||
backgroundColor: argonTheme.COLORS.DEFAULT,
|
|
||||||
paddingHorizontal: 16,
|
|
||||||
paddingTop: 10,
|
|
||||||
paddingBottom:9.5,
|
|
||||||
borderRadius: 4,
|
|
||||||
shadowColor: "rgba(0, 0, 0, 0.1)",
|
|
||||||
shadowOffset: { width: 0, height: 2 },
|
|
||||||
shadowRadius: 4,
|
|
||||||
shadowOpacity: 1,
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
color: argonTheme.COLORS.WHITE,
|
|
||||||
fontWeight: '600'
|
|
||||||
},
|
|
||||||
dropdown: {
|
|
||||||
marginTop: 8,
|
|
||||||
marginLeft: -16,
|
|
||||||
width: 100,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export default DropDown;
|
|
|
@ -1,24 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { Switch, Platform } from 'react-native';
|
|
||||||
|
|
||||||
import argonTheme from '../constants/Theme';
|
|
||||||
|
|
||||||
class MkSwitch extends React.Component {
|
|
||||||
render() {
|
|
||||||
const { value, ...props } = this.props;
|
|
||||||
const thumbColor = Platform.OS === 'ios' ? null :
|
|
||||||
Platform.OS === 'android' && value ? argonTheme.COLORS.SWITCH_ON : argonTheme.COLORS.SWITCH_OFF;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Switch
|
|
||||||
value={value}
|
|
||||||
thumbColor={thumbColor}
|
|
||||||
ios_backgroundColor={argonTheme.COLORS.SWITCH_OFF}
|
|
||||||
trackColor={{ false: argonTheme.COLORS.SWITCH_ON, true: argonTheme.COLORS.SWITCH_ON }}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default MkSwitch;
|
|
|
@ -1,159 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { StyleSheet, Dimensions, FlatList, Animated } from 'react-native';
|
|
||||||
import { Block, theme } from 'galio-framework';
|
|
||||||
|
|
||||||
const { width } = Dimensions.get('screen');
|
|
||||||
import argonTheme from '../constants/Theme';
|
|
||||||
|
|
||||||
const defaultMenu = [
|
|
||||||
{ id: 'popular', title: 'Popular', },
|
|
||||||
{ id: 'beauty', title: 'Beauty', },
|
|
||||||
{ id: 'cars', title: 'Cars', },
|
|
||||||
{ id: 'motocycles', title: 'Motocycles', },
|
|
||||||
];
|
|
||||||
|
|
||||||
export default class Tabs extends React.Component {
|
|
||||||
static defaultProps = {
|
|
||||||
data: defaultMenu,
|
|
||||||
initialIndex: null,
|
|
||||||
}
|
|
||||||
|
|
||||||
state = {
|
|
||||||
active: null,
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
const { initialIndex } = this.props;
|
|
||||||
initialIndex && this.selectMenu(initialIndex);
|
|
||||||
}
|
|
||||||
|
|
||||||
animatedValue = new Animated.Value(1);
|
|
||||||
|
|
||||||
animate() {
|
|
||||||
this.animatedValue.setValue(0);
|
|
||||||
|
|
||||||
Animated.timing(this.animatedValue, {
|
|
||||||
toValue: 1,
|
|
||||||
duration: 300,
|
|
||||||
useNativeDriver: false, // color not supported
|
|
||||||
}).start()
|
|
||||||
}
|
|
||||||
|
|
||||||
menuRef = React.createRef();
|
|
||||||
|
|
||||||
onScrollToIndexFailed = () => {
|
|
||||||
this.menuRef.current.scrollToIndex({
|
|
||||||
index: 0,
|
|
||||||
viewPosition: 0.5
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
selectMenu = (id) => {
|
|
||||||
this.setState({ active: id });
|
|
||||||
|
|
||||||
this.menuRef.current.scrollToIndex({
|
|
||||||
index: this.props.data.findIndex(item => item.id === id),
|
|
||||||
viewPosition: 0.5
|
|
||||||
});
|
|
||||||
|
|
||||||
this.animate();
|
|
||||||
this.props.onChange && this.props.onChange(id);
|
|
||||||
}
|
|
||||||
|
|
||||||
renderItem = (item) => {
|
|
||||||
const isActive = this.state.active === item.id;
|
|
||||||
|
|
||||||
const textColor = this.animatedValue.interpolate({
|
|
||||||
inputRange: [0, 1],
|
|
||||||
outputRange: [argonTheme.COLORS.BLACK, isActive ? argonTheme.COLORS.WHITE : argonTheme.COLORS.BLACK],
|
|
||||||
extrapolate: 'clamp',
|
|
||||||
});
|
|
||||||
|
|
||||||
const containerStyles = [
|
|
||||||
styles.titleContainer,
|
|
||||||
!isActive && { backgroundColor: argonTheme.COLORS.SECONDARY },
|
|
||||||
isActive && styles.containerShadow
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Block style={containerStyles}>
|
|
||||||
<Animated.Text
|
|
||||||
style={[
|
|
||||||
styles.menuTitle,
|
|
||||||
{ color: textColor }
|
|
||||||
]}
|
|
||||||
onPress={() => this.selectMenu(item.id)}>
|
|
||||||
{item.title}
|
|
||||||
</Animated.Text>
|
|
||||||
</Block>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
renderMenu = () => {
|
|
||||||
const { data, ...props } = this.props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<FlatList
|
|
||||||
{...props}
|
|
||||||
data={data}
|
|
||||||
horizontal={true}
|
|
||||||
ref={this.menuRef}
|
|
||||||
extraData={this.state}
|
|
||||||
keyExtractor={(item) => item.id}
|
|
||||||
showsHorizontalScrollIndicator={false}
|
|
||||||
onScrollToIndexFailed={this.onScrollToIndexFailed}
|
|
||||||
renderItem={({ item }) => this.renderItem(item)}
|
|
||||||
contentContainerStyle={styles.menu}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<Block style={styles.container}>
|
|
||||||
{this.renderMenu()}
|
|
||||||
</Block>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
width: width,
|
|
||||||
backgroundColor: theme.COLORS.WHITE,
|
|
||||||
zIndex: 2,
|
|
||||||
},
|
|
||||||
shadow: {
|
|
||||||
shadowColor: theme.COLORS.BLACK,
|
|
||||||
shadowOffset: { width: 0, height: 2 },
|
|
||||||
shadowRadius: 8,
|
|
||||||
shadowOpacity: 0.2,
|
|
||||||
elevation: 4,
|
|
||||||
},
|
|
||||||
menu: {
|
|
||||||
paddingHorizontal: theme.SIZES.BASE * 2.5,
|
|
||||||
paddingTop: 8,
|
|
||||||
paddingBottom: 16,
|
|
||||||
},
|
|
||||||
titleContainer: {
|
|
||||||
alignItems: 'center',
|
|
||||||
backgroundColor: argonTheme.COLORS.ACTIVE,
|
|
||||||
borderRadius: 4,
|
|
||||||
marginRight: 9
|
|
||||||
},
|
|
||||||
containerShadow: {
|
|
||||||
shadowColor: 'black',
|
|
||||||
shadowOffset: { width: 0, height: 2 },
|
|
||||||
shadowRadius: 4,
|
|
||||||
shadowOpacity: 0.1,
|
|
||||||
elevation: 1,
|
|
||||||
},
|
|
||||||
menuTitle: {
|
|
||||||
fontWeight: '600',
|
|
||||||
fontSize: 14,
|
|
||||||
// lineHeight: 28,
|
|
||||||
paddingVertical: 10,
|
|
||||||
paddingHorizontal: 16,
|
|
||||||
color: argonTheme.COLORS.MUTED
|
|
||||||
},
|
|
||||||
});
|
|
|
@ -1,19 +0,0 @@
|
||||||
import Button from './Button';
|
|
||||||
import Card from './Card';
|
|
||||||
import DrawerItem from './DrawerItem';
|
|
||||||
import Icon from './Icon';
|
|
||||||
import Header from './Header';
|
|
||||||
import Input from './Input';
|
|
||||||
import Switch from './Switch';
|
|
||||||
import Select from './Select';
|
|
||||||
|
|
||||||
export {
|
|
||||||
Button,
|
|
||||||
Card,
|
|
||||||
DrawerItem,
|
|
||||||
Icon,
|
|
||||||
Input,
|
|
||||||
Header,
|
|
||||||
Switch,
|
|
||||||
Select
|
|
||||||
};
|
|
|
@ -1,41 +0,0 @@
|
||||||
// local imgs
|
|
||||||
const Onboarding = require("../assets/imgs/bg.png");
|
|
||||||
const Logo = require("../assets/imgs/argon-logo.png");
|
|
||||||
const LogoOnboarding = require("../assets/imgs/argon-logo-onboarding.png");
|
|
||||||
const ProfileBackground = require("../assets/imgs/profile-screen-bg.png");
|
|
||||||
const RegisterBackground = require("../assets/imgs/register-bg.png");
|
|
||||||
const Pro = require("../assets/imgs/getPro-bg.png");
|
|
||||||
const ArgonLogo = require("../assets/imgs/argonlogo.png");
|
|
||||||
const iOSLogo = require("../assets/imgs/ios.png");
|
|
||||||
const androidLogo = require("../assets/imgs/android.png");
|
|
||||||
// internet imgs
|
|
||||||
|
|
||||||
const ProfilePicture = 'https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?fit=crop&w=1650&q=80';
|
|
||||||
|
|
||||||
const Viewed = [
|
|
||||||
'https://images.unsplash.com/photo-1501601983405-7c7cabaa1581?fit=crop&w=240&q=80',
|
|
||||||
'https://images.unsplash.com/photo-1543747579-795b9c2c3ada?fit=crop&w=240&q=80',
|
|
||||||
'https://images.unsplash.com/photo-1551798507-629020c81463?fit=crop&w=240&q=80',
|
|
||||||
'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?fit=crop&w=240&q=80',
|
|
||||||
'https://images.unsplash.com/photo-1503642551022-c011aafb3c88?fit=crop&w=240&q=80',
|
|
||||||
'https://images.unsplash.com/photo-1482686115713-0fbcaced6e28?fit=crop&w=240&q=80',
|
|
||||||
];
|
|
||||||
|
|
||||||
const Products = {
|
|
||||||
'View article': 'https://images.unsplash.com/photo-1501601983405-7c7cabaa1581?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=840&q=840',
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
Onboarding,
|
|
||||||
Logo,
|
|
||||||
LogoOnboarding,
|
|
||||||
ProfileBackground,
|
|
||||||
ProfilePicture,
|
|
||||||
RegisterBackground,
|
|
||||||
Viewed,
|
|
||||||
Products,
|
|
||||||
Pro,
|
|
||||||
ArgonLogo,
|
|
||||||
iOSLogo,
|
|
||||||
androidLogo
|
|
||||||
};
|
|
|
@ -1,32 +0,0 @@
|
||||||
export default {
|
|
||||||
COLORS: {
|
|
||||||
DEFAULT: '#172B4D',
|
|
||||||
PRIMARY: '#5E72E4',
|
|
||||||
SECONDARY: '#F7FAFC',
|
|
||||||
LABEL: '#FE2472',
|
|
||||||
INFO: '#11CDEF',
|
|
||||||
ERROR: '#F5365C',
|
|
||||||
SUCCESS: '#2DCE89',
|
|
||||||
WARNING: '#FB6340',
|
|
||||||
/*not yet changed */
|
|
||||||
MUTED: '#ADB5BD',
|
|
||||||
INPUT: '#DCDCDC',
|
|
||||||
INPUT_SUCCESS: '#7BDEB2',
|
|
||||||
INPUT_ERROR: '#FCB3A4',
|
|
||||||
ACTIVE: '#5E72E4', //same as primary
|
|
||||||
BUTTON_COLOR: '#9C26B0', //wtf
|
|
||||||
PLACEHOLDER: '#9FA5AA',
|
|
||||||
SWITCH_ON: '#5E72E4',
|
|
||||||
SWITCH_OFF: '#D4D9DD',
|
|
||||||
GRADIENT_START: '#6B24AA',
|
|
||||||
GRADIENT_END: '#AC2688',
|
|
||||||
PRICE_COLOR: '#EAD5FB',
|
|
||||||
BORDER_COLOR: '#E7E7E7',
|
|
||||||
BLOCK: '#E7E7E7',
|
|
||||||
ICON: '#172B4D',
|
|
||||||
HEADER: '#525F7F',
|
|
||||||
BORDER: '#CAD1D7',
|
|
||||||
WHITE: '#FFFFFF',
|
|
||||||
BLACK: '#000000'
|
|
||||||
}
|
|
||||||
};
|
|
|
@ -1,29 +0,0 @@
|
||||||
export default [
|
|
||||||
{
|
|
||||||
title: 'Ice cream is made with carrageenan …',
|
|
||||||
image: 'https://images.unsplash.com/photo-1516559828984-fb3b99548b21?ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80',
|
|
||||||
cta: 'View article',
|
|
||||||
horizontal: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Is makeup one of your daily esse …',
|
|
||||||
image: 'https://images.unsplash.com/photo-1519368358672-25b03afee3bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2004&q=80',
|
|
||||||
cta: 'View article'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Coffee is more than just a drink: It’s …',
|
|
||||||
image: 'https://images.unsplash.com/photo-1500522144261-ea64433bbe27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80',
|
|
||||||
cta: 'View article'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Fashion is a popular style, especially in …',
|
|
||||||
image: 'https://images.unsplash.com/photo-1487222477894-8943e31ef7b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1326&q=80',
|
|
||||||
cta: 'View article'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Argon is a great free UI packag …',
|
|
||||||
image: 'https://images.unsplash.com/photo-1482686115713-0fbcaced6e28?fit=crop&w=1947&q=80',
|
|
||||||
cta: 'View article',
|
|
||||||
horizontal: true
|
|
||||||
},
|
|
||||||
];
|
|
|
@ -1,11 +0,0 @@
|
||||||
import argonTheme from './Theme';
|
|
||||||
import articles from './articles';
|
|
||||||
import Images from './Images';
|
|
||||||
import tabs from './tabs';
|
|
||||||
|
|
||||||
export {
|
|
||||||
articles,
|
|
||||||
argonTheme,
|
|
||||||
Images,
|
|
||||||
tabs
|
|
||||||
};
|
|
|
@ -1,8 +0,0 @@
|
||||||
export default tabs = {
|
|
||||||
categories: [
|
|
||||||
{ id: 'popular', title: 'Popular' },
|
|
||||||
{ id: 'beauty', title: 'Beauty' },
|
|
||||||
{ id: 'fashion', title: 'Fashion' },
|
|
||||||
{ id: 'car_motorcycle', title: 'Car & Motorcycle' },
|
|
||||||
],
|
|
||||||
}
|
|
|
@ -1,6 +0,0 @@
|
||||||
import { Platform, StatusBar } from 'react-native';
|
|
||||||
import { theme } from 'galio-framework';
|
|
||||||
|
|
||||||
export const StatusHeight = StatusBar.currentHeight;
|
|
||||||
export const HeaderHeight = (theme.SIZES.BASE * 3.5 + (StatusHeight || 0));
|
|
||||||
export const iPhoneX = () => Platform.OS === 'ios' && (height === 812 || width === 812);
|
|
|
@ -1,71 +0,0 @@
|
||||||
import { Block, Text, theme } from "galio-framework";
|
|
||||||
import { Image, ScrollView, StyleSheet } from "react-native";
|
|
||||||
|
|
||||||
import { DrawerItem as DrawerCustomItem } from "../components";
|
|
||||||
import Images from "../constants/Images";
|
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
function CustomDrawerContent({
|
|
||||||
drawerPosition,
|
|
||||||
navigation,
|
|
||||||
profile,
|
|
||||||
focused,
|
|
||||||
state,
|
|
||||||
...rest
|
|
||||||
}) {
|
|
||||||
const screens = ["Home", "Profile", "Account", "Elements", "Articles"];
|
|
||||||
return (
|
|
||||||
<Block
|
|
||||||
style={styles.container}
|
|
||||||
forceInset={{ top: "always", horizontal: "never" }}
|
|
||||||
>
|
|
||||||
<Block flex={0.06} style={styles.header}>
|
|
||||||
<Image styles={styles.logo} source={Images.Logo} />
|
|
||||||
</Block>
|
|
||||||
<Block flex style={{ paddingLeft: 8, paddingRight: 14 }}>
|
|
||||||
<ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
|
|
||||||
{screens.map((item, index) => {
|
|
||||||
return (
|
|
||||||
<DrawerCustomItem
|
|
||||||
title={item}
|
|
||||||
key={index}
|
|
||||||
navigation={navigation}
|
|
||||||
focused={state.index === index ? true : false}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
<Block
|
|
||||||
flex
|
|
||||||
style={{ marginTop: 24, marginVertical: 8, paddingHorizontal: 8 }}
|
|
||||||
>
|
|
||||||
<Block
|
|
||||||
style={{
|
|
||||||
borderColor: "rgba(0,0,0,0.2)",
|
|
||||||
width: "100%",
|
|
||||||
borderWidth: StyleSheet.hairlineWidth,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Text color="#8898AA" style={{ marginTop: 16, marginLeft: 8 }}>
|
|
||||||
DOCUMENTATION
|
|
||||||
</Text>
|
|
||||||
</Block>
|
|
||||||
<DrawerCustomItem title="Getting Started" navigation={navigation} />
|
|
||||||
</ScrollView>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
},
|
|
||||||
header: {
|
|
||||||
paddingHorizontal: 28,
|
|
||||||
paddingBottom: theme.SIZES.BASE,
|
|
||||||
paddingTop: theme.SIZES.BASE * 3,
|
|
||||||
justifyContent: "center",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export default CustomDrawerContent;
|
|
|
@ -1,256 +0,0 @@
|
||||||
import { Animated, Dimensions, Easing } from "react-native";
|
|
||||||
// header for screens
|
|
||||||
import { Header, Icon } from "../components";
|
|
||||||
import { argonTheme, tabs } from "../constants";
|
|
||||||
|
|
||||||
import Articles from "../screens/Articles";
|
|
||||||
import { Block } from "galio-framework";
|
|
||||||
// drawer
|
|
||||||
import CustomDrawerContent from "./Menu";
|
|
||||||
import Elements from "../screens/Elements";
|
|
||||||
// screens
|
|
||||||
import Home from "../screens/Home";
|
|
||||||
import Onboarding from "../screens/Onboarding";
|
|
||||||
import Pro from "../screens/Pro";
|
|
||||||
import Profile from "../screens/Profile";
|
|
||||||
import React from "react";
|
|
||||||
import Register from "../screens/Register";
|
|
||||||
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
|
|
||||||
import { createDrawerNavigator } from "@react-navigation/drawer";
|
|
||||||
import { createStackNavigator } from "@react-navigation/stack";
|
|
||||||
|
|
||||||
const { width } = Dimensions.get("screen");
|
|
||||||
|
|
||||||
const Stack = createStackNavigator();
|
|
||||||
const Drawer = createDrawerNavigator();
|
|
||||||
const Tab = createBottomTabNavigator();
|
|
||||||
|
|
||||||
function ElementsStack(props) {
|
|
||||||
return (
|
|
||||||
<Stack.Navigator
|
|
||||||
screenOptions={{
|
|
||||||
mode: "card",
|
|
||||||
headerShown: false,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Stack.Screen
|
|
||||||
name="Elements"
|
|
||||||
component={Elements}
|
|
||||||
options={{
|
|
||||||
header: ({ navigation, scene }) => (
|
|
||||||
<Header title="Elements" navigation={navigation} scene={scene} />
|
|
||||||
),
|
|
||||||
cardStyle: { backgroundColor: "#F8F9FE" },
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Stack.Screen
|
|
||||||
name="Pro"
|
|
||||||
component={Pro}
|
|
||||||
options={{
|
|
||||||
header: ({ navigation, scene }) => (
|
|
||||||
<Header
|
|
||||||
title=""
|
|
||||||
back
|
|
||||||
white
|
|
||||||
transparent
|
|
||||||
navigation={navigation}
|
|
||||||
scene={scene}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
headerTransparent: true,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Stack.Navigator>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function ArticlesStack(props) {
|
|
||||||
return (
|
|
||||||
<Stack.Navigator
|
|
||||||
screenOptions={{
|
|
||||||
mode: "card",
|
|
||||||
headerShown: "screen",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Stack.Screen
|
|
||||||
name="Articles"
|
|
||||||
component={Articles}
|
|
||||||
options={{
|
|
||||||
header: ({ navigation, scene }) => (
|
|
||||||
<Header title="Articles" navigation={navigation} scene={scene} />
|
|
||||||
),
|
|
||||||
cardStyle: { backgroundColor: "#F8F9FE" },
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Stack.Screen
|
|
||||||
name="Pro"
|
|
||||||
component={Pro}
|
|
||||||
options={{
|
|
||||||
header: ({ navigation, scene }) => (
|
|
||||||
<Header
|
|
||||||
title=""
|
|
||||||
back
|
|
||||||
white
|
|
||||||
transparent
|
|
||||||
navigation={navigation}
|
|
||||||
scene={scene}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
headerTransparent: true,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Stack.Navigator>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function ProfileStack(props) {
|
|
||||||
return (
|
|
||||||
<Stack.Navigator
|
|
||||||
initialRouteName="Profile"
|
|
||||||
screenOptions={{
|
|
||||||
mode: "card",
|
|
||||||
headerShown: "screen",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Stack.Screen
|
|
||||||
name="Profile"
|
|
||||||
component={Profile}
|
|
||||||
options={{
|
|
||||||
header: ({ navigation, scene }) => (
|
|
||||||
<Header
|
|
||||||
transparent
|
|
||||||
white
|
|
||||||
title="Profile"
|
|
||||||
navigation={navigation}
|
|
||||||
scene={scene}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
cardStyle: { backgroundColor: "#FFFFFF" },
|
|
||||||
headerTransparent: true,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Stack.Screen
|
|
||||||
name="Pro"
|
|
||||||
component={Pro}
|
|
||||||
options={{
|
|
||||||
header: ({ navigation, scene }) => (
|
|
||||||
<Header
|
|
||||||
title=""
|
|
||||||
back
|
|
||||||
white
|
|
||||||
transparent
|
|
||||||
navigation={navigation}
|
|
||||||
scene={scene}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
headerTransparent: true,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Stack.Navigator>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function HomeStack(props) {
|
|
||||||
return (
|
|
||||||
<Stack.Navigator
|
|
||||||
screenOptions={{
|
|
||||||
mode: "card",
|
|
||||||
headerShown: "screen",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Stack.Screen
|
|
||||||
name="Home"
|
|
||||||
component={Home}
|
|
||||||
options={{
|
|
||||||
header: ({ navigation, scene }) => (
|
|
||||||
<Header
|
|
||||||
title="Home"
|
|
||||||
search
|
|
||||||
options
|
|
||||||
navigation={navigation}
|
|
||||||
scene={scene}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
cardStyle: { backgroundColor: "#F8F9FE" },
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Stack.Screen
|
|
||||||
name="Pro"
|
|
||||||
component={Pro}
|
|
||||||
options={{
|
|
||||||
header: ({ navigation, scene }) => (
|
|
||||||
<Header
|
|
||||||
title=""
|
|
||||||
back
|
|
||||||
white
|
|
||||||
transparent
|
|
||||||
navigation={navigation}
|
|
||||||
scene={scene}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
headerTransparent: true,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Stack.Navigator>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function OnboardingStack(props) {
|
|
||||||
return (
|
|
||||||
<Stack.Navigator
|
|
||||||
screenOptions={{
|
|
||||||
mode: "card",
|
|
||||||
headerShown: false,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Stack.Screen
|
|
||||||
name="Onboarding"
|
|
||||||
component={Onboarding}
|
|
||||||
option={{
|
|
||||||
headerTransparent: true,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Stack.Screen name="App" component={AppStack} />
|
|
||||||
</Stack.Navigator>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function AppStack(props) {
|
|
||||||
return (
|
|
||||||
<Drawer.Navigator
|
|
||||||
style={{ flex: 1 }}
|
|
||||||
drawerContent={(props) => <CustomDrawerContent {...props} />}
|
|
||||||
drawerStyle={{
|
|
||||||
backgroundColor: "white",
|
|
||||||
width: width * 0.8,
|
|
||||||
}}
|
|
||||||
drawerContentOptions={{
|
|
||||||
activeTintcolor: "white",
|
|
||||||
inactiveTintColor: "#000",
|
|
||||||
activeBackgroundColor: "transparent",
|
|
||||||
itemStyle: {
|
|
||||||
width: width * 0.75,
|
|
||||||
backgroundColor: "transparent",
|
|
||||||
paddingVertical: 16,
|
|
||||||
paddingHorizonal: 12,
|
|
||||||
justifyContent: "center",
|
|
||||||
alignContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
overflow: "hidden",
|
|
||||||
},
|
|
||||||
labelStyle: {
|
|
||||||
fontSize: 18,
|
|
||||||
marginLeft: 12,
|
|
||||||
fontWeight: "normal",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
initialRouteName="Home"
|
|
||||||
>
|
|
||||||
<Drawer.Screen name="Home" component={HomeStack} />
|
|
||||||
<Drawer.Screen name="Profile" component={ProfileStack} />
|
|
||||||
<Drawer.Screen name="Account" component={Register} />
|
|
||||||
<Drawer.Screen name="Elements" component={ElementsStack} />
|
|
||||||
<Drawer.Screen name="Articles" component={ArticlesStack} />
|
|
||||||
</Drawer.Navigator>
|
|
||||||
);
|
|
||||||
}
|
|
|
@ -10,23 +10,13 @@
|
||||||
"eject": "expo eject"
|
"eject": "expo eject"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@react-native-community/masked-view": "^0.1.11",
|
|
||||||
"@react-navigation/native": "^6.0.11",
|
|
||||||
"expo": "~45.0.0",
|
"expo": "~45.0.0",
|
||||||
"expo-cli": "^5.4.12",
|
"expo-cli": "^5.4.12",
|
||||||
"expo-status-bar": "~1.3.0",
|
"expo-status-bar": "~1.3.0",
|
||||||
"galio-framework": "^0.8.0",
|
|
||||||
"react": "17.0.2",
|
"react": "17.0.2",
|
||||||
"react-dom": "17.0.2",
|
"react-dom": "17.0.2",
|
||||||
"react-native": "0.68.2",
|
"react-native": "0.68.2",
|
||||||
"react-native-gesture-handler": "~2.2.1",
|
|
||||||
"react-native-material-dropdown": "^0.11.1",
|
|
||||||
"react-native-reanimated": "~2.8.0",
|
|
||||||
"react-native-safe-area-context": "4.2.4",
|
|
||||||
"react-native-screens": "~3.11.1",
|
|
||||||
"react-native-web": "0.17.7",
|
"react-native-web": "0.17.7",
|
||||||
"react-navigation": "^4.4.4",
|
|
||||||
"react-navigation-stack": "^2.10.4",
|
|
||||||
"sharp-cli": "^2.1.1"
|
"sharp-cli": "^2.1.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
@ -1,252 +0,0 @@
|
||||||
//galio
|
|
||||||
import { Block, Text, theme } from "galio-framework";
|
|
||||||
import {
|
|
||||||
Dimensions,
|
|
||||||
Image,
|
|
||||||
ImageBackground,
|
|
||||||
ScrollView,
|
|
||||||
StyleSheet,
|
|
||||||
TouchableWithoutFeedback,
|
|
||||||
} from "react-native";
|
|
||||||
//argon
|
|
||||||
import { Images, argonTheme, articles } from "../constants/";
|
|
||||||
|
|
||||||
import { Card } from "../components/";
|
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
const { width } = Dimensions.get("screen");
|
|
||||||
|
|
||||||
const thumbMeasure = (width - 48 - 32) / 3;
|
|
||||||
const cardWidth = width - theme.SIZES.BASE * 2;
|
|
||||||
const categories = [
|
|
||||||
{
|
|
||||||
title: "Music Album",
|
|
||||||
description:
|
|
||||||
"Rock music is a genre of popular music. It developed during and after the 1960s in the United Kingdom.",
|
|
||||||
image:
|
|
||||||
"https://images.unsplash.com/photo-1470225620780-dba8ba36b745?fit=crop&w=840&q=80",
|
|
||||||
price: "$125",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Events",
|
|
||||||
description:
|
|
||||||
"Rock music is a genre of popular music. It developed during and after the 1960s in the United Kingdom.",
|
|
||||||
image:
|
|
||||||
"https://images.unsplash.com/photo-1543747579-795b9c2c3ada?fit=crop&w=840&q=80",
|
|
||||||
price: "$35",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
class Articles extends React.Component {
|
|
||||||
renderProduct = (item, index) => {
|
|
||||||
const { navigation } = this.props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<TouchableWithoutFeedback
|
|
||||||
style={{ zIndex: 3 }}
|
|
||||||
key={`product-${item.title}`}
|
|
||||||
onPress={() => navigation.navigate("Pro", { product: item })}
|
|
||||||
>
|
|
||||||
<Block center style={styles.productItem}>
|
|
||||||
<Image
|
|
||||||
resizeMode="cover"
|
|
||||||
style={styles.productImage}
|
|
||||||
source={{ uri: item.image }}
|
|
||||||
/>
|
|
||||||
<Block center style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
|
||||||
<Text
|
|
||||||
center
|
|
||||||
size={16}
|
|
||||||
color={theme.COLORS.MUTED}
|
|
||||||
style={styles.productPrice}
|
|
||||||
>
|
|
||||||
{item.price}
|
|
||||||
</Text>
|
|
||||||
<Text center size={34}>
|
|
||||||
{item.title}
|
|
||||||
</Text>
|
|
||||||
<Text
|
|
||||||
center
|
|
||||||
size={16}
|
|
||||||
color={theme.COLORS.MUTED}
|
|
||||||
style={styles.productDescription}
|
|
||||||
>
|
|
||||||
{item.description}
|
|
||||||
</Text>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</TouchableWithoutFeedback>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
renderCards = () => {
|
|
||||||
return (
|
|
||||||
<Block flex style={styles.group}>
|
|
||||||
<Text bold size={16} style={styles.title}>
|
|
||||||
Cards
|
|
||||||
</Text>
|
|
||||||
<Block flex>
|
|
||||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
|
||||||
<Card item={articles[0]} horizontal />
|
|
||||||
<Block flex row>
|
|
||||||
<Card
|
|
||||||
item={articles[1]}
|
|
||||||
style={{ marginRight: theme.SIZES.BASE }}
|
|
||||||
/>
|
|
||||||
<Card item={articles[2]} />
|
|
||||||
</Block>
|
|
||||||
<Card item={articles[4]} full />
|
|
||||||
<Block flex card shadow style={styles.category}>
|
|
||||||
<ImageBackground
|
|
||||||
source={{ uri: Images.Products["View article"] }}
|
|
||||||
style={[
|
|
||||||
styles.imageBlock,
|
|
||||||
{ width: width - theme.SIZES.BASE * 2, height: 252 },
|
|
||||||
]}
|
|
||||||
imageStyle={{
|
|
||||||
width: width - theme.SIZES.BASE * 2,
|
|
||||||
height: 252,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Block style={styles.categoryTitle}>
|
|
||||||
<Text size={18} bold color={theme.COLORS.WHITE}>
|
|
||||||
View article
|
|
||||||
</Text>
|
|
||||||
</Block>
|
|
||||||
</ImageBackground>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
<Block flex style={{ marginTop: theme.SIZES.BASE / 2 }}>
|
|
||||||
<ScrollView
|
|
||||||
horizontal={true}
|
|
||||||
pagingEnabled={true}
|
|
||||||
decelerationRate={0}
|
|
||||||
scrollEventThrottle={16}
|
|
||||||
snapToAlignment="center"
|
|
||||||
showsHorizontalScrollIndicator={false}
|
|
||||||
snapToInterval={cardWidth + theme.SIZES.BASE * 0.375}
|
|
||||||
contentContainerStyle={{
|
|
||||||
paddingHorizontal: theme.SIZES.BASE / 2,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{categories &&
|
|
||||||
categories.map((item, index) =>
|
|
||||||
this.renderProduct(item, index)
|
|
||||||
)}
|
|
||||||
</ScrollView>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
renderAlbum = () => {
|
|
||||||
const { navigation } = this.props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Block
|
|
||||||
flex
|
|
||||||
style={[styles.group, { paddingBottom: theme.SIZES.BASE * 5 }]}
|
|
||||||
>
|
|
||||||
<Text bold size={16} style={styles.title}>
|
|
||||||
Album
|
|
||||||
</Text>
|
|
||||||
<Block style={{ marginHorizontal: theme.SIZES.BASE * 2 }}>
|
|
||||||
<Block flex right>
|
|
||||||
<Text
|
|
||||||
size={12}
|
|
||||||
color={theme.COLORS.PRIMARY}
|
|
||||||
onPress={() => navigation.navigate("Home")}
|
|
||||||
>
|
|
||||||
View All
|
|
||||||
</Text>
|
|
||||||
</Block>
|
|
||||||
<Block
|
|
||||||
row
|
|
||||||
space="between"
|
|
||||||
style={{ marginTop: theme.SIZES.BASE, flexWrap: "wrap" }}
|
|
||||||
>
|
|
||||||
{Images.Viewed.map((img, index) => (
|
|
||||||
<Block key={`viewed-${img}`} style={styles.shadow}>
|
|
||||||
<Image
|
|
||||||
resizeMode="cover"
|
|
||||||
source={{ uri: img }}
|
|
||||||
style={styles.albumThumb}
|
|
||||||
/>
|
|
||||||
</Block>
|
|
||||||
))}
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<Block flex center>
|
|
||||||
<ScrollView showsVerticalScrollIndicator={false}>
|
|
||||||
{this.renderCards()}
|
|
||||||
{this.renderAlbum()}
|
|
||||||
</ScrollView>
|
|
||||||
</Block>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
title: {
|
|
||||||
paddingBottom: theme.SIZES.BASE,
|
|
||||||
paddingHorizontal: theme.SIZES.BASE * 2,
|
|
||||||
marginTop: 22,
|
|
||||||
color: argonTheme.COLORS.HEADER,
|
|
||||||
},
|
|
||||||
group: {
|
|
||||||
paddingTop: theme.SIZES.BASE,
|
|
||||||
},
|
|
||||||
albumThumb: {
|
|
||||||
borderRadius: 4,
|
|
||||||
marginVertical: 4,
|
|
||||||
alignSelf: "center",
|
|
||||||
width: thumbMeasure,
|
|
||||||
height: thumbMeasure,
|
|
||||||
},
|
|
||||||
category: {
|
|
||||||
backgroundColor: theme.COLORS.WHITE,
|
|
||||||
marginVertical: theme.SIZES.BASE / 2,
|
|
||||||
borderWidth: 0,
|
|
||||||
},
|
|
||||||
categoryTitle: {
|
|
||||||
height: "100%",
|
|
||||||
paddingHorizontal: theme.SIZES.BASE,
|
|
||||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
imageBlock: {
|
|
||||||
overflow: "hidden",
|
|
||||||
borderRadius: 4,
|
|
||||||
},
|
|
||||||
productItem: {
|
|
||||||
width: cardWidth - theme.SIZES.BASE * 2,
|
|
||||||
marginHorizontal: theme.SIZES.BASE,
|
|
||||||
shadowColor: "black",
|
|
||||||
shadowOffset: { width: 0, height: 7 },
|
|
||||||
shadowRadius: 10,
|
|
||||||
shadowOpacity: 0.2,
|
|
||||||
},
|
|
||||||
productImage: {
|
|
||||||
width: cardWidth - theme.SIZES.BASE,
|
|
||||||
height: cardWidth - theme.SIZES.BASE,
|
|
||||||
borderRadius: 3,
|
|
||||||
},
|
|
||||||
productPrice: {
|
|
||||||
paddingTop: theme.SIZES.BASE,
|
|
||||||
paddingBottom: theme.SIZES.BASE / 2,
|
|
||||||
},
|
|
||||||
productDescription: {
|
|
||||||
paddingTop: theme.SIZES.BASE,
|
|
||||||
// paddingBottom: theme.SIZES.BASE * 2,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export default Articles;
|
|
|
@ -1,487 +0,0 @@
|
||||||
// Galio components
|
|
||||||
import { Block, Button as GaButton, Text, theme } from "galio-framework";
|
|
||||||
import { Button, Header, Icon, Input, Select, Switch } from "../components/";
|
|
||||||
import {
|
|
||||||
Dimensions,
|
|
||||||
ScrollView,
|
|
||||||
StyleSheet,
|
|
||||||
TouchableOpacity,
|
|
||||||
} from "react-native";
|
|
||||||
// Argon themed components
|
|
||||||
import { argonTheme, tabs } from "../constants/";
|
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
const { width } = Dimensions.get("screen");
|
|
||||||
|
|
||||||
class Elements extends React.Component {
|
|
||||||
state = {
|
|
||||||
"switch-1": true,
|
|
||||||
"switch-2": false,
|
|
||||||
};
|
|
||||||
|
|
||||||
toggleSwitch = (switchId) =>
|
|
||||||
this.setState({ [switchId]: !this.state[switchId] });
|
|
||||||
|
|
||||||
renderButtons = () => {
|
|
||||||
return (
|
|
||||||
<Block flex>
|
|
||||||
<Text bold size={16} style={styles.title}>
|
|
||||||
Buttons
|
|
||||||
</Text>
|
|
||||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
|
||||||
<Block center>
|
|
||||||
<Button color="default" style={styles.button}>
|
|
||||||
DEFAULT
|
|
||||||
</Button>
|
|
||||||
</Block>
|
|
||||||
<Block center>
|
|
||||||
<Button
|
|
||||||
color="secondary"
|
|
||||||
textStyle={{ color: "black", fontSize: 12, fontWeight: "700" }}
|
|
||||||
style={styles.button}
|
|
||||||
>
|
|
||||||
SECONDARY
|
|
||||||
</Button>
|
|
||||||
</Block>
|
|
||||||
<Block center>
|
|
||||||
<Button style={styles.button}>PRIMARY</Button>
|
|
||||||
</Block>
|
|
||||||
<Block center>
|
|
||||||
<Button color="info" style={styles.button}>
|
|
||||||
INFO
|
|
||||||
</Button>
|
|
||||||
</Block>
|
|
||||||
<Block center>
|
|
||||||
<Button color="success" style={styles.button}>
|
|
||||||
SUCCESS
|
|
||||||
</Button>
|
|
||||||
</Block>
|
|
||||||
<Block center>
|
|
||||||
<Button color="warning" style={styles.button}>
|
|
||||||
WARNING
|
|
||||||
</Button>
|
|
||||||
</Block>
|
|
||||||
<Block center>
|
|
||||||
<Button color="error" style={styles.button}>
|
|
||||||
ERROR
|
|
||||||
</Button>
|
|
||||||
</Block>
|
|
||||||
<Block row space="evenly">
|
|
||||||
<Block flex left style={{ marginTop: 8 }}>
|
|
||||||
<Select
|
|
||||||
defaultIndex={1}
|
|
||||||
options={["01", "02", "03", "04", "05"]}
|
|
||||||
/>
|
|
||||||
</Block>
|
|
||||||
<Block flex center>
|
|
||||||
<Button small center color="default" style={styles.optionsButton}>
|
|
||||||
DELETE
|
|
||||||
</Button>
|
|
||||||
</Block>
|
|
||||||
<Block flex={1.25} right>
|
|
||||||
<Button center color="default" style={styles.optionsButton}>
|
|
||||||
SAVE FOR LATER
|
|
||||||
</Button>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
renderText = () => {
|
|
||||||
return (
|
|
||||||
<Block flex style={styles.group}>
|
|
||||||
<Text bold size={16} style={styles.title}>
|
|
||||||
Typography
|
|
||||||
</Text>
|
|
||||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
|
||||||
<Text
|
|
||||||
h1
|
|
||||||
style={{ marginBottom: theme.SIZES.BASE / 2 }}
|
|
||||||
color={argonTheme.COLORS.DEFAULT}
|
|
||||||
>
|
|
||||||
Heading 1
|
|
||||||
</Text>
|
|
||||||
<Text
|
|
||||||
h2
|
|
||||||
style={{ marginBottom: theme.SIZES.BASE / 2 }}
|
|
||||||
color={argonTheme.COLORS.DEFAULT}
|
|
||||||
>
|
|
||||||
Heading 2
|
|
||||||
</Text>
|
|
||||||
<Text
|
|
||||||
h3
|
|
||||||
style={{ marginBottom: theme.SIZES.BASE / 2 }}
|
|
||||||
color={argonTheme.COLORS.DEFAULT}
|
|
||||||
>
|
|
||||||
Heading 3
|
|
||||||
</Text>
|
|
||||||
<Text
|
|
||||||
h4
|
|
||||||
style={{ marginBottom: theme.SIZES.BASE / 2 }}
|
|
||||||
color={argonTheme.COLORS.DEFAULT}
|
|
||||||
>
|
|
||||||
Heading 4
|
|
||||||
</Text>
|
|
||||||
<Text
|
|
||||||
h5
|
|
||||||
style={{ marginBottom: theme.SIZES.BASE / 2 }}
|
|
||||||
color={argonTheme.COLORS.DEFAULT}
|
|
||||||
>
|
|
||||||
Heading 5
|
|
||||||
</Text>
|
|
||||||
<Text
|
|
||||||
p
|
|
||||||
style={{ marginBottom: theme.SIZES.BASE / 2 }}
|
|
||||||
color={argonTheme.COLORS.DEFAULT}
|
|
||||||
>
|
|
||||||
Paragraph
|
|
||||||
</Text>
|
|
||||||
<Text muted>This is a muted paragraph.</Text>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
renderInputs = () => {
|
|
||||||
return (
|
|
||||||
<Block flex style={styles.group}>
|
|
||||||
<Text bold size={16} style={styles.title}>
|
|
||||||
Inputs
|
|
||||||
</Text>
|
|
||||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
|
||||||
<Input right placeholder="Regular" iconContent={<Block />} />
|
|
||||||
</Block>
|
|
||||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
|
||||||
<Input
|
|
||||||
right
|
|
||||||
placeholder="Regular Custom"
|
|
||||||
style={{
|
|
||||||
borderColor: argonTheme.COLORS.INFO,
|
|
||||||
borderRadius: 4,
|
|
||||||
backgroundColor: "#fff",
|
|
||||||
}}
|
|
||||||
iconContent={<Block />}
|
|
||||||
/>
|
|
||||||
</Block>
|
|
||||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
|
||||||
<Input
|
|
||||||
placeholder="Icon left"
|
|
||||||
iconContent={
|
|
||||||
<Icon
|
|
||||||
size={11}
|
|
||||||
style={{ marginRight: 10 }}
|
|
||||||
color={argonTheme.COLORS.ICON}
|
|
||||||
name="search-zoom-in"
|
|
||||||
family="ArgonExtra"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Block>
|
|
||||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
|
||||||
<Input
|
|
||||||
right
|
|
||||||
placeholder="Icon Right"
|
|
||||||
iconContent={
|
|
||||||
<Icon
|
|
||||||
size={11}
|
|
||||||
color={argonTheme.COLORS.ICON}
|
|
||||||
name="search-zoom-in"
|
|
||||||
family="ArgonExtra"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Block>
|
|
||||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
|
||||||
<Input
|
|
||||||
success
|
|
||||||
right
|
|
||||||
placeholder="Success"
|
|
||||||
iconContent={
|
|
||||||
<Block
|
|
||||||
middle
|
|
||||||
style={{
|
|
||||||
width: 20,
|
|
||||||
height: 20,
|
|
||||||
borderRadius: 10,
|
|
||||||
backgroundColor: argonTheme.COLORS.INPUT_SUCCESS,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
size={11}
|
|
||||||
color={argonTheme.COLORS.ICON}
|
|
||||||
name="g-check"
|
|
||||||
family="ArgonExtra"
|
|
||||||
/>
|
|
||||||
</Block>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Block>
|
|
||||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
|
||||||
<Input
|
|
||||||
error
|
|
||||||
right
|
|
||||||
placeholder="Error Input"
|
|
||||||
iconContent={
|
|
||||||
<Block
|
|
||||||
middle
|
|
||||||
style={{
|
|
||||||
width: 20,
|
|
||||||
height: 20,
|
|
||||||
borderRadius: 10,
|
|
||||||
backgroundColor: argonTheme.COLORS.INPUT_ERROR,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
size={11}
|
|
||||||
color={argonTheme.COLORS.ICON}
|
|
||||||
name="support"
|
|
||||||
family="ArgonExtra"
|
|
||||||
/>
|
|
||||||
</Block>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
renderSwitches = () => {
|
|
||||||
return (
|
|
||||||
<Block flex style={styles.group}>
|
|
||||||
<Text bold size={16} style={styles.title}>
|
|
||||||
Switches
|
|
||||||
</Text>
|
|
||||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
|
||||||
<Block
|
|
||||||
row
|
|
||||||
middle
|
|
||||||
space="between"
|
|
||||||
style={{ marginBottom: theme.SIZES.BASE }}
|
|
||||||
>
|
|
||||||
<Text size={14}>Switch is ON</Text>
|
|
||||||
<Switch
|
|
||||||
value={this.state["switch-1"]}
|
|
||||||
onValueChange={() => this.toggleSwitch("switch-1")}
|
|
||||||
/>
|
|
||||||
</Block>
|
|
||||||
<Block row middle space="between">
|
|
||||||
<Text size={14}>Switch is OFF</Text>
|
|
||||||
<Switch
|
|
||||||
value={this.state["switch-2"]}
|
|
||||||
onValueChange={() => this.toggleSwitch("switch-2")}
|
|
||||||
/>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
renderTableCell = () => {
|
|
||||||
const { navigation } = this.props;
|
|
||||||
return (
|
|
||||||
<Block flex style={styles.group}>
|
|
||||||
<Text bold size={16} style={styles.title}>
|
|
||||||
Table Cell
|
|
||||||
</Text>
|
|
||||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
|
||||||
<Block style={styles.rows}>
|
|
||||||
<TouchableOpacity onPress={() => navigation.navigate("Pro")}>
|
|
||||||
<Block row middle space="between" style={{ paddingTop: 7 }}>
|
|
||||||
<Text size={14}>Manage Options</Text>
|
|
||||||
<Icon
|
|
||||||
name="chevron-right"
|
|
||||||
family="entypo"
|
|
||||||
style={{ paddingRight: 5 }}
|
|
||||||
/>
|
|
||||||
</Block>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
renderSocial = () => {
|
|
||||||
return (
|
|
||||||
<Block flex style={styles.group}>
|
|
||||||
<Text bold size={16} style={styles.title}>
|
|
||||||
Social
|
|
||||||
</Text>
|
|
||||||
<Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
|
|
||||||
<Block row center space="between">
|
|
||||||
<Block flex middle right>
|
|
||||||
<GaButton
|
|
||||||
round
|
|
||||||
onlyIcon
|
|
||||||
shadowless
|
|
||||||
icon="facebook"
|
|
||||||
iconFamily="Font-Awesome"
|
|
||||||
iconColor={theme.COLORS.WHITE}
|
|
||||||
iconSize={theme.SIZES.BASE * 1.625}
|
|
||||||
color={theme.COLORS.FACEBOOK}
|
|
||||||
style={[styles.social, styles.shadow]}
|
|
||||||
/>
|
|
||||||
</Block>
|
|
||||||
<Block flex middle center>
|
|
||||||
<GaButton
|
|
||||||
round
|
|
||||||
onlyIcon
|
|
||||||
shadowless
|
|
||||||
icon="twitter"
|
|
||||||
iconFamily="Font-Awesome"
|
|
||||||
iconColor={theme.COLORS.WHITE}
|
|
||||||
iconSize={theme.SIZES.BASE * 1.625}
|
|
||||||
color={theme.COLORS.TWITTER}
|
|
||||||
style={[styles.social, styles.shadow]}
|
|
||||||
/>
|
|
||||||
</Block>
|
|
||||||
<Block flex middle left>
|
|
||||||
<GaButton
|
|
||||||
round
|
|
||||||
onlyIcon
|
|
||||||
shadowless
|
|
||||||
icon="dribbble"
|
|
||||||
iconFamily="Font-Awesome"
|
|
||||||
iconColor={theme.COLORS.WHITE}
|
|
||||||
iconSize={theme.SIZES.BASE * 1.625}
|
|
||||||
color={theme.COLORS.DRIBBBLE}
|
|
||||||
style={[styles.social, styles.shadow]}
|
|
||||||
/>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
renderNavigation = () => {
|
|
||||||
return (
|
|
||||||
<Block flex style={styles.group}>
|
|
||||||
<Text bold size={16} style={styles.title}>
|
|
||||||
Navigation
|
|
||||||
</Text>
|
|
||||||
<Block>
|
|
||||||
<Block style={{ marginBottom: theme.SIZES.BASE }}>
|
|
||||||
<Header back title="Title" navigation={this.props.navigation} />
|
|
||||||
</Block>
|
|
||||||
|
|
||||||
<Block style={{ marginBottom: theme.SIZES.BASE }}>
|
|
||||||
<Header
|
|
||||||
white
|
|
||||||
back
|
|
||||||
title="Title"
|
|
||||||
navigation={this.props.navigation}
|
|
||||||
bgColor={argonTheme.COLORS.ACTIVE}
|
|
||||||
titleColor="white"
|
|
||||||
iconColor="white"
|
|
||||||
/>
|
|
||||||
</Block>
|
|
||||||
|
|
||||||
<Block style={{ marginBottom: theme.SIZES.BASE }}>
|
|
||||||
<Header search title="Title" navigation={this.props.navigation} />
|
|
||||||
</Block>
|
|
||||||
|
|
||||||
<Block style={{ marginBottom: theme.SIZES.BASE }}>
|
|
||||||
<Header
|
|
||||||
tabs={tabs.categories}
|
|
||||||
search
|
|
||||||
title="Title"
|
|
||||||
navigation={this.props.navigation}
|
|
||||||
/>
|
|
||||||
</Block>
|
|
||||||
|
|
||||||
<Block style={{ marginBottom: theme.SIZES.BASE }}>
|
|
||||||
<Header
|
|
||||||
options
|
|
||||||
search
|
|
||||||
title="Title"
|
|
||||||
optionLeft="Option 1"
|
|
||||||
optionRight="Option 2"
|
|
||||||
navigation={this.props.navigation}
|
|
||||||
/>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<Block flex center>
|
|
||||||
<ScrollView
|
|
||||||
showsVerticalScrollIndicator={false}
|
|
||||||
contentContainerStyle={{ paddingBottom: 30, width }}
|
|
||||||
>
|
|
||||||
{this.renderButtons()}
|
|
||||||
{this.renderText()}
|
|
||||||
{this.renderInputs()}
|
|
||||||
{this.renderSocial()}
|
|
||||||
{this.renderSwitches()}
|
|
||||||
{this.renderNavigation()}
|
|
||||||
{this.renderTableCell()}
|
|
||||||
</ScrollView>
|
|
||||||
</Block>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
title: {
|
|
||||||
paddingBottom: theme.SIZES.BASE,
|
|
||||||
paddingHorizontal: theme.SIZES.BASE * 2,
|
|
||||||
marginTop: 44,
|
|
||||||
color: argonTheme.COLORS.HEADER,
|
|
||||||
},
|
|
||||||
group: {
|
|
||||||
paddingTop: theme.SIZES.BASE * 2,
|
|
||||||
},
|
|
||||||
shadow: {
|
|
||||||
shadowColor: "black",
|
|
||||||
shadowOffset: { width: 0, height: 2 },
|
|
||||||
shadowRadius: 4,
|
|
||||||
shadowOpacity: 0.2,
|
|
||||||
elevation: 2,
|
|
||||||
},
|
|
||||||
button: {
|
|
||||||
marginBottom: theme.SIZES.BASE,
|
|
||||||
width: width - theme.SIZES.BASE * 2,
|
|
||||||
},
|
|
||||||
optionsButton: {
|
|
||||||
width: "auto",
|
|
||||||
height: 34,
|
|
||||||
paddingHorizontal: theme.SIZES.BASE,
|
|
||||||
paddingVertical: 10,
|
|
||||||
},
|
|
||||||
input: {
|
|
||||||
borderBottomWidth: 1,
|
|
||||||
},
|
|
||||||
inputDefault: {
|
|
||||||
borderBottomColor: argonTheme.COLORS.PLACEHOLDER,
|
|
||||||
},
|
|
||||||
inputTheme: {
|
|
||||||
borderBottomColor: argonTheme.COLORS.PRIMARY,
|
|
||||||
},
|
|
||||||
inputInfo: {
|
|
||||||
borderBottomColor: argonTheme.COLORS.INFO,
|
|
||||||
},
|
|
||||||
inputSuccess: {
|
|
||||||
borderBottomColor: argonTheme.COLORS.SUCCESS,
|
|
||||||
},
|
|
||||||
inputWarning: {
|
|
||||||
borderBottomColor: argonTheme.COLORS.WARNING,
|
|
||||||
},
|
|
||||||
inputDanger: {
|
|
||||||
borderBottomColor: argonTheme.COLORS.ERROR,
|
|
||||||
},
|
|
||||||
social: {
|
|
||||||
width: theme.SIZES.BASE * 3.5,
|
|
||||||
height: theme.SIZES.BASE * 3.5,
|
|
||||||
borderRadius: theme.SIZES.BASE * 1.75,
|
|
||||||
justifyContent: "center",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export default Elements;
|
|
|
@ -1,47 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { StyleSheet, Dimensions, ScrollView } from 'react-native';
|
|
||||||
import { Block, theme } from 'galio-framework';
|
|
||||||
|
|
||||||
import { Card } from '../components';
|
|
||||||
import articles from '../constants/articles';
|
|
||||||
const { width } = Dimensions.get('screen');
|
|
||||||
|
|
||||||
class Home extends React.Component {
|
|
||||||
renderArticles = () => {
|
|
||||||
return (
|
|
||||||
<ScrollView
|
|
||||||
showsVerticalScrollIndicator={false}
|
|
||||||
contentContainerStyle={styles.articles}>
|
|
||||||
<Block flex>
|
|
||||||
<Card item={articles[0]} horizontal />
|
|
||||||
<Block flex row>
|
|
||||||
<Card item={articles[1]} style={{ marginRight: theme.SIZES.BASE }} />
|
|
||||||
<Card item={articles[2]} />
|
|
||||||
</Block>
|
|
||||||
<Card item={articles[3]} horizontal />
|
|
||||||
<Card item={articles[4]} full />
|
|
||||||
</Block>
|
|
||||||
</ScrollView>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<Block flex center style={styles.home}>
|
|
||||||
{this.renderArticles()}
|
|
||||||
</Block>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
home: {
|
|
||||||
width: width,
|
|
||||||
},
|
|
||||||
articles: {
|
|
||||||
width: width - theme.SIZES.BASE * 2,
|
|
||||||
paddingVertical: theme.SIZES.BASE,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export default Home;
|
|
|
@ -1,99 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import {
|
|
||||||
ImageBackground,
|
|
||||||
Image,
|
|
||||||
StyleSheet,
|
|
||||||
StatusBar,
|
|
||||||
Dimensions
|
|
||||||
} from "react-native";
|
|
||||||
import { Block, Button, Text, theme } from "galio-framework";
|
|
||||||
|
|
||||||
const { height, width } = Dimensions.get("screen");
|
|
||||||
|
|
||||||
import argonTheme from "../constants/Theme";
|
|
||||||
import Images from "../constants/Images";
|
|
||||||
|
|
||||||
class Onboarding extends React.Component {
|
|
||||||
render() {
|
|
||||||
const { navigation } = this.props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Block flex style={styles.container}>
|
|
||||||
<StatusBar hidden />
|
|
||||||
<Block flex center>
|
|
||||||
<ImageBackground
|
|
||||||
source={Images.Onboarding}
|
|
||||||
style={{ height, width, zIndex: 1 }}
|
|
||||||
/>
|
|
||||||
</Block>
|
|
||||||
<Block center>
|
|
||||||
<Image source={Images.LogoOnboarding} style={styles.logo} />
|
|
||||||
</Block>
|
|
||||||
<Block flex space="between" style={styles.padded}>
|
|
||||||
<Block flex space="around" style={{ zIndex: 2 }}>
|
|
||||||
<Block style={styles.title}>
|
|
||||||
<Block>
|
|
||||||
<Text color="white" size={60}>
|
|
||||||
Design
|
|
||||||
</Text>
|
|
||||||
</Block>
|
|
||||||
<Block>
|
|
||||||
<Text color="white" size={60}>
|
|
||||||
System
|
|
||||||
</Text>
|
|
||||||
</Block>
|
|
||||||
<Block style={styles.subTitle}>
|
|
||||||
<Text color="white" size={16}>
|
|
||||||
Fully coded React Native components.
|
|
||||||
</Text>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
<Block center>
|
|
||||||
<Button
|
|
||||||
style={styles.button}
|
|
||||||
color={argonTheme.COLORS.SECONDARY}
|
|
||||||
onPress={() => navigation.navigate("App")}
|
|
||||||
textStyle={{ color: argonTheme.COLORS.BLACK }}
|
|
||||||
>
|
|
||||||
Get Started
|
|
||||||
</Button>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
backgroundColor: theme.COLORS.BLACK
|
|
||||||
},
|
|
||||||
padded: {
|
|
||||||
paddingHorizontal: theme.SIZES.BASE * 2,
|
|
||||||
position: "relative",
|
|
||||||
bottom: theme.SIZES.BASE,
|
|
||||||
zIndex: 2,
|
|
||||||
},
|
|
||||||
button: {
|
|
||||||
width: width - theme.SIZES.BASE * 4,
|
|
||||||
height: theme.SIZES.BASE * 3,
|
|
||||||
shadowRadius: 0,
|
|
||||||
shadowOpacity: 0
|
|
||||||
},
|
|
||||||
logo: {
|
|
||||||
width: 200,
|
|
||||||
height: 60,
|
|
||||||
zIndex: 2,
|
|
||||||
position: 'relative',
|
|
||||||
marginTop: '-50%'
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
marginTop:'-5%'
|
|
||||||
},
|
|
||||||
subTitle: {
|
|
||||||
marginTop: 20
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
export default Onboarding;
|
|
|
@ -1,100 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { ImageBackground, Image, StyleSheet, StatusBar, Dimensions, Platform, Linking } from 'react-native';
|
|
||||||
import { Block, Button, Text, theme } from 'galio-framework';
|
|
||||||
|
|
||||||
const { height, width } = Dimensions.get('screen');
|
|
||||||
import { Images, argonTheme } from '../constants/';
|
|
||||||
import { HeaderHeight } from "../constants/utils";
|
|
||||||
|
|
||||||
export default class Pro extends React.Component {
|
|
||||||
render() {
|
|
||||||
const { navigation } = this.props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Block flex style={styles.container}>
|
|
||||||
<StatusBar barStyle="light-content" />
|
|
||||||
<Block flex>
|
|
||||||
<ImageBackground
|
|
||||||
source={Images.Pro}
|
|
||||||
style={{ flex: 1, height: height, width, zIndex: 1 }}
|
|
||||||
/>
|
|
||||||
<Block space="between" style={styles.padded}>
|
|
||||||
<Block>
|
|
||||||
<Block>
|
|
||||||
<Image source={Images.ArgonLogo}
|
|
||||||
style={{ marginBottom: theme.SIZES.BASE * 1.5 }}/>
|
|
||||||
</Block>
|
|
||||||
<Block >
|
|
||||||
<Block>
|
|
||||||
<Text color="white" size={60}>Argon</Text>
|
|
||||||
</Block>
|
|
||||||
<Block>
|
|
||||||
<Text color="white" size={60}>Design</Text>
|
|
||||||
</Block>
|
|
||||||
<Block row>
|
|
||||||
<Text color="white" size={60}>System</Text>
|
|
||||||
<Block middle style={styles.pro}>
|
|
||||||
<Text size={16} color="white">PRO</Text>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
<Text size={16} color='rgba(255,255,255,0.6)' style={{ marginTop: 35 }}>
|
|
||||||
Take advantage of all the features and screens made upon Galio Design System, coded on React Native for both.
|
|
||||||
</Text>
|
|
||||||
<Block row style={{ marginTop: theme.SIZES.BASE * 1.5, marginBottom: theme.SIZES.BASE * 4 }}>
|
|
||||||
<Image
|
|
||||||
source={Images.iOSLogo}
|
|
||||||
style={{ height: 38, width: 82, marginRight: theme.SIZES.BASE * 1.5 }} />
|
|
||||||
<Image
|
|
||||||
source={Images.androidLogo}
|
|
||||||
style={{ height: 38, width: 140 }} />
|
|
||||||
</Block>
|
|
||||||
<Button
|
|
||||||
shadowless
|
|
||||||
style={styles.button}
|
|
||||||
color={argonTheme.COLORS.INFO}
|
|
||||||
onPress={() => Linking.openURL('https://www.creative-tim.com/product/argon-pro-react-native').catch((err) => console.error('An error occurred', err))}>
|
|
||||||
<Text bold color={theme.COLORS.WHITE}>BUY NOW</Text>
|
|
||||||
</Button>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
backgroundColor: theme.COLORS.BLACK,
|
|
||||||
marginTop: Platform.OS === 'android' ? -HeaderHeight : 0,
|
|
||||||
},
|
|
||||||
padded: {
|
|
||||||
paddingHorizontal: theme.SIZES.BASE * 2,
|
|
||||||
zIndex: 3,
|
|
||||||
position: 'absolute',
|
|
||||||
bottom: Platform.OS === 'android' ? theme.SIZES.BASE * 2 : theme.SIZES.BASE * 3,
|
|
||||||
},
|
|
||||||
button: {
|
|
||||||
width: width - theme.SIZES.BASE * 4,
|
|
||||||
height: theme.SIZES.BASE * 3,
|
|
||||||
shadowRadius: 0,
|
|
||||||
shadowOpacity: 0,
|
|
||||||
},
|
|
||||||
pro: {
|
|
||||||
backgroundColor: argonTheme.COLORS.INFO,
|
|
||||||
paddingHorizontal: 8,
|
|
||||||
marginLeft: 3,
|
|
||||||
borderRadius: 4,
|
|
||||||
height: 22,
|
|
||||||
marginTop: 15
|
|
||||||
},
|
|
||||||
gradient: {
|
|
||||||
zIndex: 1,
|
|
||||||
position: 'absolute',
|
|
||||||
bottom: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
height: 66,
|
|
||||||
},
|
|
||||||
});
|
|
|
@ -1,342 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import {
|
|
||||||
StyleSheet,
|
|
||||||
Dimensions,
|
|
||||||
ScrollView,
|
|
||||||
Image,
|
|
||||||
ImageBackground,
|
|
||||||
Platform
|
|
||||||
} from "react-native";
|
|
||||||
import { Block, Text, theme } from "galio-framework";
|
|
||||||
|
|
||||||
import { Button } from "../components";
|
|
||||||
import { Images, argonTheme } from "../constants";
|
|
||||||
import { HeaderHeight } from "../constants/utils";
|
|
||||||
|
|
||||||
const { width, height } = Dimensions.get("screen");
|
|
||||||
|
|
||||||
const thumbMeasure = (width - 48 - 32) / 3;
|
|
||||||
|
|
||||||
class Profile extends React.Component {
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<Block flex style={styles.profile}>
|
|
||||||
<Block flex>
|
|
||||||
<ImageBackground
|
|
||||||
source={Images.ProfileBackground}
|
|
||||||
style={styles.profileContainer}
|
|
||||||
imageStyle={styles.profileBackground}
|
|
||||||
>
|
|
||||||
<ScrollView
|
|
||||||
showsVerticalScrollIndicator={false}
|
|
||||||
style={{ width, marginTop: '25%' }}
|
|
||||||
>
|
|
||||||
<Block flex style={styles.profileCard}>
|
|
||||||
<Block middle style={styles.avatarContainer}>
|
|
||||||
<Image
|
|
||||||
source={{ uri: Images.ProfilePicture }}
|
|
||||||
style={styles.avatar}
|
|
||||||
/>
|
|
||||||
</Block>
|
|
||||||
<Block style={styles.info}>
|
|
||||||
<Block
|
|
||||||
middle
|
|
||||||
row
|
|
||||||
space="evenly"
|
|
||||||
style={{ marginTop: 20, paddingBottom: 24 }}
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
small
|
|
||||||
style={{ backgroundColor: argonTheme.COLORS.INFO }}
|
|
||||||
>
|
|
||||||
CONNECT
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
small
|
|
||||||
style={{ backgroundColor: argonTheme.COLORS.DEFAULT }}
|
|
||||||
>
|
|
||||||
MESSAGE
|
|
||||||
</Button>
|
|
||||||
</Block>
|
|
||||||
<Block row space="between">
|
|
||||||
<Block middle>
|
|
||||||
<Text
|
|
||||||
bold
|
|
||||||
size={18}
|
|
||||||
color="#525F7F"
|
|
||||||
style={{ marginBottom: 4 }}
|
|
||||||
>
|
|
||||||
2K
|
|
||||||
</Text>
|
|
||||||
<Text size={12} color={argonTheme.COLORS.TEXT}>Orders</Text>
|
|
||||||
</Block>
|
|
||||||
<Block middle>
|
|
||||||
<Text
|
|
||||||
bold
|
|
||||||
color="#525F7F"
|
|
||||||
size={18}
|
|
||||||
style={{ marginBottom: 4 }}
|
|
||||||
>
|
|
||||||
10
|
|
||||||
</Text>
|
|
||||||
<Text size={12} color={argonTheme.COLORS.TEXT}>Photos</Text>
|
|
||||||
</Block>
|
|
||||||
<Block middle>
|
|
||||||
<Text
|
|
||||||
bold
|
|
||||||
color="#525F7F"
|
|
||||||
size={18}
|
|
||||||
style={{ marginBottom: 4 }}
|
|
||||||
>
|
|
||||||
89
|
|
||||||
</Text>
|
|
||||||
<Text size={12} color={argonTheme.COLORS.TEXT}>Comments</Text>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
<Block flex>
|
|
||||||
<Block middle style={styles.nameInfo}>
|
|
||||||
<Text bold size={28} color="#32325D">
|
|
||||||
Jessica Jones, 27
|
|
||||||
</Text>
|
|
||||||
<Text size={16} color="#32325D" style={{ marginTop: 10 }}>
|
|
||||||
San Francisco, USA
|
|
||||||
</Text>
|
|
||||||
</Block>
|
|
||||||
<Block middle style={{ marginTop: 30, marginBottom: 16 }}>
|
|
||||||
<Block style={styles.divider} />
|
|
||||||
</Block>
|
|
||||||
<Block middle>
|
|
||||||
<Text
|
|
||||||
size={16}
|
|
||||||
color="#525F7F"
|
|
||||||
style={{ textAlign: "center" }}
|
|
||||||
>
|
|
||||||
An artist of considerable range, Jessica name taken by
|
|
||||||
Melbourne …
|
|
||||||
</Text>
|
|
||||||
<Button
|
|
||||||
color="transparent"
|
|
||||||
textStyle={{
|
|
||||||
color: "#233DD2",
|
|
||||||
fontWeight: "500",
|
|
||||||
fontSize: 16
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Show more
|
|
||||||
</Button>
|
|
||||||
</Block>
|
|
||||||
<Block
|
|
||||||
row
|
|
||||||
space="between"
|
|
||||||
>
|
|
||||||
<Text bold size={16} color="#525F7F" style={{marginTop: 12}}>
|
|
||||||
Album
|
|
||||||
</Text>
|
|
||||||
<Button
|
|
||||||
small
|
|
||||||
color="transparent"
|
|
||||||
textStyle={{ color: "#5E72E4", fontSize: 12, marginLeft: 24 }}
|
|
||||||
>
|
|
||||||
View all
|
|
||||||
</Button>
|
|
||||||
</Block>
|
|
||||||
<Block style={{ paddingBottom: -HeaderHeight * 2 }}>
|
|
||||||
<Block row space="between" style={{ flexWrap: "wrap" }}>
|
|
||||||
{Images.Viewed.map((img, imgIndex) => (
|
|
||||||
<Image
|
|
||||||
source={{ uri: img }}
|
|
||||||
key={`viewed-${img}`}
|
|
||||||
resizeMode="cover"
|
|
||||||
style={styles.thumb}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</ScrollView>
|
|
||||||
</ImageBackground>
|
|
||||||
</Block>
|
|
||||||
{/* <ScrollView showsVerticalScrollIndicator={false}
|
|
||||||
contentContainerStyle={{ flex: 1, width, height, zIndex: 9000, backgroundColor: 'red' }}>
|
|
||||||
<Block flex style={styles.profileCard}>
|
|
||||||
<Block middle style={styles.avatarContainer}>
|
|
||||||
<Image
|
|
||||||
source={{ uri: Images.ProfilePicture }}
|
|
||||||
style={styles.avatar}
|
|
||||||
/>
|
|
||||||
</Block>
|
|
||||||
<Block style={styles.info}>
|
|
||||||
<Block
|
|
||||||
middle
|
|
||||||
row
|
|
||||||
space="evenly"
|
|
||||||
style={{ marginTop: 20, paddingBottom: 24 }}
|
|
||||||
>
|
|
||||||
<Button small style={{ backgroundColor: argonTheme.COLORS.INFO }}>
|
|
||||||
CONNECT
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
small
|
|
||||||
style={{ backgroundColor: argonTheme.COLORS.DEFAULT }}
|
|
||||||
>
|
|
||||||
MESSAGE
|
|
||||||
</Button>
|
|
||||||
</Block>
|
|
||||||
|
|
||||||
<Block row space="between">
|
|
||||||
<Block middle>
|
|
||||||
<Text
|
|
||||||
bold
|
|
||||||
size={12}
|
|
||||||
color="#525F7F"
|
|
||||||
style={{ marginBottom: 4 }}
|
|
||||||
>
|
|
||||||
2K
|
|
||||||
</Text>
|
|
||||||
<Text size={12}>Orders</Text>
|
|
||||||
</Block>
|
|
||||||
<Block middle>
|
|
||||||
<Text bold size={12} style={{ marginBottom: 4 }}>
|
|
||||||
10
|
|
||||||
</Text>
|
|
||||||
<Text size={12}>Photos</Text>
|
|
||||||
</Block>
|
|
||||||
<Block middle>
|
|
||||||
<Text bold size={12} style={{ marginBottom: 4 }}>
|
|
||||||
89
|
|
||||||
</Text>
|
|
||||||
<Text size={12}>Comments</Text>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
<Block flex>
|
|
||||||
<Block middle style={styles.nameInfo}>
|
|
||||||
<Text bold size={28} color="#32325D">
|
|
||||||
Jessica Jones, 27
|
|
||||||
</Text>
|
|
||||||
<Text size={16} color="#32325D" style={{ marginTop: 10 }}>
|
|
||||||
San Francisco, USA
|
|
||||||
</Text>
|
|
||||||
</Block>
|
|
||||||
<Block middle style={{ marginTop: 30, marginBottom: 16 }}>
|
|
||||||
<Block style={styles.divider} />
|
|
||||||
</Block>
|
|
||||||
<Block middle>
|
|
||||||
<Text size={16} color="#525F7F" style={{ textAlign: "center" }}>
|
|
||||||
An artist of considerable range, Jessica name taken by
|
|
||||||
Melbourne …
|
|
||||||
</Text>
|
|
||||||
<Button
|
|
||||||
color="transparent"
|
|
||||||
textStyle={{
|
|
||||||
color: "#233DD2",
|
|
||||||
fontWeight: "500",
|
|
||||||
fontSize: 16
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Show more
|
|
||||||
</Button>
|
|
||||||
</Block>
|
|
||||||
<Block
|
|
||||||
row
|
|
||||||
style={{ paddingVertical: 14, alignItems: "baseline" }}
|
|
||||||
>
|
|
||||||
<Text bold size={16} color="#525F7F">
|
|
||||||
Album
|
|
||||||
</Text>
|
|
||||||
</Block>
|
|
||||||
<Block
|
|
||||||
row
|
|
||||||
style={{ paddingBottom: 20, justifyContent: "flex-end" }}
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
small
|
|
||||||
color="transparent"
|
|
||||||
textStyle={{ color: "#5E72E4", fontSize: 12 }}
|
|
||||||
>
|
|
||||||
View all
|
|
||||||
</Button>
|
|
||||||
</Block>
|
|
||||||
<Block style={{ paddingBottom: -HeaderHeight * 2 }}>
|
|
||||||
<Block row space="between" style={{ flexWrap: "wrap" }}>
|
|
||||||
{Images.Viewed.map((img, imgIndex) => (
|
|
||||||
<Image
|
|
||||||
source={{ uri: img }}
|
|
||||||
key={`viewed-${img}`}
|
|
||||||
resizeMode="cover"
|
|
||||||
style={styles.thumb}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</ScrollView>*/}
|
|
||||||
</Block>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
profile: {
|
|
||||||
marginTop: Platform.OS === "android" ? -HeaderHeight : 0,
|
|
||||||
// marginBottom: -HeaderHeight * 2,
|
|
||||||
flex: 1
|
|
||||||
},
|
|
||||||
profileContainer: {
|
|
||||||
width: width,
|
|
||||||
height: height,
|
|
||||||
padding: 0,
|
|
||||||
zIndex: 1
|
|
||||||
},
|
|
||||||
profileBackground: {
|
|
||||||
width: width,
|
|
||||||
height: height / 2
|
|
||||||
},
|
|
||||||
profileCard: {
|
|
||||||
// position: "relative",
|
|
||||||
padding: theme.SIZES.BASE,
|
|
||||||
marginHorizontal: theme.SIZES.BASE,
|
|
||||||
marginTop: 65,
|
|
||||||
borderTopLeftRadius: 6,
|
|
||||||
borderTopRightRadius: 6,
|
|
||||||
backgroundColor: theme.COLORS.WHITE,
|
|
||||||
shadowColor: "black",
|
|
||||||
shadowOffset: { width: 0, height: 0 },
|
|
||||||
shadowRadius: 8,
|
|
||||||
shadowOpacity: 0.2,
|
|
||||||
zIndex: 2
|
|
||||||
},
|
|
||||||
info: {
|
|
||||||
paddingHorizontal: 40
|
|
||||||
},
|
|
||||||
avatarContainer: {
|
|
||||||
position: "relative",
|
|
||||||
marginTop: -80
|
|
||||||
},
|
|
||||||
avatar: {
|
|
||||||
width: 124,
|
|
||||||
height: 124,
|
|
||||||
borderRadius: 62,
|
|
||||||
borderWidth: 0
|
|
||||||
},
|
|
||||||
nameInfo: {
|
|
||||||
marginTop: 35
|
|
||||||
},
|
|
||||||
divider: {
|
|
||||||
width: "90%",
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: "#E9ECEF"
|
|
||||||
},
|
|
||||||
thumb: {
|
|
||||||
borderRadius: 4,
|
|
||||||
marginVertical: 4,
|
|
||||||
alignSelf: "center",
|
|
||||||
width: thumbMeasure,
|
|
||||||
height: thumbMeasure
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
export default Profile;
|
|
|
@ -1,215 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import {
|
|
||||||
StyleSheet,
|
|
||||||
ImageBackground,
|
|
||||||
Dimensions,
|
|
||||||
StatusBar,
|
|
||||||
KeyboardAvoidingView
|
|
||||||
} from "react-native";
|
|
||||||
import { Block, Checkbox, Text, theme } from "galio-framework";
|
|
||||||
|
|
||||||
import { Button, Icon, Input } from "../components";
|
|
||||||
import { Images, argonTheme } from "../constants";
|
|
||||||
|
|
||||||
const { width, height } = Dimensions.get("screen");
|
|
||||||
|
|
||||||
class Register extends React.Component {
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<Block flex middle>
|
|
||||||
<StatusBar hidden />
|
|
||||||
<ImageBackground
|
|
||||||
source={Images.RegisterBackground}
|
|
||||||
style={{ width, height, zIndex: 1 }}
|
|
||||||
>
|
|
||||||
<Block safe flex middle>
|
|
||||||
<Block style={styles.registerContainer}>
|
|
||||||
<Block flex={0.25} middle style={styles.socialConnect}>
|
|
||||||
<Text color="#8898AA" size={12}>
|
|
||||||
Sign up with
|
|
||||||
</Text>
|
|
||||||
<Block row style={{ marginTop: theme.SIZES.BASE }}>
|
|
||||||
<Button style={{ ...styles.socialButtons, marginRight: 30 }}>
|
|
||||||
<Block row>
|
|
||||||
<Icon
|
|
||||||
name="logo-github"
|
|
||||||
family="Ionicon"
|
|
||||||
size={14}
|
|
||||||
color={"black"}
|
|
||||||
style={{ marginTop: 2, marginRight: 5 }}
|
|
||||||
/>
|
|
||||||
<Text style={styles.socialTextButtons}>GITHUB</Text>
|
|
||||||
</Block>
|
|
||||||
</Button>
|
|
||||||
<Button style={styles.socialButtons}>
|
|
||||||
<Block row>
|
|
||||||
<Icon
|
|
||||||
name="logo-google"
|
|
||||||
family="Ionicon"
|
|
||||||
size={14}
|
|
||||||
color={"black"}
|
|
||||||
style={{ marginTop: 2, marginRight: 5 }}
|
|
||||||
/>
|
|
||||||
<Text style={styles.socialTextButtons}>GOOGLE</Text>
|
|
||||||
</Block>
|
|
||||||
</Button>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
<Block flex>
|
|
||||||
<Block flex={0.17} middle>
|
|
||||||
<Text color="#8898AA" size={12}>
|
|
||||||
Or sign up the classic way
|
|
||||||
</Text>
|
|
||||||
</Block>
|
|
||||||
<Block flex center>
|
|
||||||
<KeyboardAvoidingView
|
|
||||||
style={{ flex: 1 }}
|
|
||||||
behavior="padding"
|
|
||||||
enabled
|
|
||||||
>
|
|
||||||
<Block width={width * 0.8} style={{ marginBottom: 15 }}>
|
|
||||||
<Input
|
|
||||||
borderless
|
|
||||||
placeholder="Name"
|
|
||||||
iconContent={
|
|
||||||
<Icon
|
|
||||||
size={16}
|
|
||||||
color={argonTheme.COLORS.ICON}
|
|
||||||
name="hat-3"
|
|
||||||
family="ArgonExtra"
|
|
||||||
style={styles.inputIcons}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Block>
|
|
||||||
<Block width={width * 0.8} style={{ marginBottom: 15 }}>
|
|
||||||
<Input
|
|
||||||
borderless
|
|
||||||
placeholder="Email"
|
|
||||||
iconContent={
|
|
||||||
<Icon
|
|
||||||
size={16}
|
|
||||||
color={argonTheme.COLORS.ICON}
|
|
||||||
name="ic_mail_24px"
|
|
||||||
family="ArgonExtra"
|
|
||||||
style={styles.inputIcons}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Block>
|
|
||||||
<Block width={width * 0.8}>
|
|
||||||
<Input
|
|
||||||
password
|
|
||||||
borderless
|
|
||||||
placeholder="Password"
|
|
||||||
iconContent={
|
|
||||||
<Icon
|
|
||||||
size={16}
|
|
||||||
color={argonTheme.COLORS.ICON}
|
|
||||||
name="padlock-unlocked"
|
|
||||||
family="ArgonExtra"
|
|
||||||
style={styles.inputIcons}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Block row style={styles.passwordCheck}>
|
|
||||||
<Text size={12} color={argonTheme.COLORS.MUTED}>
|
|
||||||
password strength:
|
|
||||||
</Text>
|
|
||||||
<Text bold size={12} color={argonTheme.COLORS.SUCCESS}>
|
|
||||||
{" "}
|
|
||||||
strong
|
|
||||||
</Text>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
<Block row width={width * 0.75}>
|
|
||||||
<Checkbox
|
|
||||||
checkboxStyle={{
|
|
||||||
borderWidth: 3
|
|
||||||
}}
|
|
||||||
color={argonTheme.COLORS.PRIMARY}
|
|
||||||
label="I agree with the"
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
style={{ width: 100 }}
|
|
||||||
color="transparent"
|
|
||||||
textStyle={{
|
|
||||||
color: argonTheme.COLORS.PRIMARY,
|
|
||||||
fontSize: 14
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Privacy Policy
|
|
||||||
</Button>
|
|
||||||
</Block>
|
|
||||||
<Block middle>
|
|
||||||
<Button color="primary" style={styles.createButton}>
|
|
||||||
<Text bold size={14} color={argonTheme.COLORS.WHITE}>
|
|
||||||
CREATE ACCOUNT
|
|
||||||
</Text>
|
|
||||||
</Button>
|
|
||||||
</Block>
|
|
||||||
</KeyboardAvoidingView>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</Block>
|
|
||||||
</ImageBackground>
|
|
||||||
</Block>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
registerContainer: {
|
|
||||||
width: width * 0.9,
|
|
||||||
height: height * 0.875,
|
|
||||||
backgroundColor: "#F4F5F7",
|
|
||||||
borderRadius: 4,
|
|
||||||
shadowColor: argonTheme.COLORS.BLACK,
|
|
||||||
shadowOffset: {
|
|
||||||
width: 0,
|
|
||||||
height: 4
|
|
||||||
},
|
|
||||||
shadowRadius: 8,
|
|
||||||
shadowOpacity: 0.1,
|
|
||||||
elevation: 1,
|
|
||||||
overflow: "hidden"
|
|
||||||
},
|
|
||||||
socialConnect: {
|
|
||||||
backgroundColor: argonTheme.COLORS.WHITE,
|
|
||||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
|
||||||
borderColor: "#8898AA"
|
|
||||||
},
|
|
||||||
socialButtons: {
|
|
||||||
width: 120,
|
|
||||||
height: 40,
|
|
||||||
backgroundColor: "#fff",
|
|
||||||
shadowColor: argonTheme.COLORS.BLACK,
|
|
||||||
shadowOffset: {
|
|
||||||
width: 0,
|
|
||||||
height: 4
|
|
||||||
},
|
|
||||||
shadowRadius: 8,
|
|
||||||
shadowOpacity: 0.1,
|
|
||||||
elevation: 1
|
|
||||||
},
|
|
||||||
socialTextButtons: {
|
|
||||||
color: argonTheme.COLORS.PRIMARY,
|
|
||||||
fontWeight: "800",
|
|
||||||
fontSize: 14
|
|
||||||
},
|
|
||||||
inputIcons: {
|
|
||||||
marginRight: 12
|
|
||||||
},
|
|
||||||
passwordCheck: {
|
|
||||||
paddingLeft: 15,
|
|
||||||
paddingTop: 13,
|
|
||||||
paddingBottom: 30
|
|
||||||
},
|
|
||||||
createButton: {
|
|
||||||
width: width * 0.5,
|
|
||||||
marginTop: 25
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
export default Register;
|
|
|
@ -30,7 +30,13 @@ export class CommonAreasController {
|
||||||
|
|
||||||
@MessagePattern({ cmd: 'removeCommonArea' })
|
@MessagePattern({ cmd: 'removeCommonArea' })
|
||||||
remove(@Payload() id: string) {
|
remove(@Payload() id: string) {
|
||||||
let _id = id['_id'];
|
let _id = id['id'];
|
||||||
return this.commonAreasService.remove(_id);
|
return this.commonAreasService.remove(_id);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@MessagePattern({ cmd: 'findByCommunity' })
|
||||||
|
findByCommunity(@Payload() id: string) {
|
||||||
|
let _community_id = id['community_id'];
|
||||||
|
return this.commonAreasService.findByCommunity(_community_id);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -32,6 +32,13 @@ export class CommonAreasService {
|
||||||
}
|
}
|
||||||
|
|
||||||
async remove(id: string) {
|
async remove(id: string) {
|
||||||
return this.commonAreaModel.findByIdAndRemove({ _id: id }).exec();
|
return this.commonAreaModel.findOneAndUpdate({ _id: id }, {status: '-1'}, {
|
||||||
|
new: true,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
async findByCommunity(community_id: string): Promise<CommonArea[]> {
|
||||||
|
return this.commonAreaModel.find({ community_id: community_id }).exec();
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -19,6 +19,9 @@ export class CommonArea {
|
||||||
@Prop()
|
@Prop()
|
||||||
bookable: number; //saber si es necesario reservarlo o no
|
bookable: number; //saber si es necesario reservarlo o no
|
||||||
|
|
||||||
|
@Prop()
|
||||||
|
status: string;
|
||||||
|
|
||||||
@Prop()
|
@Prop()
|
||||||
community_id: string;
|
community_id: string;
|
||||||
}
|
}
|
||||||
|
|
|
@ -45,4 +45,12 @@ export class CommunitiesController {
|
||||||
let _id = id['_id'];
|
let _id = id['_id'];
|
||||||
return this.communitiesService.remove(_id);
|
return this.communitiesService.remove(_id);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//cambiar de estado
|
||||||
|
@MessagePattern({ cmd: 'changeStatus' })
|
||||||
|
changeStatus(@Payload() body: string) {
|
||||||
|
let pid = body['id'];
|
||||||
|
let pstatus = body['status'];
|
||||||
|
return this.communitiesService.changeStatus(pid,pstatus);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -56,7 +56,15 @@ export class CommunitiesService {
|
||||||
}
|
}
|
||||||
|
|
||||||
async remove(id: string) {
|
async remove(id: string) {
|
||||||
return this.communityModel.findByIdAndRemove({ _id: id }).exec();
|
return this.communityModel.findOneAndUpdate({ _id: id }, {status: '-1'}, {
|
||||||
|
new: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async changeStatus(id: string, status: string) {
|
||||||
|
return this.communityModel.findOneAndUpdate({ _id: id }, {status: status}, {
|
||||||
|
new: true,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async findCommunityAdmin(community: string, user_type: string) {
|
async findCommunityAdmin(community: string, user_type: string) {
|
||||||
|
|
|
@ -33,6 +33,8 @@ export class PostCommentsService {
|
||||||
}
|
}
|
||||||
|
|
||||||
async remove(id: string) {
|
async remove(id: string) {
|
||||||
return this.commentModel.findByIdAndRemove({ _id: id }).exec();
|
return this.commentModel.findOneAndUpdate({ _id: id }, {status: '-1'}, {
|
||||||
|
new: true,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -32,6 +32,8 @@ export class GuestsService {
|
||||||
}
|
}
|
||||||
|
|
||||||
async remove(id: string) {
|
async remove(id: string) {
|
||||||
return this.guestModel.findByIdAndRemove({ _id: id }).exec();
|
return this.guestModel.findOneAndUpdate({ _id: id }, {status: '-1'}, {
|
||||||
|
new: true,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,24 +21,59 @@ export class EmailController {
|
||||||
|
|
||||||
@MessagePattern({ cmd: 'html' })
|
@MessagePattern({ cmd: 'html' })
|
||||||
async postHTMLEmail(@Payload() user: any) {
|
async postHTMLEmail(@Payload() user: any) {
|
||||||
const url = 'http://localhost:3000/';
|
const url = "http://localhost:3000/";
|
||||||
const image = 'images/email.ong';
|
const image = "images/email.png";
|
||||||
var response = await this.mailService.sendMail({
|
var response = await this.mailService.sendMail({
|
||||||
to: user['email'],
|
to: user["email"],
|
||||||
from: 'mbonilla.guti@gmail.com',
|
from: "mbonilla.guti@gmail.com",
|
||||||
subject: 'HTML Dynamic Template',
|
subject: 'HTML Dynamic Template',
|
||||||
template: 'templateEmail',
|
template: 'templateEmail',
|
||||||
context: {
|
context: {
|
||||||
name: user['name'],
|
name: user["name"],
|
||||||
url,
|
url
|
||||||
},
|
},
|
||||||
attachments: [
|
attachments: [
|
||||||
{
|
{
|
||||||
filename: 'email.png',
|
filename: 'email.png',
|
||||||
path: __dirname + '/mails/images/email.png',
|
path: __dirname + '/mails/images/email.png',
|
||||||
cid: 'logo', //my mistake was putting "cid:logo@cid" here!
|
cid: 'logo' //my mistake was putting "cid:logo@cid" here!
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
return response;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@MessagePattern({ cmd: 'emailCreateUserAdminCommunity' })
|
||||||
|
async emailCreateUserAdmin(@Payload() user: any) {
|
||||||
|
const url = "http://localhost:3000/";
|
||||||
|
const image = "images/email.png";
|
||||||
|
const logo = "images/Logo Katoikia.png";
|
||||||
|
var response = await this.mailService.sendMail({
|
||||||
|
to: user["email"],
|
||||||
|
from: "mbonilla.guti@gmail.com",
|
||||||
|
subject: 'Usuario registrado',
|
||||||
|
template: 'emailCreateUserAdminCommunity',
|
||||||
|
context: {
|
||||||
|
name: user["name"],
|
||||||
|
password: user["password"],
|
||||||
|
date_entry: user["date_entry"],
|
||||||
|
email: user["email"],
|
||||||
|
community_name: user['community_name'],
|
||||||
|
url
|
||||||
},
|
},
|
||||||
],
|
attachments: [
|
||||||
|
{
|
||||||
|
filename: 'email.png',
|
||||||
|
path: __dirname + '/mails/images/email.png',
|
||||||
|
cid: 'image_email' //my mistake was putting "cid:logo@cid" here!
|
||||||
|
},
|
||||||
|
{
|
||||||
|
filename: 'Logo_Katoikia.png',
|
||||||
|
path: __dirname + '/mails/images/Logo_Katoikia.png',
|
||||||
|
cid: 'logoKatoikia' //my mistake was putting "cid:logo@cid" here!
|
||||||
|
}
|
||||||
|
]
|
||||||
});
|
});
|
||||||
return response;
|
return response;
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,457 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
|
||||||
|
xmlns:o="urn:schemas-microsoft-com:office:office">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
|
||||||
|
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
|
||||||
|
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
|
||||||
|
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
|
||||||
|
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
|
||||||
|
integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
|
||||||
|
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||||
|
|
||||||
|
|
||||||
|
<!-- CSS Reset : BEGIN -->
|
||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0 auto !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
height: 100% !important;
|
||||||
|
width: 100% !important;
|
||||||
|
background: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* What it does: Stops email clients resizing small text. */
|
||||||
|
* {
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* What it does: Centers email on Android 4.4 */
|
||||||
|
div[style*="margin: 16px 0"] {
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* What it does: Stops Outlook from adding extra spacing to tables. */
|
||||||
|
table,
|
||||||
|
td {
|
||||||
|
mso-table-lspace: 0pt !important;
|
||||||
|
mso-table-rspace: 0pt !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* What it does: Fixes webkit padding issue. */
|
||||||
|
table {
|
||||||
|
border-spacing: 0 !important;
|
||||||
|
border-collapse: collapse !important;
|
||||||
|
table-layout: fixed !important;
|
||||||
|
margin: 0 auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* What it does: Uses a better rendering method when resizing images in IE. */
|
||||||
|
img {
|
||||||
|
-ms-interpolation-mode: bicubic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* What it does: Prevents Windows 10 Mail from underlining links despite inline CSS. Styles for underlined links should be inline. */
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* What it does: A work-around for email clients meddling in triggered links. */
|
||||||
|
*[x-apple-data-detectors],
|
||||||
|
/* iOS */
|
||||||
|
.unstyle-auto-detected-links *,
|
||||||
|
.aBn {
|
||||||
|
border-bottom: 0 !important;
|
||||||
|
cursor: default !important;
|
||||||
|
color: inherit !important;
|
||||||
|
text-decoration: none !important;
|
||||||
|
font-size: inherit !important;
|
||||||
|
font-family: inherit !important;
|
||||||
|
font-weight: inherit !important;
|
||||||
|
line-height: inherit !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* What it does: Prevents Gmail from displaying a download button on large, non-linked images. */
|
||||||
|
.a6S {
|
||||||
|
display: none !important;
|
||||||
|
opacity: 0.01 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* What it does: Prevents Gmail from changing the text color in conversation threads. */
|
||||||
|
.im {
|
||||||
|
color: inherit !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* If the above doesn't work, add a .g-img class to any image in question. */
|
||||||
|
img.g-img+div {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
|
||||||
|
/* Create one of these media queries for each additional viewport size you'd like to fix */
|
||||||
|
|
||||||
|
/* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
|
||||||
|
@media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
|
||||||
|
u~div .email-container {
|
||||||
|
min-width: 320px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhone 6, 6S, 7, 8, and X */
|
||||||
|
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
|
||||||
|
u~div .email-container {
|
||||||
|
min-width: 375px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhone 6+, 7+, and 8+ */
|
||||||
|
@media only screen and (min-device-width: 414px) {
|
||||||
|
u~div .email-container {
|
||||||
|
min-width: 414px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<!-- CSS Reset : END -->
|
||||||
|
|
||||||
|
<!-- Progressive Enhancements : BEGIN -->
|
||||||
|
<style>
|
||||||
|
.primary {
|
||||||
|
background: #D7A86E;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg_white {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg_light {
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg_black {
|
||||||
|
background: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg_dark {
|
||||||
|
background: rgba(0, 0, 0, .8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-section {
|
||||||
|
padding: 2.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*BUTTON*/
|
||||||
|
.btn {
|
||||||
|
padding: 10px 15px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-primary {
|
||||||
|
border-radius: 5px;
|
||||||
|
background: #D7A86E;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-white {
|
||||||
|
border-radius: 5px;
|
||||||
|
background: #ffffff;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-white-outline {
|
||||||
|
border-radius: 5px;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-black-outline {
|
||||||
|
border-radius: 0px;
|
||||||
|
background: transparent;
|
||||||
|
border: 2px solid #000;
|
||||||
|
color: #000;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-family: 'Lato', sans-serif;
|
||||||
|
color: #000000;
|
||||||
|
margin-top: 0;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Lato', sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: rgba(0, 0, 0, 0.808);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #D7A86E;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {}
|
||||||
|
|
||||||
|
/*LOGO*/
|
||||||
|
|
||||||
|
.logo h1 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo h1 a {
|
||||||
|
color: #D7A86E;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-family: 'Lato', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*HERO*/
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .text {
|
||||||
|
color: rgba(0, 0, 0, 0.884);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .text h2 {
|
||||||
|
color: #000;
|
||||||
|
font-size: 40px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .text h3 {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .text h2 span {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #D7A86E;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*HEADING SECTION*/
|
||||||
|
.heading-section {}
|
||||||
|
|
||||||
|
.heading-section h2 {
|
||||||
|
color: #000000;
|
||||||
|
font-size: 28px;
|
||||||
|
margin-top: 0;
|
||||||
|
line-height: 1.4;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-section .subheading {
|
||||||
|
margin-bottom: 20px !important;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 13px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
color: rgba(0, 0, 0, .4);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-section .subheading::after {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: -10px;
|
||||||
|
content: '';
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background: #D7A86E;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-section-white {
|
||||||
|
color: rgba(255, 255, 255, .8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-section-white h2 {
|
||||||
|
line-height: 1;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-section-white h2 {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-section-white .subheading {
|
||||||
|
margin-bottom: 0;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 13px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
color: rgba(255, 255, 255, .4);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
ul.social {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.social li {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*FOOTER*/
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, .05);
|
||||||
|
color: rgba(0, 0, 0, .5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .heading {
|
||||||
|
color: #000;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer ul li {
|
||||||
|
list-style: none;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer ul li a {
|
||||||
|
color: rgba(0, 0, 0, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 500px) {}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #f1f1f1;">
|
||||||
|
<center style="width: 100%; background-color: #f1f1f1;">
|
||||||
|
<div
|
||||||
|
style="display: none; font-size: 1px;max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
|
||||||
|
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
|
||||||
|
</div>
|
||||||
|
<div style="max-width: 600px; margin: 0 auto;" class="email-container">
|
||||||
|
<!-- BEGIN BODY -->
|
||||||
|
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"
|
||||||
|
style="margin: auto;">
|
||||||
|
<tr>
|
||||||
|
<td valign="top" class="bg_white" style="padding: 1em 2.5em 0 2.5em;">
|
||||||
|
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
|
||||||
|
<tr>
|
||||||
|
|
||||||
|
<td class="logo" style="text-align: right;">
|
||||||
|
<img src="cid:logoLatoikia" alt="Logo Katoikia"
|
||||||
|
style="width: 60px; max-width: 60px; height: auto; margin: auto; display: block; float: right;">
|
||||||
|
</td>
|
||||||
|
<td class="logo" style="text-align: left;">
|
||||||
|
<h1><a href="#">Katoikia</a></h1>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
</tr><!-- end tr -->
|
||||||
|
<tr>
|
||||||
|
<td valign="middle" class="hero bg_white" style="padding: 3em 0 2em 0;">
|
||||||
|
<img src="cid:image_email" alt="Logo Katoikia"
|
||||||
|
style="width: 150px; max-width: 300px; height: auto; margin: auto; display: block;">
|
||||||
|
</td>
|
||||||
|
</tr><!-- end tr -->
|
||||||
|
<tr>
|
||||||
|
<td valign="middle" class="hero bg_white" style="padding: 2em 0 4em 0;">
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div class="text" style="padding: 0 2.5em; text-align: center;">
|
||||||
|
<h2> Hola , {{ name }} <i class="fa-regular fa-face-smile-wink"
|
||||||
|
style="color:#D7A86E; font-size: 0.8em; margin-left: 20px;"></i></h2>
|
||||||
|
<h3>Ha sido registrado como un Administrador General del sitio web Katoikia</h3>
|
||||||
|
<h4><i class="fa-solid fa-calendar-day"
|
||||||
|
style="color:#D7A86E; margin-right: 10px;"></i> Fecha de registro
|
||||||
|
{{date_entry}}</h4>
|
||||||
|
</div>
|
||||||
|
<div class="text" style="padding: 0 4em; text-align: left;">
|
||||||
|
<h3>Estas son sus credenciales:</h3>
|
||||||
|
<p><i class="fa-regular fa-envelope" style="color:#D7A86E; margin-right: 10px;"></i> Correo electronico: {{email}}</p>
|
||||||
|
<p><i class="fa-solid fa-key" style="color:#D7A86E; margin-right: 10px;"></i> Password: {{password}}</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="text" style="padding: 0 2.5em; text-align: center;">
|
||||||
|
<h3>Inicie sesión en el sitio web para poder acceder y disfrutar todos sus
|
||||||
|
beneficios</h3>
|
||||||
|
<p><a href="{{ url }}" class="btn btn-primary">Iniciar sesión</a></p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr><!-- end tr -->
|
||||||
|
|
||||||
|
<!-- 1 Column Text + Button : END -->
|
||||||
|
</table>
|
||||||
|
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"
|
||||||
|
style="margin: auto;">
|
||||||
|
<td valign="middle" class="bg_light footer email-section">
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td valign="top" width="33.333%" style="padding-top: 20px">
|
||||||
|
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||||
|
<tr>
|
||||||
|
<td style="text-align: left; padding-right: 10px">
|
||||||
|
<h3 class="heading">Acerca de</h3>
|
||||||
|
<p>Katoikia es su compañero más cercano para poder estar en contacto con sus vecinos y conocer sobre los mejores anuncios sobre su comunidad.</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
<td valign="top" width="33.333%" style="padding-top: 20px">
|
||||||
|
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||||
|
<tr>
|
||||||
|
<td style="text-align: left; padding-left: 5px; padding-right: 5px">
|
||||||
|
<h3 class="heading">Información de contacto</h3>
|
||||||
|
<ul>
|
||||||
|
<li><span href="mailto:katoikiaapp@gmail.com" class="text">katoikiaapp@gmail.com</span></li>
|
||||||
|
</ul>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- end: tr -->
|
||||||
|
<tr>
|
||||||
|
<td class="bg_light" style="text-align: center">
|
||||||
|
<p><a href="http://localhost:3000" style="color: rgba(0, 0, 0, 0.8)">katoikiaapp.org</a></p>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</center>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
|
@ -0,0 +1,464 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
|
||||||
|
xmlns:o="urn:schemas-microsoft-com:office:office">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
|
||||||
|
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
|
||||||
|
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
|
||||||
|
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
|
||||||
|
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
|
||||||
|
integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
|
||||||
|
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||||
|
|
||||||
|
|
||||||
|
<!-- CSS Reset : BEGIN -->
|
||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0 auto !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
height: 100% !important;
|
||||||
|
width: 100% !important;
|
||||||
|
background: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* What it does: Stops email clients resizing small text. */
|
||||||
|
* {
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* What it does: Centers email on Android 4.4 */
|
||||||
|
div[style*="margin: 16px 0"] {
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* What it does: Stops Outlook from adding extra spacing to tables. */
|
||||||
|
table,
|
||||||
|
td {
|
||||||
|
mso-table-lspace: 0pt !important;
|
||||||
|
mso-table-rspace: 0pt !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* What it does: Fixes webkit padding issue. */
|
||||||
|
table {
|
||||||
|
border-spacing: 0 !important;
|
||||||
|
border-collapse: collapse !important;
|
||||||
|
table-layout: fixed !important;
|
||||||
|
margin: 0 auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* What it does: Uses a better rendering method when resizing images in IE. */
|
||||||
|
img {
|
||||||
|
-ms-interpolation-mode: bicubic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* What it does: Prevents Windows 10 Mail from underlining links despite inline CSS. Styles for underlined links should be inline. */
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* What it does: A work-around for email clients meddling in triggered links. */
|
||||||
|
*[x-apple-data-detectors],
|
||||||
|
/* iOS */
|
||||||
|
.unstyle-auto-detected-links *,
|
||||||
|
.aBn {
|
||||||
|
border-bottom: 0 !important;
|
||||||
|
cursor: default !important;
|
||||||
|
color: inherit !important;
|
||||||
|
text-decoration: none !important;
|
||||||
|
font-size: inherit !important;
|
||||||
|
font-family: inherit !important;
|
||||||
|
font-weight: inherit !important;
|
||||||
|
line-height: inherit !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* What it does: Prevents Gmail from displaying a download button on large, non-linked images. */
|
||||||
|
.a6S {
|
||||||
|
display: none !important;
|
||||||
|
opacity: 0.01 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* What it does: Prevents Gmail from changing the text color in conversation threads. */
|
||||||
|
.im {
|
||||||
|
color: inherit !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* If the above doesn't work, add a .g-img class to any image in question. */
|
||||||
|
img.g-img+div {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
|
||||||
|
/* Create one of these media queries for each additional viewport size you'd like to fix */
|
||||||
|
|
||||||
|
/* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
|
||||||
|
@media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
|
||||||
|
u~div .email-container {
|
||||||
|
min-width: 320px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhone 6, 6S, 7, 8, and X */
|
||||||
|
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
|
||||||
|
u~div .email-container {
|
||||||
|
min-width: 375px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhone 6+, 7+, and 8+ */
|
||||||
|
@media only screen and (min-device-width: 414px) {
|
||||||
|
u~div .email-container {
|
||||||
|
min-width: 414px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<!-- CSS Reset : END -->
|
||||||
|
|
||||||
|
<!-- Progressive Enhancements : BEGIN -->
|
||||||
|
<style>
|
||||||
|
.primary {
|
||||||
|
background: #D7A86E;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg_white {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg_light {
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg_black {
|
||||||
|
background: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg_dark {
|
||||||
|
background: rgba(0, 0, 0, .8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-section {
|
||||||
|
padding: 2.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*BUTTON*/
|
||||||
|
.btn {
|
||||||
|
padding: 10px 15px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-primary {
|
||||||
|
border-radius: 5px;
|
||||||
|
background: #D7A86E;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-white {
|
||||||
|
border-radius: 5px;
|
||||||
|
background: #ffffff;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-white-outline {
|
||||||
|
border-radius: 5px;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-black-outline {
|
||||||
|
border-radius: 0px;
|
||||||
|
background: transparent;
|
||||||
|
border: 2px solid #000;
|
||||||
|
color: #000;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-family: 'Lato', sans-serif;
|
||||||
|
color: #000000;
|
||||||
|
margin-top: 0;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Lato', sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: rgba(0, 0, 0, 0.808);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #D7A86E;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {}
|
||||||
|
|
||||||
|
/*LOGO*/
|
||||||
|
|
||||||
|
.logo h1 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo h1 a {
|
||||||
|
color: #D7A86E;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-family: 'Lato', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*HERO*/
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .text {
|
||||||
|
color: rgba(0, 0, 0, 0.884);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .text h2 {
|
||||||
|
color: #000;
|
||||||
|
font-size: 40px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .text h3 {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .text h2 span {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #D7A86E;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*HEADING SECTION*/
|
||||||
|
.heading-section {}
|
||||||
|
|
||||||
|
.heading-section h2 {
|
||||||
|
color: #000000;
|
||||||
|
font-size: 28px;
|
||||||
|
margin-top: 0;
|
||||||
|
line-height: 1.4;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-section .subheading {
|
||||||
|
margin-bottom: 20px !important;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 13px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
color: rgba(0, 0, 0, .4);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-section .subheading::after {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: -10px;
|
||||||
|
content: '';
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background: #D7A86E;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-section-white {
|
||||||
|
color: rgba(255, 255, 255, .8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-section-white h2 {
|
||||||
|
line-height: 1;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-section-white h2 {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-section-white .subheading {
|
||||||
|
margin-bottom: 0;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 13px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
color: rgba(255, 255, 255, .4);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
ul.social {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.social li {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*FOOTER*/
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, .05);
|
||||||
|
color: rgba(0, 0, 0, .5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .heading {
|
||||||
|
color: #000;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer ul li {
|
||||||
|
list-style: none;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer ul li a {
|
||||||
|
color: rgba(0, 0, 0, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 500px) {}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #f1f1f1;">
|
||||||
|
<center style="width: 100%; background-color: #f1f1f1;">
|
||||||
|
<div
|
||||||
|
style="display: none; font-size: 1px;max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
|
||||||
|
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
|
||||||
|
</div>
|
||||||
|
<div style="max-width: 600px; margin: 0 auto;" class="email-container">
|
||||||
|
<!-- BEGIN BODY -->
|
||||||
|
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"
|
||||||
|
style="margin: auto;">
|
||||||
|
<tr>
|
||||||
|
<td valign="top" class="bg_white" style="padding: 1em 2.5em 0 2.5em;">
|
||||||
|
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
|
||||||
|
<tr>
|
||||||
|
|
||||||
|
<td class="logo" style="text-align: right;">
|
||||||
|
<img src="cid:logoKatoikia" alt="Logo Katoikia"
|
||||||
|
style="width: 60px; max-width: 60px; height: auto; margin: auto; display: block; float: right;">
|
||||||
|
</td>
|
||||||
|
<td class="logo" style="text-align: left;">
|
||||||
|
<h1><a href="#">Katoikia</a></h1>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
</tr><!-- end tr -->
|
||||||
|
<tr>
|
||||||
|
<td valign="middle" class="hero bg_white" style="padding: 3em 0 2em 0;">
|
||||||
|
<img src="cid:image_email" alt="Logo Katoikia"
|
||||||
|
style="width: 150px; max-width: 300px; height: auto; margin: auto; display: block;">
|
||||||
|
</td>
|
||||||
|
</tr><!-- end tr -->
|
||||||
|
<tr>
|
||||||
|
<td valign="middle" class="hero bg_white" style="padding: 2em 0 4em 0;">
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div class="text" style="padding: 0 2.5em; text-align: center;">
|
||||||
|
<h2> Hola , {{ name }} <i class="fa-regular fa-face-smile-wink"
|
||||||
|
style="color:#D7A86E; font-size: 0.8em; margin-left: 20px;"></i></h2>
|
||||||
|
<h3>Ha sido registrado como un Administrador de la Comunidad `{{community_name}}`
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<h4><i class="fa-solid fa-calendar-day"
|
||||||
|
style="color:#D7A86E; margin-right: 10px;"></i> Fecha de registro
|
||||||
|
{{date_entry}}</h4>
|
||||||
|
</div>
|
||||||
|
<div class="text" style="padding: 0 4em; text-align: left;">
|
||||||
|
<h3>Estas son sus credenciales:</h3>
|
||||||
|
<p><i class="fa fa-regular fa-envelope"
|
||||||
|
style="color:#D7A86E; margin-right: 10px;"></i> Correo electronico:
|
||||||
|
{{email}}</p>
|
||||||
|
<p><i class="fa-solid fa-key" style="color:#D7A86E; margin-right: 10px;"></i>
|
||||||
|
Password: {{password}}</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="text" style="padding: 0 2.5em; text-align: center;">
|
||||||
|
<h3>Inicie sesión en el sitio web para poder acceder y disfrutar todos sus
|
||||||
|
beneficios</h3>
|
||||||
|
<p><a href="{{ url }}" class="btn btn-primary">Iniciar sesión</a></p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr><!-- end tr -->
|
||||||
|
|
||||||
|
<!-- 1 Column Text + Button : END -->
|
||||||
|
</table>
|
||||||
|
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"
|
||||||
|
style="margin: auto;">
|
||||||
|
<td valign="middle" class="bg_light footer email-section">
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td valign="top" width="33.333%" style="padding-top: 20px">
|
||||||
|
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||||
|
<tr>
|
||||||
|
<td style="text-align: left; padding-right: 10px">
|
||||||
|
<h3 class="heading">Acerca de</h3>
|
||||||
|
<p>Katoikia es su compañero más cercano para poder estar en contacto con sus
|
||||||
|
vecinos y conocer sobre los mejores anuncios sobre su comunidad.</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
<td valign="top" width="33.333%" style="padding-top: 20px">
|
||||||
|
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||||
|
<tr>
|
||||||
|
<td style="text-align: left; padding-left: 5px; padding-right: 5px">
|
||||||
|
<h3 class="heading">Información de contacto</h3>
|
||||||
|
<ul>
|
||||||
|
<li><span href="mailto:katoikiaapp@gmail.com"
|
||||||
|
class="text">katoikiaapp@gmail.com</span></li>
|
||||||
|
</ul>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- end: tr -->
|
||||||
|
<tr>
|
||||||
|
<td class="bg_light" style="text-align: center">
|
||||||
|
<p><a href="http://localhost:3000" style="color: rgba(0, 0, 0, 0.8)">katoikiaapp.org</a></p>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</center>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
After Width: | Height: | Size: 66 KiB |
After Width: | Height: | Size: 37 KiB |
|
@ -9,9 +9,8 @@ import { map } from 'rxjs/operators';
|
||||||
export class ReportsService {
|
export class ReportsService {
|
||||||
constructor(
|
constructor(
|
||||||
@InjectModel(Report.name)
|
@InjectModel(Report.name)
|
||||||
private readonly reportModel: Model<ReportDocument>,
|
private readonly reportModel: Model<ReportDocument>, //
|
||||||
) //
|
) {}
|
||||||
{}
|
|
||||||
|
|
||||||
async create(report: ReportDocument): Promise<Report> {
|
async create(report: ReportDocument): Promise<Report> {
|
||||||
return this.reportModel.create(report);
|
return this.reportModel.create(report);
|
||||||
|
@ -32,6 +31,9 @@ export class ReportsService {
|
||||||
}
|
}
|
||||||
|
|
||||||
async remove(id: string) {
|
async remove(id: string) {
|
||||||
return this.reportModel.findByIdAndRemove({ _id: id }).exec();
|
return this.reportModel.findOneAndUpdate({ _id: id }, {status: '-1'}, {
|
||||||
|
new: true,
|
||||||
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -41,6 +41,8 @@ export class ReservationsService {
|
||||||
}
|
}
|
||||||
|
|
||||||
async remove(id: string) {
|
async remove(id: string) {
|
||||||
return this.reservationModel.findByIdAndRemove({ _id: id }).exec();
|
return this.reservationModel.findOneAndUpdate({ _id: id }, {status: '-1'}, {
|
||||||
|
new: true,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -29,10 +29,12 @@
|
||||||
"@nestjs/platform-express": "^8.0.0",
|
"@nestjs/platform-express": "^8.0.0",
|
||||||
"@nestjs/swagger": "^5.2.1",
|
"@nestjs/swagger": "^5.2.1",
|
||||||
"buffer": "^5.7.1",
|
"buffer": "^5.7.1",
|
||||||
|
"class-validator": "^0.13.2",
|
||||||
"cors": "^2.8.5",
|
"cors": "^2.8.5",
|
||||||
"crypto-browserify": "^3.12.0",
|
"crypto-browserify": "^3.12.0",
|
||||||
"md5-typescript": "^1.0.5",
|
"md5-typescript": "^1.0.5",
|
||||||
"mongoose": "^6.4.1",
|
"mongoose": "^6.4.1",
|
||||||
|
"mongoose-unique-validator": "^3.1.0",
|
||||||
"reflect-metadata": "^0.1.13",
|
"reflect-metadata": "^0.1.13",
|
||||||
"rimraf": "^3.0.2",
|
"rimraf": "^3.0.2",
|
||||||
"rxjs": "^7.2.0",
|
"rxjs": "^7.2.0",
|
||||||
|
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { ArgumentsHost, Catch, ConflictException, ExceptionFilter } from '@nestjs/common';
|
||||||
|
import { MongoError } from 'mongodb';
|
||||||
|
|
||||||
|
@Catch(MongoError)
|
||||||
|
export class MongoExceptionFilter implements ExceptionFilter {
|
||||||
|
catch(exception: MongoError, host: ArgumentsHost) {
|
||||||
|
switch (exception.code) {
|
||||||
|
case 11000:
|
||||||
|
console.log('llave duplicada')
|
||||||
|
// duplicate exception
|
||||||
|
// do whatever you want here, for instance send error to client
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -16,7 +16,8 @@ import { UsersModule } from './users/users.module';
|
||||||
},
|
},
|
||||||
]),
|
]),
|
||||||
MongooseModule.forRoot(
|
MongooseModule.forRoot(
|
||||||
`mongodb+srv://proyecto_4:proyecto_4@proyecto4.yv4fb.mongodb.net/servicio_usuarios?retryWrites=true&w=majority`,
|
`mongodb+srv://proyecto_4:proyecto_4@proyecto4.yv4fb.mongodb.net/servicio_usuarios?retryWrites=true&w=majority`
|
||||||
|
|
||||||
),
|
),
|
||||||
UsersModule,
|
UsersModule,
|
||||||
],
|
],
|
||||||
|
|
|
@ -0,0 +1,30 @@
|
||||||
|
import { Injectable } from "@nestjs/common";
|
||||||
|
import { Model } from 'mongoose';
|
||||||
|
import { User, UserDocument } from '../schemas/user.schema';
|
||||||
|
import { InjectModel } from '@nestjs/mongoose';
|
||||||
|
import { ValidationArguments, ValidatorConstraint, ValidatorConstraintInterface } from "class-validator";
|
||||||
|
|
||||||
|
|
||||||
|
@ValidatorConstraint({ name: 'UserExists', async: true })
|
||||||
|
@Injectable()
|
||||||
|
export class UserExistsRule implements ValidatorConstraintInterface {
|
||||||
|
constructor(
|
||||||
|
@InjectModel(User.name) private readonly userModel: Model<UserDocument>,
|
||||||
|
) {}
|
||||||
|
|
||||||
|
async validate(value: string) {
|
||||||
|
try {
|
||||||
|
await this.userModel.find({email: value});
|
||||||
|
} catch (e) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
defaultMessage(args: ValidationArguments) {
|
||||||
|
return `User doesn't exist`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,23 +1,25 @@
|
||||||
import { Schema, Prop, SchemaFactory } from '@nestjs/mongoose';
|
import { Schema, Prop, SchemaFactory } from '@nestjs/mongoose';
|
||||||
import { Document } from 'mongoose';
|
import { Document } from 'mongoose';
|
||||||
|
var uniqueValidator = require('mongoose-unique-validator');
|
||||||
|
import { IsEmail, IsNotEmpty, IsString, Validate } from 'class-validator';
|
||||||
|
|
||||||
export type UserDocument = User & Document;
|
export type UserDocument = User & Document;
|
||||||
|
|
||||||
@Schema({ collection: 'users'})
|
@Schema({ collection: 'users'})
|
||||||
export class User {
|
export class User {
|
||||||
@Prop()
|
@Prop({index: true})
|
||||||
dni: string;
|
dni!: string;
|
||||||
|
|
||||||
@Prop()
|
@Prop({required: true})
|
||||||
name: string;
|
name: string;
|
||||||
|
|
||||||
@Prop()
|
@Prop({required: true})
|
||||||
last_name: string;
|
last_name: string;
|
||||||
|
|
||||||
@Prop()
|
@Prop({required: true, unique: true})
|
||||||
email: string;
|
email: string;
|
||||||
|
|
||||||
@Prop()
|
@Prop({required: true, unique: true})
|
||||||
phone: number;
|
phone: number;
|
||||||
|
|
||||||
@Prop()
|
@Prop()
|
||||||
|
@ -34,6 +36,10 @@ export class User {
|
||||||
|
|
||||||
@Prop()
|
@Prop()
|
||||||
community_id?: string;
|
community_id?: string;
|
||||||
|
|
||||||
|
@Prop()
|
||||||
|
number_house?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const UserSchema = SchemaFactory.createForClass(User);
|
export const UserSchema = SchemaFactory.createForClass(User);
|
||||||
|
UserSchema.plugin(uniqueValidator);
|
|
@ -1,7 +1,8 @@
|
||||||
import { Controller } from '@nestjs/common';
|
import { Controller, UseFilters } from '@nestjs/common';
|
||||||
import { MessagePattern, Payload } from '@nestjs/microservices';
|
import { MessagePattern, Payload } from '@nestjs/microservices';
|
||||||
import { User, UserDocument } from '../schemas/user.schema';
|
import { User, UserDocument } from '../schemas/user.schema';
|
||||||
import { UsersService } from './users.service';
|
import { UsersService } from './users.service';
|
||||||
|
import { MongoExceptionFilter } from 'src/MongoExceptionFilter';
|
||||||
|
|
||||||
@Controller()
|
@Controller()
|
||||||
export class UsersController {
|
export class UsersController {
|
||||||
|
@ -13,6 +14,7 @@ export class UsersController {
|
||||||
}
|
}
|
||||||
|
|
||||||
@MessagePattern({ cmd: 'createAdminSystem' })
|
@MessagePattern({ cmd: 'createAdminSystem' })
|
||||||
|
@UseFilters(MongoExceptionFilter)
|
||||||
createUserAdmin(@Payload() user: UserDocument) {
|
createUserAdmin(@Payload() user: UserDocument) {
|
||||||
return this.userService.create(user);
|
return this.userService.create(user);
|
||||||
}
|
}
|
||||||
|
@ -22,6 +24,11 @@ export class UsersController {
|
||||||
return this.userService.create(user);
|
return this.userService.create(user);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@MessagePattern({ cmd: 'createAdminCommunity' })
|
||||||
|
createAdminCommunity(@Payload() user: UserDocument) {
|
||||||
|
return this.userService.createAdminCommunity(user);
|
||||||
|
}
|
||||||
|
|
||||||
@MessagePattern({ cmd: 'findAllUsers' })
|
@MessagePattern({ cmd: 'findAllUsers' })
|
||||||
findAll() {
|
findAll() {
|
||||||
return this.userService.findAll();
|
return this.userService.findAll();
|
||||||
|
@ -33,12 +40,30 @@ export class UsersController {
|
||||||
return this.userService.findOneByDNI(dni);
|
return this.userService.findOneByDNI(dni);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@MessagePattern({ cmd: 'findById' })
|
||||||
|
findById(@Payload() id: string) {
|
||||||
|
let _id = id['id'];
|
||||||
|
return this.userService.findOne(_id);
|
||||||
|
}
|
||||||
|
|
||||||
@MessagePattern({ cmd: 'findGuardsCommunity' })
|
@MessagePattern({ cmd: 'findGuardsCommunity' })
|
||||||
findGuardsCommunity(@Payload() community_id: string) {
|
findGuardsCommunity(@Payload() community_id: string) {
|
||||||
let pcommunity_id = community_id['community_id'];
|
let pcommunity_id = community_id['community_id'];
|
||||||
return this.userService.findGuardsCommunity(pcommunity_id);
|
return this.userService.findGuardsCommunity(pcommunity_id);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@MessagePattern({ cmd: 'findTenantsCommunity' })
|
||||||
|
findTenantsCommunity(@Payload() community_id: string) {
|
||||||
|
let pcommunity_id = community_id['community_id'];
|
||||||
|
return this.userService.findTenantsCommunity(pcommunity_id);
|
||||||
|
}
|
||||||
|
|
||||||
|
@MessagePattern({ cmd: 'findTenants' })
|
||||||
|
findTenants() {
|
||||||
|
return this.userService.findTenants();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@MessagePattern({ cmd: 'updateUser' })
|
@MessagePattern({ cmd: 'updateUser' })
|
||||||
update(@Payload() user: UserDocument) {
|
update(@Payload() user: UserDocument) {
|
||||||
return this.userService.update(user.id, user);
|
return this.userService.update(user.id, user);
|
||||||
|
@ -91,4 +116,12 @@ export class UsersController {
|
||||||
|
|
||||||
return this.userService.deleteAdminSystem(user['id']);
|
return this.userService.deleteAdminSystem(user['id']);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@MessagePattern({ cmd: 'changeStatus' })
|
||||||
|
changeStatus(@Payload() body: string) {
|
||||||
|
let pid = body['id'];
|
||||||
|
let pstatus = body['status'];
|
||||||
|
return this.userService.changeStatus(pid, pstatus);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,6 +18,16 @@ import { ClientsModule, Transport } from '@nestjs/microservices';
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
]),
|
]),
|
||||||
|
ClientsModule.register([
|
||||||
|
{
|
||||||
|
name: "SERVICIO_COMUNIDADES",
|
||||||
|
transport: Transport.TCP,
|
||||||
|
options: {
|
||||||
|
host: "127.0.0.1",
|
||||||
|
port: 3002
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]),
|
||||||
MongooseModule.forFeature([{ name: User.name, schema: UserSchema }]),
|
MongooseModule.forFeature([{ name: User.name, schema: UserSchema }]),
|
||||||
],
|
],
|
||||||
controllers: [UsersController],
|
controllers: [UsersController],
|
||||||
|
|
|
@ -4,6 +4,7 @@ import { User, UserDocument } from '../schemas/user.schema';
|
||||||
import { InjectModel } from '@nestjs/mongoose';
|
import { InjectModel } from '@nestjs/mongoose';
|
||||||
import { Md5 } from 'md5-typescript';
|
import { Md5 } from 'md5-typescript';
|
||||||
import { map } from 'rxjs/operators';
|
import { map } from 'rxjs/operators';
|
||||||
|
import { lastValueFrom } from 'rxjs';
|
||||||
|
|
||||||
import { RpcException, ClientProxy } from '@nestjs/microservices';
|
import { RpcException, ClientProxy } from '@nestjs/microservices';
|
||||||
|
|
||||||
|
@ -11,8 +12,9 @@ import { RpcException, ClientProxy } from '@nestjs/microservices';
|
||||||
export class UsersService {
|
export class UsersService {
|
||||||
constructor(
|
constructor(
|
||||||
@InjectModel(User.name) private readonly userModel: Model<UserDocument>,
|
@InjectModel(User.name) private readonly userModel: Model<UserDocument>,
|
||||||
@Inject('SERVICIO_NOTIFICACIONES')
|
@Inject('SERVICIO_NOTIFICACIONES') private readonly clientNotificationtApp: ClientProxy,
|
||||||
private readonly clientNotificationtApp: ClientProxy,
|
@Inject('SERVICIO_COMUNIDADES') private readonly clientCommunityApp: ClientProxy,
|
||||||
|
|
||||||
) { }
|
) { }
|
||||||
private publicKey: string;
|
private publicKey: string;
|
||||||
async create(user: UserDocument): Promise<User> {
|
async create(user: UserDocument): Promise<User> {
|
||||||
|
@ -21,6 +23,44 @@ export class UsersService {
|
||||||
return this.userModel.create(user);
|
return this.userModel.create(user);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async createAdminCommunity(user: UserDocument) {
|
||||||
|
let password = user.password;
|
||||||
|
let passwordEncriptada = Md5.init(user.password);
|
||||||
|
user.password = passwordEncriptada;
|
||||||
|
|
||||||
|
this.userModel.create(user)
|
||||||
|
|
||||||
|
|
||||||
|
let community = await this.findCommunity(user.community_id);
|
||||||
|
user.community_id = community['name'];
|
||||||
|
|
||||||
|
const pattern = { cmd: 'emailCreateUserAdminCommunity' };
|
||||||
|
const payload = {
|
||||||
|
email: user['email'], password: password, name: user['name'],
|
||||||
|
date_entry: user['date_entry'], community_name: community['name']
|
||||||
|
};
|
||||||
|
return this.clientNotificationtApp
|
||||||
|
.send<string>(pattern, payload)
|
||||||
|
.pipe(
|
||||||
|
map((message: string) => ({ message })),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async findCommunity(community_id: string) {
|
||||||
|
const pattern = { cmd: 'findOneCommunity' }
|
||||||
|
const payload = { _id: community_id }
|
||||||
|
|
||||||
|
let callback = await this.clientCommunityApp
|
||||||
|
.send<string>(pattern, payload)
|
||||||
|
.pipe(
|
||||||
|
map((response: string) => ({ response }))
|
||||||
|
)
|
||||||
|
const finalValue = await lastValueFrom(callback);
|
||||||
|
return finalValue['response'];
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
async findAll(): Promise<User[]> {
|
async findAll(): Promise<User[]> {
|
||||||
return this.userModel.find().setOptions({ sanitizeFilter: true }).exec();
|
return this.userModel.find().setOptions({ sanitizeFilter: true }).exec();
|
||||||
}
|
}
|
||||||
|
@ -38,8 +78,14 @@ export class UsersService {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async remove(id: string) {
|
/* async remove(id: string) {
|
||||||
return this.userModel.findByIdAndRemove({ _id: id }).exec();
|
return this.userModel.findByIdAndRemove({ _id: id }).exec();
|
||||||
|
}*/
|
||||||
|
|
||||||
|
async remove(id: string) {
|
||||||
|
return this.userModel.findOneAndUpdate({ _id: id }, {status: '-1'}, {
|
||||||
|
new: true,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
//inicio de sesion
|
//inicio de sesion
|
||||||
|
@ -79,6 +125,36 @@ export class UsersService {
|
||||||
return this.userModel.find({ user_type: 2 }).exec();
|
return this.userModel.find({ user_type: 2 }).exec();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//find inquilinos
|
||||||
|
async findTenants(): Promise<User[]> {
|
||||||
|
return this.userModel.find({ user_type: 3 }).exec();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//find inquilinos
|
||||||
|
async findTenantsCommunity(pcommunity_id: string) {
|
||||||
|
//let tenants = await this.findCommunityTenants(pcommunity_id);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return await this.userModel.find({ community_id: pcommunity_id, user_type: 4 })
|
||||||
|
.then(async (users) => {
|
||||||
|
if (users) {
|
||||||
|
await Promise.all(
|
||||||
|
users.map(async (u) => {
|
||||||
|
//buscar al usuario con el id de la comunidad anexado
|
||||||
|
let number_house = await this.findNumHouseTenant(pcommunity_id, u['_id']);
|
||||||
|
u['number_house'] = number_house;
|
||||||
|
return u;
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return users;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
async testSendMail(user: UserDocument) {
|
async testSendMail(user: UserDocument) {
|
||||||
let passwordEncriptada = Md5.init(user.password);
|
let passwordEncriptada = Md5.init(user.password);
|
||||||
user.password = passwordEncriptada;
|
user.password = passwordEncriptada;
|
||||||
|
@ -104,6 +180,53 @@ export class UsersService {
|
||||||
}
|
}
|
||||||
|
|
||||||
async deleteAdminSystem(id: string) {
|
async deleteAdminSystem(id: string) {
|
||||||
return this.userModel.deleteOne({ _id: id }).exec();
|
return this.userModel.findOneAndUpdate({ _id: id }, {status: '-1'}, {
|
||||||
|
new: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async validateEmail(email: string) {
|
||||||
|
let repo1 = this.userModel;
|
||||||
|
return new Promise<User>((resolve, reject) => {
|
||||||
|
let repo = repo1;
|
||||||
|
|
||||||
|
repo.find({ email: email }).exec((err, res) => {
|
||||||
|
if (err) {
|
||||||
|
reject(err);
|
||||||
|
} else {
|
||||||
|
if (res.length > 0) {
|
||||||
|
return res;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async findNumHouseTenant(community_id: string, tenant_id: string) {
|
||||||
|
const pattern = { cmd: 'findOneCommunity' }
|
||||||
|
const payload = { _id: community_id }
|
||||||
|
|
||||||
|
let callback = await this.clientCommunityApp
|
||||||
|
.send<string>(pattern, payload)
|
||||||
|
.pipe(
|
||||||
|
map((response: string) => ({ response }))
|
||||||
|
)
|
||||||
|
const finalValue = await lastValueFrom(callback);
|
||||||
|
const response = finalValue['response'];
|
||||||
|
const houses = response['houses'];
|
||||||
|
let num_house = "";
|
||||||
|
await houses.forEach(async house => {
|
||||||
|
if (tenant_id == house.tenants.tenant_id) {
|
||||||
|
num_house = house.number_house;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return num_house;
|
||||||
|
}
|
||||||
|
|
||||||
|
async changeStatus(id: string, status: string) {
|
||||||
|
return this.userModel.findOneAndUpdate({ _id: id }, {status: status}, {
|
||||||
|
new: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|