Skip to content
Projects
Groups
Snippets
Help
Loading...
Sign in / Register
Toggle navigation
T
topic1-63
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Packages
Packages
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Natthaphong Malaphan
topic1-63
Commits
afd6ce4e
Commit
afd6ce4e
authored
Jul 26, 2020
by
Natthaphong Malaphan
😊
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
again
parent
b3f6bf9f
Hide whitespace changes
Inline
Side-by-side
Showing
19 changed files
with
429 additions
and
17 deletions
+429
-17
app-routing.module.ts
22-july/topic1/src/app/app-routing.module.ts
+8
-1
app.component.html
22-july/topic1/src/app/app.component.html
+9
-11
app.component.scss
22-july/topic1/src/app/app.component.scss
+35
-0
app.component.ts
22-july/topic1/src/app/app.component.ts
+3
-3
app.module.ts
22-july/topic1/src/app/app.module.ts
+7
-1
lecturer.component.html
22-july/topic1/src/app/lecturer/lecturer.component.html
+7
-0
lecturer.component.scss
22-july/topic1/src/app/lecturer/lecturer.component.scss
+212
-0
lecturer.component.spec.ts
22-july/topic1/src/app/lecturer/lecturer.component.spec.ts
+25
-0
lecturer.component.ts
22-july/topic1/src/app/lecturer/lecturer.component.ts
+18
-0
mock-data.ts
22-july/topic1/src/app/mock/mock-data.ts
+8
-1
model.ts
22-july/topic1/src/app/models/model.ts
+6
-0
score.component.html
22-july/topic1/src/app/score/score.component.html
+1
-0
score.component.scss
22-july/topic1/src/app/score/score.component.scss
+0
-0
score.component.spec.ts
22-july/topic1/src/app/score/score.component.spec.ts
+25
-0
score.component.ts
22-july/topic1/src/app/score/score.component.ts
+15
-0
student.component.html
22-july/topic1/src/app/student/student.component.html
+7
-0
student.component.scss
22-july/topic1/src/app/student/student.component.scss
+0
-0
student.component.spec.ts
22-july/topic1/src/app/student/student.component.spec.ts
+25
-0
student.component.ts
22-july/topic1/src/app/student/student.component.ts
+18
-0
No files found.
22-july/topic1/src/app/app-routing.module.ts
View file @
afd6ce4e
import
{
NgModule
}
from
'@angular/core'
;
import
{
Routes
,
RouterModule
}
from
'@angular/router'
;
import
{
StudentComponent
}
from
'./student/student.component'
;
import
{
LecturerComponent
}
from
'./lecturer/lecturer.component'
;
import
{
ScoreComponent
}
from
'./score/score.component'
;
const
routes
:
Routes
=
[];
const
routes
:
Routes
=
[
{
path
:
'student'
,
component
:
StudentComponent
},
{
path
:
'lecturer'
,
component
:
LecturerComponent
},
{
path
:
'score'
,
component
:
ScoreComponent
},
];
@
NgModule
({
imports
:
[
RouterModule
.
forRoot
(
routes
)],
...
...
22-july/topic1/src/app/app.component.html
View file @
afd6ce4e
<div
class=
"toolbar"
role=
"banner"
>
<span>
HOME
</span>
<a
href=
""
>
STUDENT
</a>
<a
href=
""
>
POINT
</a>
<div
class=
"topnav"
role=
"banner"
>
<span>
{{ title }}
</span>
<div
*
ngFor=
"let s of page"
>
<a
routerLink=
"/{{s}}"
routerLinkActive=
"active"
>
{{s}}
</a>
</div>
<div
class=
"spacer"
></div>
<a
href=
"#"
>
LOGIN
</a>
...
...
@@ -9,16 +12,11 @@
<div
class=
"content"
role=
"main"
>
<div
class=
"card highlight-card"
>
<h1>
Welcome to " {{ title }} "
</h1>
</div>
<div
*
ngFor=
"let s of students"
class=
"card"
>
{{s.id}} {{s.name}}
<hr
style=
"height:2px;border-width:0;color:gray;background-color:gray"
>
{{s.email}}
</div>
</div>
<router-outlet></router-outlet>
22-july/topic1/src/app/app.component.scss
View file @
afd6ce4e
...
...
@@ -23,6 +23,41 @@
.spacer
{
flex
:
1
;
}
/* Add a black background color to the top navigation */
/* Add a black background color to the top navigation */
.topnav
{
background-color
:
#333
;
overflow
:
hidden
;
}
/* Style the links inside the navigation bar */
.topnav
a
{
float
:
left
;
display
:
block
;
color
:
#f2f2f2
;
text-align
:
center
;
padding
:
14px
16px
;
text-decoration
:
none
;
font-size
:
17px
;
}
/* Change the color of links on hover */
.topnav
a
:hover
{
background-color
:
#ddd
;
color
:
black
;
}
/* Add an active class to highlight the current page */
.topnav
a
.active
{
background-color
:
#4CAF50
;
color
:
white
;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav
.icon
{
display
:
none
;
}
.toolbar
{
position
:
absolute
;
...
...
22-july/topic1/src/app/app.component.ts
View file @
afd6ce4e
import
{
Component
}
from
'@angular/core'
;
import
{
Student
}
from
'./models/
student
'
;
import
{
Student
}
from
'./models/
model
'
;
import
{
STUDENTS
}
from
'./mock/mock-
student
'
;
import
{
STUDENTS
}
from
'./mock/mock-
data
'
;
@
Component
({
selector
:
'app-root'
,
...
...
@@ -11,6 +11,6 @@ import { STUDENTS } from './mock/mock-student';
export
class
AppComponent
{
title
=
'Course Web Application'
;
description
=
'details'
;
students
:
Student
[]
=
STUDENTS
;
demo
=
{
id
:
60111111
,
name
:
'name'
,
email
:
'name@gmail.com'
};
page
=
[
'student'
,
'lecturer'
,
'score'
]
}
22-july/topic1/src/app/app.module.ts
View file @
afd6ce4e
...
...
@@ -3,10 +3,16 @@ import { NgModule } from '@angular/core';
import
{
AppRoutingModule
}
from
'./app-routing.module'
;
import
{
AppComponent
}
from
'./app.component'
;
import
{
StudentComponent
}
from
'./student/student.component'
;
import
{
LecturerComponent
}
from
'./lecturer/lecturer.component'
;
import
{
ScoreComponent
}
from
'./score/score.component'
;
@
NgModule
({
declarations
:
[
AppComponent
AppComponent
,
StudentComponent
,
LecturerComponent
,
ScoreComponent
],
imports
:
[
BrowserModule
,
...
...
22-july/topic1/src/app/lecturer/lecturer.component.html
0 → 100644
View file @
afd6ce4e
<p>
lecturer works!
</p>
<div
*
ngFor=
"let s of lecturer"
class=
"card"
>
{{s.id}} {{s.name}}
{{s.email}}
<hr
style=
"height:2px;border-width:0;color:gray;background-color:gray"
>
</div>
22-july/topic1/src/app/lecturer/lecturer.component.scss
0 → 100644
View file @
afd6ce4e
.card
svg
.material-icons
path
{
fill
:
#888
;
}
.card-container
{
display
:
flex
;
flex-wrap
:
wrap
;
justify-content
:
center
;
margin-top
:
16px
;
}
.card
{
max-width
:
500px
;
margin
:
auto
;
border-radius
:
4px
;
border
:
1px
solid
#eee
;
background-color
:
#fafafa
;
height
:
40px
;
width
:
200px
;
padding
:
16px
;
display
:
flex
;
flex-direction
:
row
;
justify-content
:
center
;
align-items
:
center
;
transition
:
all
0
.2s
ease-in-out
;
line-height
:
24px
;
}
.card-container
.card
:not
(
:last-child
)
{
margin-right
:
0
;
}
.card.card-small
{
height
:
16px
;
width
:
168px
;
}
.card-container
.card
:not
(
.highlight-card
)
{
cursor
:
pointer
;
}
.card-container
.card
:not
(
.highlight-card
)
:hover
{
transform
:
translateY
(
-3px
);
box-shadow
:
0
4px
17px
rgba
(
0
,
0
,
0
,
0
.35
);
}
.card-container
.card
:not
(
.highlight-card
)
:hover
.material-icons
path
{
fill
:
rgb
(
105
,
103
,
103
);
}
.card.highlight-card
{
background-color
:
#fdb42c
;
color
:
white
;
font-weight
:
600
;
border
:
none
;
width
:
auto
;
min-width
:
30%
;
position
:
relative
;
}
.card.card.highlight-card
span
{
margin-left
:
60px
;
}
svg
#rocket
{
width
:
80px
;
position
:
absolute
;
left
:
-10px
;
top
:
-24px
;
}
svg
#rocket-smoke
{
height
:
calc
(
100vh
-
95px
);
position
:
absolute
;
top
:
10px
;
right
:
180px
;
z-index
:
-10
;
}
a
,
a
:visited
,
a
:hover
{
color
:
#1976d2
;
text-decoration
:
none
;
}
a
:hover
{
color
:
#125699
;
}
.terminal
{
position
:
relative
;
width
:
80%
;
max-width
:
600px
;
border-radius
:
6px
;
padding-top
:
45px
;
margin-top
:
8px
;
overflow
:
hidden
;
background-color
:
rgb
(
15
,
15
,
16
);
}
.
terminal
:
:
before
{
content
:
"\2022 \2022 \2022"
;
position
:
absolute
;
top
:
0
;
left
:
0
;
height
:
4px
;
background
:
rgb
(
58
,
58
,
58
);
color
:
#c2c3c4
;
width
:
100%
;
font-size
:
2rem
;
line-height
:
0
;
padding
:
14px
0
;
text-indent
:
4px
;
}
.terminal
pre
{
font-family
:
SFMono-Regular
,
Consolas
,
Liberation
Mono
,
Menlo
,
monospace
;
color
:
white
;
padding
:
0
1rem
1rem
;
margin
:
0
;
}
.circle-link
{
height
:
40px
;
width
:
40px
;
border-radius
:
40px
;
margin
:
8px
;
background-color
:
white
;
border
:
1px
solid
#eeeeee
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
cursor
:
pointer
;
box-shadow
:
0
1px
3px
rgba
(
0
,
0
,
0
,
0
.12
)
,
0
1px
2px
rgba
(
0
,
0
,
0
,
0
.24
);
transition
:
1s
ease-out
;
}
.circle-link
:hover
{
transform
:
translateY
(
-0
.25rem
);
box-shadow
:
0px
3px
15px
rgba
(
0
,
0
,
0
,
0
.2
);
}
footer
{
margin-top
:
8px
;
display
:
flex
;
align-items
:
center
;
line-height
:
20px
;
}
footer
a
{
display
:
flex
;
align-items
:
center
;
}
.github-star-badge
{
color
:
#24292e
;
display
:
flex
;
align-items
:
center
;
font-size
:
12px
;
padding
:
3px
10px
;
border
:
1px
solid
rgba
(
27
,
31
,
35
,.
2
);
border-radius
:
3px
;
background-image
:
linear-gradient
(
-180deg
,
#fafbfc
,
#eff3f6
90%
);
margin-left
:
4px
;
font-weight
:
600
;
font-family
:
-
apple-system
,
BlinkMacSystemFont
,
Segoe
UI
,
Helvetica
,
Arial
,
sans-serif
,
Apple
Color
Emoji
,
Segoe
UI
Emoji
,
Segoe
UI
Symbol
;
}
.github-star-badge
:hover
{
background-image
:
linear-gradient
(
-180deg
,
#f0f3f6
,
#e6ebf1
90%
);
border-color
:
rgba
(
27
,
31
,
35
,.
35
);
background-position
:
-.5em
;
}
.github-star-badge
.material-icons
{
height
:
16px
;
width
:
16px
;
margin-right
:
4px
;
}
svg
#clouds
{
position
:
fixed
;
bottom
:
-160px
;
left
:
-230px
;
z-index
:
-10
;
width
:
1920px
;
}
/* Responsive Styles */
@media
screen
and
(
max-width
:
767px
)
{
.card-container
>
*
:not
(
.circle-link
)
,
.terminal
{
width
:
100%
;
}
.card
:not
(
.highlight-card
)
{
height
:
16px
;
margin
:
8px
0
;
}
.card.highlight-card
span
{
margin-left
:
72px
;
}
svg
#rocket-smoke
{
right
:
120px
;
transform
:
rotate
(
-5deg
);
}
}
22-july/topic1/src/app/lecturer/lecturer.component.spec.ts
0 → 100644
View file @
afd6ce4e
import
{
async
,
ComponentFixture
,
TestBed
}
from
'@angular/core/testing'
;
import
{
LecturerComponent
}
from
'./lecturer.component'
;
describe
(
'LecturerComponent'
,
()
=>
{
let
component
:
LecturerComponent
;
let
fixture
:
ComponentFixture
<
LecturerComponent
>
;
beforeEach
(
async
(()
=>
{
TestBed
.
configureTestingModule
({
declarations
:
[
LecturerComponent
]
})
.
compileComponents
();
}));
beforeEach
(()
=>
{
fixture
=
TestBed
.
createComponent
(
LecturerComponent
);
component
=
fixture
.
componentInstance
;
fixture
.
detectChanges
();
});
it
(
'should create'
,
()
=>
{
expect
(
component
).
toBeTruthy
();
});
});
22-july/topic1/src/app/lecturer/lecturer.component.ts
0 → 100644
View file @
afd6ce4e
import
{
Component
,
OnInit
}
from
'@angular/core'
;
import
{
Lecturer
}
from
'../models/model'
;
import
{
LECTURER
}
from
'../mock/mock-data'
;
@
Component
({
selector
:
'app-lecturer'
,
templateUrl
:
'./lecturer.component.html'
,
styleUrls
:
[
'./lecturer.component.scss'
]
})
export
class
LecturerComponent
implements
OnInit
{
lecturer
:
Lecturer
[]
=
LECTURER
;
constructor
()
{
}
ngOnInit
():
void
{
}
}
22-july/topic1/src/app/mock/mock-
student
.ts
→
22-july/topic1/src/app/mock/mock-
data
.ts
View file @
afd6ce4e
import
{
Student
}
from
'../models/student
'
;
import
{
Student
,
Lecturer
}
from
'../models/model
'
;
export
const
STUDENTS
:
Student
[]
=
[
{
id
:
6011444001
,
name
:
'Gegy'
,
email
:
'gegy@gmail.com'
},
...
...
@@ -6,3 +6,10 @@ export const STUDENTS: Student[] = [
{
id
:
6011444003
,
name
:
'Dedy'
,
email
:
'dedy@gmail.com'
},
{
id
:
6011444004
,
name
:
'Dada'
,
email
:
'dada@gmail.com'
},
];
export
const
LECTURER
:
Lecturer
[]
=
[
{
id
:
1010010101
,
name
:
'Lynzy'
,
email
:
'lynzy@gamil.com'
},
{
id
:
1010010225
,
name
:
'Rosy'
,
email
:
'rose@gamil.com'
},
{
id
:
1010010654
,
name
:
'Rockzy'
,
email
:
'rock@gamil.com'
},
{
id
:
1010010825
,
name
:
'zoozy'
,
email
:
'zoo@gamil.com'
},
];
22-july/topic1/src/app/models/
student
.ts
→
22-july/topic1/src/app/models/
model
.ts
View file @
afd6ce4e
...
...
@@ -3,3 +3,9 @@ export interface Student {
name
:
string
;
email
:
string
;
}
export
interface
Lecturer
{
id
:
number
;
name
:
string
;
email
:
string
;
}
22-july/topic1/src/app/score/score.component.html
0 → 100644
View file @
afd6ce4e
<p>
score works!
</p>
22-july/topic1/src/app/score/score.component.scss
0 → 100644
View file @
afd6ce4e
22-july/topic1/src/app/score/score.component.spec.ts
0 → 100644
View file @
afd6ce4e
import
{
async
,
ComponentFixture
,
TestBed
}
from
'@angular/core/testing'
;
import
{
ScoreComponent
}
from
'./score.component'
;
describe
(
'ScoreComponent'
,
()
=>
{
let
component
:
ScoreComponent
;
let
fixture
:
ComponentFixture
<
ScoreComponent
>
;
beforeEach
(
async
(()
=>
{
TestBed
.
configureTestingModule
({
declarations
:
[
ScoreComponent
]
})
.
compileComponents
();
}));
beforeEach
(()
=>
{
fixture
=
TestBed
.
createComponent
(
ScoreComponent
);
component
=
fixture
.
componentInstance
;
fixture
.
detectChanges
();
});
it
(
'should create'
,
()
=>
{
expect
(
component
).
toBeTruthy
();
});
});
22-july/topic1/src/app/score/score.component.ts
0 → 100644
View file @
afd6ce4e
import
{
Component
,
OnInit
}
from
'@angular/core'
;
@
Component
({
selector
:
'app-score'
,
templateUrl
:
'./score.component.html'
,
styleUrls
:
[
'./score.component.scss'
]
})
export
class
ScoreComponent
implements
OnInit
{
constructor
()
{
}
ngOnInit
():
void
{
}
}
22-july/topic1/src/app/student/student.component.html
0 → 100644
View file @
afd6ce4e
<p>
student works!
</p>
<div
*
ngFor=
"let s of students"
class=
"card"
>
{{s.id}} {{s.name}}
{{s.email}}
<hr
style=
"height:2px;border-width:0;color:gray;background-color:gray"
>
</div>
22-july/topic1/src/app/student/student.component.scss
0 → 100644
View file @
afd6ce4e
22-july/topic1/src/app/student/student.component.spec.ts
0 → 100644
View file @
afd6ce4e
import
{
async
,
ComponentFixture
,
TestBed
}
from
'@angular/core/testing'
;
import
{
StudentComponent
}
from
'./student.component'
;
describe
(
'StudentComponent'
,
()
=>
{
let
component
:
StudentComponent
;
let
fixture
:
ComponentFixture
<
StudentComponent
>
;
beforeEach
(
async
(()
=>
{
TestBed
.
configureTestingModule
({
declarations
:
[
StudentComponent
]
})
.
compileComponents
();
}));
beforeEach
(()
=>
{
fixture
=
TestBed
.
createComponent
(
StudentComponent
);
component
=
fixture
.
componentInstance
;
fixture
.
detectChanges
();
});
it
(
'should create'
,
()
=>
{
expect
(
component
).
toBeTruthy
();
});
});
22-july/topic1/src/app/student/student.component.ts
0 → 100644
View file @
afd6ce4e
import
{
Component
,
OnInit
}
from
'@angular/core'
;
import
{
Student
}
from
'../models/model'
;
import
{
STUDENTS
}
from
'../mock/mock-data'
;
@
Component
({
selector
:
'app-student'
,
templateUrl
:
'./student.component.html'
,
styleUrls
:
[
'./student.component.scss'
]
})
export
class
StudentComponent
implements
OnInit
{
students
:
Student
[]
=
STUDENTS
;
constructor
()
{
}
ngOnInit
():
void
{
}
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment