4 Commits

Author SHA1 Message Date
Huffle
92d03d342b add partial css for goals 2025-05-25 14:43:23 +02:00
Huffle
cca1f10925 Merge branch 'main' into AP-63 2025-05-25 14:11:41 +02:00
Huffle
caf0d6b3fc add css for main goal 2025-05-25 14:11:11 +02:00
Huffle
d81ec1f126 Add allowance service and create get endpoint for allowance 2025-05-24 14:11:44 +02:00
165 changed files with 144 additions and 14125 deletions

View File

@@ -1,24 +0,0 @@
name: Backend Build and Test
on: [push]
jobs:
build:
runs-on: standard-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Go
uses: actions/setup-go@v5
with:
go-version: '>=1.24'
- name: Build
run: |
cd backend
go build .
- name: Test
run: |
cd backend
go test . -v

View File

@@ -1,27 +0,0 @@
name: Backend Deploy
on:
push:
branches:
- main
jobs:
build:
runs-on: standard-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Login
with:
package_rw: ${{ secrets.PACKAGE_RW }}
run: docker login gitea.seeseepuff.be -u seeseemelk -p ${{ secrets.PACKAGE_RW }}
- name: Build
run: |
cd backend
docker build -t gitea.seeseepuff.be/seeseemelk/allowance-planner:$(git rev-parse --short HEAD) .
- name: Push
run: |
cd backend
docker push gitea.seeseepuff.be/seeseemelk/allowance-planner:$(git rev-parse --short HEAD)

View File

@@ -1,14 +0,0 @@
FROM golang:1.24.2-alpine3.21
WORKDIR /app
COPY go.mod go.sum ./
RUN go mod download
COPY migrations ./migrations/
COPY *.go ./
COPY *.gohtml ./
RUN go build -o /allowance_planner
EXPOSE 8080
ENV GIN_MODE=release
CMD ["/allowance_planner"]

View File

@@ -9,7 +9,7 @@ import (
) )
const ( const (
TestHistoryName = "Test History" TestAllowanceName = "Test History"
) )
func startServer(t *testing.T) *httpexpect.Expect { func startServer(t *testing.T) *httpexpect.Expect {
@@ -62,7 +62,7 @@ func TestGetUserAllowance(t *testing.T) {
// Create a new allowance // Create a new allowance
requestBody := map[string]interface{}{ requestBody := map[string]interface{}{
"name": TestHistoryName, "name": TestAllowanceName,
"target": 5000, "target": 5000,
"weight": 10, "weight": 10,
} }
@@ -73,7 +73,7 @@ func TestGetUserAllowance(t *testing.T) {
result.Length().IsEqual(2) result.Length().IsEqual(2)
item := result.Value(1).Object() item := result.Value(1).Object()
item.Value("id").IsEqual(1) item.Value("id").IsEqual(1)
item.Value("name").IsEqual(TestHistoryName) item.Value("name").IsEqual(TestAllowanceName)
item.Value("target").IsEqual(5000) item.Value("target").IsEqual(5000)
item.Value("weight").IsEqual(10) item.Value("weight").IsEqual(10)
item.Value("progress").IsEqual(0) item.Value("progress").IsEqual(0)
@@ -95,7 +95,7 @@ func TestCreateUserAllowance(t *testing.T) {
// Create a new allowance // Create a new allowance
requestBody := map[string]interface{}{ requestBody := map[string]interface{}{
"name": TestHistoryName, "name": TestAllowanceName,
"target": 5000, "target": 5000,
"weight": 10, "weight": 10,
} }
@@ -120,7 +120,7 @@ func TestCreateUserAllowance(t *testing.T) {
allowance := allowances.Value(1).Object() allowance := allowances.Value(1).Object()
allowance.Value("id").IsEqual(allowanceId) allowance.Value("id").IsEqual(allowanceId)
allowance.Value("name").IsEqual(TestHistoryName) allowance.Value("name").IsEqual(TestAllowanceName)
allowance.Value("target").IsEqual(5000) allowance.Value("target").IsEqual(5000)
allowance.Value("weight").IsEqual(10) allowance.Value("weight").IsEqual(10)
allowance.Value("progress").IsEqual(0) allowance.Value("progress").IsEqual(0)
@@ -130,7 +130,7 @@ func TestCreateUserAllowanceNoUser(t *testing.T) {
e := startServer(t) e := startServer(t)
requestBody := map[string]interface{}{ requestBody := map[string]interface{}{
"name": TestHistoryName, "name": TestAllowanceName,
"target": 5000, "target": 5000,
"weight": 10, "weight": 10,
} }
@@ -171,7 +171,7 @@ func TestCreateUserAllowanceBadId(t *testing.T) {
e := startServer(t) e := startServer(t)
requestBody := map[string]interface{}{ requestBody := map[string]interface{}{
"name": TestHistoryName, "name": TestAllowanceName,
"target": 5000, "target": 5000,
"weight": 10, "weight": 10,
} }
@@ -187,7 +187,7 @@ func TestDeleteUserAllowance(t *testing.T) {
// Create a new allowance to delete // Create a new allowance to delete
createRequest := map[string]interface{}{ createRequest := map[string]interface{}{
"name": TestHistoryName, "name": TestAllowanceName,
"target": 1000, "target": 1000,
"weight": 5, "weight": 5,
} }
@@ -434,50 +434,37 @@ func TestPutTaskInvalidTaskId(t *testing.T) {
e.PUT("/task/999").WithJSON(requestBody).Expect().Status(404) e.PUT("/task/999").WithJSON(requestBody).Expect().Status(404)
} }
func TestPostHistory(t *testing.T) { func TestPostAllowance(t *testing.T) {
e := startServer(t) e := startServer(t)
e.POST("/user/1/history").WithJSON(PostHistory{Allowance: 100, Description: "Add a 100"}).Expect().Status(200) e.POST("/user/1/history").WithJSON(PostHistory{Allowance: 100}).Expect().Status(200)
e.POST("/user/1/history").WithJSON(PostHistory{Allowance: 20, Description: "Lolol"}).Expect().Status(200) e.POST("/user/1/history").WithJSON(PostHistory{Allowance: 20}).Expect().Status(200)
e.POST("/user/1/history").WithJSON(PostHistory{Allowance: -10, Description: "Subtracting"}).Expect().Status(200) e.POST("/user/1/history").WithJSON(PostHistory{Allowance: -10}).Expect().Status(200)
response := e.GET("/user/1").Expect().Status(200).JSON().Object() response := e.GET("/user/1").Expect().Status(200).JSON().Object()
response.Value("allowance").Number().IsEqual(100 + 20 - 10) response.Value("allowance").Number().IsEqual(100 + 20 - 10)
} }
func TestPostHistoryInvalidUserId(t *testing.T) { func TestPostAllowanceInvalidUserId(t *testing.T) {
e := startServer(t) e := startServer(t)
e.POST("/user/999/history").WithJSON(PostHistory{Allowance: 100, Description: "Good"}).Expect(). e.POST("/user/999/history").WithJSON(PostHistory{Allowance: 100}).Expect().
Status(404) Status(404)
} }
func TestPostHistoryInvalidDescription(t *testing.T) {
e := startServer(t)
e.POST("/user/1/history").WithJSON(PostHistory{Allowance: 100}).Expect().
Status(400)
}
func TestGetHistory(t *testing.T) { func TestGetHistory(t *testing.T) {
e := startServer(t) e := startServer(t)
e.POST("/user/1/history").WithJSON(PostHistory{Allowance: 100, Description: "Add 100"}).Expect().Status(200) e.POST("/user/1/history").WithJSON(PostHistory{Allowance: 100}).Expect().Status(200)
e.POST("/user/1/history").WithJSON(PostHistory{Allowance: 20, Description: "Add 20"}).Expect().Status(200) e.POST("/user/1/history").WithJSON(PostHistory{Allowance: 20}).Expect().Status(200)
e.POST("/user/1/history").WithJSON(PostHistory{Allowance: -10, Description: "Subtract 10"}).Expect().Status(200) e.POST("/user/1/history").WithJSON(PostHistory{Allowance: -10}).Expect().Status(200)
response := e.GET("/user/1/history").Expect().Status(200).JSON().Array() response := e.GET("/user/1/history").Expect().Status(200).JSON().Array()
response.Length().IsEqual(3) response.Length().IsEqual(3)
response.Value(0).Object().Length().IsEqual(3)
response.Value(0).Object().Value("allowance").Number().IsEqual(100) response.Value(0).Object().Value("allowance").Number().IsEqual(100)
response.Value(0).Object().Value("timestamp").String().AsDateTime().InRange(getDelta(time.Now(), 2.0)) response.Value(0).Object().Value("timestamp").String().AsDateTime().InRange(getDelta(time.Now(), 2.0))
response.Value(0).Object().Value("description").String().IsEqual("Add 100")
response.Value(1).Object().Value("allowance").Number().IsEqual(20) response.Value(1).Object().Value("allowance").Number().IsEqual(20)
response.Value(1).Object().Value("description").String().IsEqual("Add 20")
response.Value(2).Object().Value("allowance").Number().IsEqual(-10) response.Value(2).Object().Value("allowance").Number().IsEqual(-10)
response.Value(2).Object().Value("description").String().IsEqual("Subtract 10")
} }
func TestGetUserAllowanceById(t *testing.T) { func TestGetUserAllowanceById(t *testing.T) {
@@ -485,10 +472,9 @@ func TestGetUserAllowanceById(t *testing.T) {
// Create a new allowance // Create a new allowance
requestBody := map[string]interface{}{ requestBody := map[string]interface{}{
"name": TestHistoryName, "name": TestAllowanceName,
"target": 5000, "target": 5000,
"weight": 10, "weight": 10,
"colour": "#FF5733",
} }
resp := e.POST("/user/1/allowance").WithJSON(requestBody).Expect().Status(201).JSON().Object() resp := e.POST("/user/1/allowance").WithJSON(requestBody).Expect().Status(201).JSON().Object()
allowanceId := int(resp.Value("id").Number().Raw()) allowanceId := int(resp.Value("id").Number().Raw())
@@ -496,21 +482,10 @@ func TestGetUserAllowanceById(t *testing.T) {
// Retrieve the created allowance by ID // Retrieve the created allowance by ID
result := e.GET("/user/1/allowance/" + strconv.Itoa(allowanceId)).Expect().Status(200).JSON().Object() result := e.GET("/user/1/allowance/" + strconv.Itoa(allowanceId)).Expect().Status(200).JSON().Object()
result.Value("id").IsEqual(allowanceId) result.Value("id").IsEqual(allowanceId)
result.Value("name").IsEqual(TestHistoryName) result.Value("name").IsEqual(TestAllowanceName)
result.Value("target").IsEqual(5000) result.Value("target").IsEqual(5000)
result.Value("weight").IsEqual(10) result.Value("weight").IsEqual(10)
result.Value("progress").IsEqual(0) result.Value("progress").IsEqual(0)
result.Value("colour").IsEqual("#FF5733")
resultArray := e.GET("/user/1/allowance").Expect().Status(200).JSON().Array()
resultArray.Length().IsEqual(2)
result = resultArray.Value(1).Object()
result.Value("id").IsEqual(allowanceId)
result.Value("name").IsEqual(TestHistoryName)
result.Value("target").IsEqual(5000)
result.Value("weight").IsEqual(10)
result.Value("progress").IsEqual(0)
result.Value("colour").IsEqual("#FF5733")
} }
func TestGetUserByAllowanceIdInvalidAllowance(t *testing.T) { func TestGetUserByAllowanceIdInvalidAllowance(t *testing.T) {
@@ -538,7 +513,7 @@ func TestPutAllowanceById(t *testing.T) {
// Create a new allowance // Create a new allowance
requestBody := map[string]interface{}{ requestBody := map[string]interface{}{
"name": TestHistoryName, "name": TestAllowanceName,
"target": 5000, "target": 5000,
"weight": 10, "weight": 10,
"colour": "#FF5733", "colour": "#FF5733",
@@ -618,36 +593,6 @@ func TestCompleteTask(t *testing.T) {
} }
} }
func TestCompleteTaskWithNoWeights(t *testing.T) {
e := startServer(t)
taskId := createTestTaskWithAmount(e, 101)
e.GET("/tasks").Expect().Status(200).JSON().Array().Length().IsEqual(1)
// Ensure main allowance has no weight
e.PUT("/user/1/allowance/0").WithJSON(UpdateAllowanceRequest{
Weight: 0,
}).Expect().Status(200)
// Complete the task
e.POST("/task/" + strconv.Itoa(taskId) + "/complete").Expect().Status(200)
// Verify the task is marked as completed
e.GET("/task/" + strconv.Itoa(taskId)).Expect().Status(404)
// Verify the allowances are updated for user 1
allowances := e.GET("/user/1/allowance").Expect().Status(200).JSON().Array()
allowances.Length().IsEqual(1)
allowances.Value(0).Object().Value("id").Number().IsEqual(0)
allowances.Value(0).Object().Value("progress").Number().InDelta(101.00, 0.01)
// And also for user 2
allowances = e.GET("/user/2/allowance").Expect().Status(200).JSON().Array()
allowances.Length().IsEqual(1)
allowances.Value(0).Object().Value("id").Number().IsEqual(0)
allowances.Value(0).Object().Value("progress").Number().InDelta(101.00, 0.01)
}
func TestCompleteTaskAllowanceWeightsSumTo0(t *testing.T) { func TestCompleteTaskAllowanceWeightsSumTo0(t *testing.T) {
e := startServer(t) e := startServer(t)
taskId := createTestTaskWithAmount(e, 101) taskId := createTestTaskWithAmount(e, 101)
@@ -686,11 +631,6 @@ func TestCompleteAllowance(t *testing.T) {
createTestTaskWithAmount(e, 100) createTestTaskWithAmount(e, 100)
createTestAllowance(e, "Test Allowance 1", 100, 50) createTestAllowance(e, "Test Allowance 1", 100, 50)
// Update base allowance
e.PUT("/user/1/allowance/0").WithJSON(UpdateAllowanceRequest{
Weight: 0,
}).Expect().Status(200)
// Complete the task // Complete the task
e.POST("/task/1/complete").Expect().Status(200) e.POST("/task/1/complete").Expect().Status(200)
@@ -703,15 +643,10 @@ func TestCompleteAllowance(t *testing.T) {
// Verify history is updated // Verify history is updated
history := e.GET("/user/1/history").Expect().Status(200).JSON().Array() history := e.GET("/user/1/history").Expect().Status(200).JSON().Array()
history.Length().IsEqual(2) history.Length().IsEqual(2)
history.Value(0).Object().Length().IsEqual(3)
history.Value(0).Object().Value("allowance").Number().IsEqual(100) history.Value(0).Object().Value("allowance").Number().IsEqual(100)
history.Value(0).Object().Value("timestamp").String().AsDateTime().InRange(getDelta(time.Now(), 2.0)) history.Value(0).Object().Value("timestamp").String().AsDateTime().InRange(getDelta(time.Now(), 2.0))
history.Value(0).Object().Value("description").String().IsEqual("Task completed: Test Task")
history.Value(1).Object().Length().IsEqual(3)
history.Value(1).Object().Value("allowance").Number().IsEqual(-100) history.Value(1).Object().Value("allowance").Number().IsEqual(-100)
history.Value(1).Object().Value("timestamp").String().AsDateTime().InRange(getDelta(time.Now(), 2.0)) history.Value(1).Object().Value("timestamp").String().AsDateTime().InRange(getDelta(time.Now(), 2.0))
history.Value(1).Object().Value("description").String().IsEqual("Allowance completed: Test Allowance 1")
} }
func TestCompleteAllowanceInvalidUserId(t *testing.T) { func TestCompleteAllowanceInvalidUserId(t *testing.T) {
@@ -758,145 +693,6 @@ func TestPutBulkAllowance(t *testing.T) {
allowances.Value(2).Object().Value("weight").Number().IsEqual(10) allowances.Value(2).Object().Value("weight").Number().IsEqual(10)
} }
func TestAddAllowanceSimple(t *testing.T) {
e := startServer(t)
createTestAllowance(e, "Test Allowance 1", 1000, 1)
request := map[string]interface{}{
"amount": 10,
"description": "Added to allowance 1",
}
e.POST("/user/1/allowance/1/add").WithJSON(request).Expect().Status(200)
// Verify the allowance is updated
allowances := e.GET("/user/1/allowance").Expect().Status(200).JSON().Array()
allowances.Value(1).Object().Value("id").Number().IsEqual(1)
allowances.Value(1).Object().Value("progress").Number().InDelta(10.0, 0.01)
// Verify the history is updated
history := e.GET("/user/1/history").Expect().Status(200).JSON().Array()
history.Length().IsEqual(1)
history.Value(0).Object().Value("allowance").Number().InDelta(10.0, 0.01)
history.Value(0).Object().Value("timestamp").String().AsDateTime().InRange(getDelta(time.Now(), 2.0))
history.Value(0).Object().Value("description").String().IsEqual("Added to allowance 1")
}
func TestAddAllowanceWithSpillage(t *testing.T) {
e := startServer(t)
createTestAllowance(e, "Test Allowance 1", 5, 1)
createTestAllowance(e, "Test Allowance 2", 5, 1)
e.PUT("/user/1/allowance/0").WithJSON(UpdateAllowanceRequest{Weight: 1}).Expect().Status(200)
request := map[string]interface{}{
"amount": 10,
"description": "Added to allowance 1",
}
e.POST("/user/1/allowance/1/add").WithJSON(request).Expect().Status(200)
// Verify the allowance is updated
allowances := e.GET("/user/1/allowance").Expect().Status(200).JSON().Array()
allowances.Value(1).Object().Value("id").Number().IsEqual(1)
allowances.Value(1).Object().Value("progress").Number().InDelta(5.0, 0.01)
allowances.Value(2).Object().Value("id").Number().IsEqual(2)
allowances.Value(2).Object().Value("progress").Number().InDelta(2.5, 0.01)
allowances.Value(0).Object().Value("id").Number().IsEqual(0)
allowances.Value(0).Object().Value("progress").Number().InDelta(2.5, 0.01)
// Verify the history is updated
history := e.GET("/user/1/history").Expect().Status(200).JSON().Array()
history.Length().IsEqual(1)
history.Value(0).Object().Value("allowance").Number().InDelta(10.0, 0.01)
history.Value(0).Object().Value("timestamp").String().AsDateTime().InRange(getDelta(time.Now(), 2.0))
history.Value(0).Object().Value("description").String().IsEqual("Added to allowance 1")
}
func TestAddAllowanceIdZero(t *testing.T) {
e := startServer(t)
createTestAllowance(e, "Test Allowance 1", 1000, 1)
request := map[string]interface{}{
"amount": 10,
"description": "Added to allowance 1",
}
e.POST("/user/1/allowance/0/add").WithJSON(request).Expect().Status(200)
// Verify the allowance is updated
allowances := e.GET("/user/1/allowance").Expect().Status(200).JSON().Array()
allowances.Value(0).Object().Value("id").Number().IsEqual(0)
allowances.Value(0).Object().Value("progress").Number().InDelta(10.0, 0.01)
// Verify the history is updated
history := e.GET("/user/1/history").Expect().Status(200).JSON().Array()
history.Length().IsEqual(1)
history.Value(0).Object().Value("allowance").Number().InDelta(10.0, 0.01)
history.Value(0).Object().Value("timestamp").String().AsDateTime().InRange(getDelta(time.Now(), 2.0))
history.Value(0).Object().Value("description").String().IsEqual("Added to allowance 1")
}
func TestSubtractAllowanceSimple(t *testing.T) {
e := startServer(t)
createTestAllowance(e, "Test Allowance 1", 1000, 1)
request := map[string]interface{}{
"amount": 10,
"description": "Added to allowance 1",
}
e.POST("/user/1/allowance/1/add").WithJSON(request).Expect().Status(200)
request["amount"] = -2.5
e.POST("/user/1/allowance/1/add").WithJSON(request).Expect().Status(200)
// Verify the allowance is updated
allowances := e.GET("/user/1/allowance").Expect().Status(200).JSON().Array()
allowances.Value(1).Object().Value("id").Number().IsEqual(1)
allowances.Value(1).Object().Value("progress").Number().InDelta(7.5, 0.01)
// Verify the history is updated
history := e.GET("/user/1/history").Expect().Status(200).JSON().Array()
history.Length().IsEqual(2)
history.Value(0).Object().Value("allowance").Number().InDelta(10.0, 0.01)
history.Value(0).Object().Value("timestamp").String().AsDateTime().InRange(getDelta(time.Now(), 2.0))
history.Value(0).Object().Value("description").String().IsEqual("Added to allowance 1")
history.Value(1).Object().Value("allowance").Number().InDelta(-2.5, 0.01)
history.Value(1).Object().Value("timestamp").String().AsDateTime().InRange(getDelta(time.Now(), 2.0))
history.Value(1).Object().Value("description").String().IsEqual("Added to allowance 1")
}
func TestSubtractllowanceIdZero(t *testing.T) {
e := startServer(t)
createTestAllowance(e, "Test Allowance 1", 1000, 1)
request := map[string]interface{}{
"amount": 10,
"description": "Added to allowance 1",
}
e.POST("/user/1/allowance/0/add").WithJSON(request).Expect().Status(200)
request["amount"] = -2.5
e.POST("/user/1/allowance/0/add").WithJSON(request).Expect().Status(200)
// Verify the allowance is updated
allowances := e.GET("/user/1/allowance").Expect().Status(200).JSON().Array()
allowances.Value(0).Object().Value("id").Number().IsEqual(0)
allowances.Value(0).Object().Value("progress").Number().InDelta(7.5, 0.01)
// Verify the history is updated
history := e.GET("/user/1/history").Expect().Status(200).JSON().Array()
history.Length().IsEqual(2)
history.Value(0).Object().Value("allowance").Number().InDelta(10.0, 0.01)
history.Value(0).Object().Value("timestamp").String().AsDateTime().InRange(getDelta(time.Now(), 2.0))
history.Value(0).Object().Value("description").String().IsEqual("Added to allowance 1")
history.Value(1).Object().Value("allowance").Number().InDelta(-2.5, 0.01)
history.Value(1).Object().Value("description").String().IsEqual("Added to allowance 1")
}
func getDelta(base time.Time, delta float64) (time.Time, time.Time) { func getDelta(base time.Time, delta float64) (time.Time, time.Time) {
start := base.Add(-time.Duration(delta) * time.Second) start := base.Add(-time.Duration(delta) * time.Second)
end := base.Add(time.Duration(delta) * time.Second) end := base.Add(time.Duration(delta) * time.Second)

View File

@@ -28,7 +28,3 @@ func ConvertStringToColour(colourStr string) (int, error) {
} }
return colour, nil return colour, nil
} }
func ConvertColourToString(colour int) string {
return fmt.Sprintf("#%06X", colour)
}

View File

@@ -84,14 +84,13 @@ func (db *Db) GetUserAllowances(userId int) ([]Allowance, error) {
totalAllowance.Progress = float64(progress) / 100.0 totalAllowance.Progress = float64(progress) / 100.0
allowances = append(allowances, totalAllowance) allowances = append(allowances, totalAllowance)
for row := range db.db.Query("select id, name, target, balance, weight, colour from allowances where user_id = ?"). for row := range db.db.Query("select id, name, target, balance, weight from allowances where user_id = ?").
Bind(userId).Range(&err) { Bind(userId).Range(&err) {
allowance := Allowance{} allowance := Allowance{}
var target, progress, colour int var target, progress int
err = row.Scan(&allowance.ID, &allowance.Name, &target, &progress, &allowance.Weight, &colour) err = row.Scan(&allowance.ID, &allowance.Name, &target, &progress, &allowance.Weight)
allowance.Target = float64(target) / 100.0 allowance.Target = float64(target) / 100.0
allowance.Progress = float64(progress) / 100.0 allowance.Progress = float64(progress) / 100.0
allowance.Colour = ConvertColourToString(colour)
if err != nil { if err != nil {
return nil, err return nil, err
} }
@@ -114,14 +113,13 @@ func (db *Db) GetUserAllowanceById(userId int, allowanceId int) (*Allowance, err
return nil, err return nil, err
} }
} else { } else {
var target, progress int64 var target, progress, colour int64
var colour int
err := db.db.Query("select id, name, target, balance, weight, colour from allowances where user_id = ? and id = ?"). err := db.db.Query("select id, name, target, balance, weight, colour from allowances where user_id = ? and id = ?").
Bind(userId, allowanceId). Bind(userId, allowanceId).
ScanSingle(&allowance.ID, &allowance.Name, &target, &progress, &allowance.Weight, &colour) ScanSingle(&allowance.ID, &allowance.Name, &target, &progress, &allowance.Weight, &colour)
allowance.Target = float64(target) / 100.0 allowance.Target = float64(target) / 100.0
allowance.Progress = float64(progress) / 100.0 allowance.Progress = float64(progress) / 100.0
allowance.Colour = ConvertColourToString(colour) allowance.Colour = fmt.Sprintf("#%06X", colour)
if err != nil { if err != nil {
return nil, err return nil, err
} }
@@ -207,9 +205,8 @@ func (db *Db) CompleteAllowance(userId int, allowanceId int) error {
// Get the cost of the allowance // Get the cost of the allowance
var cost int var cost int
var allowanceName string err = tx.Query("select balance from allowances where id = ? and user_id = ?").
err = tx.Query("select balance, name from allowances where id = ? and user_id = ?"). Bind(allowanceId, userId).ScanSingle(&cost)
Bind(allowanceId, userId).ScanSingle(&cost, &allowanceName)
if err != nil { if err != nil {
return err return err
} }
@@ -222,8 +219,8 @@ func (db *Db) CompleteAllowance(userId int, allowanceId int) error {
} }
// Add a history entry // Add a history entry
err = tx.Query("insert into history (user_id, timestamp, amount, description) values (?, ?, ?, ?)"). err = tx.Query("insert into history (user_id, timestamp, amount) values (?, ?, ?)").
Bind(userId, time.Now().Unix(), -cost, fmt.Sprintf("Allowance completed: %s", allowanceName)). Bind(userId, time.Now().Unix(), -cost).
Exec() Exec()
if err != nil { if err != nil {
return err return err
@@ -422,28 +419,63 @@ func (db *Db) CompleteTask(taskId int) error {
defer tx.MustRollback() defer tx.MustRollback()
var reward int var reward int
var rewardName string err = tx.Query("select reward from tasks where id = ?").Bind(taskId).ScanSingle(&reward)
err = tx.Query("select reward, name from tasks where id = ?").Bind(taskId).ScanSingle(&reward, &rewardName)
if err != nil { if err != nil {
return err return err
} }
for userRow := range tx.Query("select id from users").Range(&err) { for userRow := range tx.Query("select id, weight from users").Range(&err) {
var userId int var userId int
err = userRow.Scan(&userId) var userWeight float64
err = userRow.Scan(&userId, &userWeight)
if err != nil { if err != nil {
return err return err
} }
// Add the history entry // Add the history entry
err = tx.Query("insert into history (user_id, timestamp, amount, description) values (?, ?, ?, ?)"). err = tx.Query("insert into history (user_id, timestamp, amount) values (?, ?, ?)").
Bind(userId, time.Now().Unix(), reward, fmt.Sprintf("Task completed: %s", rewardName)). Bind(userId, time.Now().Unix(), reward).
Exec() Exec()
if err != nil { if err != nil {
return err return err
} }
err := db.addDistributedReward(tx, userId, reward) // Calculate the sums of all weights
var sumOfWeights float64
err = tx.Query("select sum(weight) from allowances where user_id = ? and weight > 0").Bind(userId).ScanSingle(&sumOfWeights)
sumOfWeights += userWeight
remainingReward := reward
if sumOfWeights > 0 {
// Distribute the reward to the allowances
for allowanceRow := range tx.Query("select id, weight, target, balance from allowances where user_id = ? and weight > 0 order by (target - balance) asc").Bind(userId).Range(&err) {
var allowanceId, allowanceTarget, allowanceBalance int
var allowanceWeight float64
err = allowanceRow.Scan(&allowanceId, &allowanceWeight, &allowanceTarget, &allowanceBalance)
if err != nil {
return err
}
// Calculate the amount to add to the allowance
amount := int((allowanceWeight / sumOfWeights) * float64(remainingReward))
if allowanceBalance+amount > allowanceTarget {
// If the amount reaches past the target, set it to the target
amount = allowanceTarget - allowanceBalance
}
sumOfWeights -= allowanceWeight
err = tx.Query("update allowances set balance = balance + ? where id = ? and user_id = ?").
Bind(amount, allowanceId, userId).Exec()
if err != nil {
return err
}
remainingReward -= amount
}
}
// Add the remaining reward to the user
err = tx.Query("update users set balance = balance + ? where id = ?").
Bind(remainingReward, userId).Exec()
if err != nil { if err != nil {
return err return err
} }
@@ -458,52 +490,6 @@ func (db *Db) CompleteTask(taskId int) error {
return tx.Commit() return tx.Commit()
} }
func (db *Db) addDistributedReward(tx *mysqlite.Tx, userId int, reward int) error {
var userWeight float64
err := tx.Query("select weight from users where id = ?").Bind(userId).ScanSingle(&userWeight)
if err != nil {
return err
}
// Calculate the sums of all weights
var sumOfWeights float64
err = tx.Query("select sum(weight) from allowances where user_id = ? and weight > 0").Bind(userId).ScanSingle(&sumOfWeights)
sumOfWeights += userWeight
remainingReward := reward
if sumOfWeights > 0 {
// Distribute the reward to the allowances
for allowanceRow := range tx.Query("select id, weight, target, balance from allowances where user_id = ? and weight > 0 order by (target - balance) asc").Bind(userId).Range(&err) {
var allowanceId, allowanceTarget, allowanceBalance int
var allowanceWeight float64
err = allowanceRow.Scan(&allowanceId, &allowanceWeight, &allowanceTarget, &allowanceBalance)
if err != nil {
return err
}
// Calculate the amount to add to the allowance
amount := int((allowanceWeight / sumOfWeights) * float64(remainingReward))
if allowanceBalance+amount > allowanceTarget {
// If the amount reaches past the target, set it to the target
amount = allowanceTarget - allowanceBalance
}
sumOfWeights -= allowanceWeight
err = tx.Query("update allowances set balance = balance + ? where id = ? and user_id = ?").
Bind(amount, allowanceId, userId).Exec()
if err != nil {
return err
}
remainingReward -= amount
}
}
// Add the remaining reward to the user
err = tx.Query("update users set balance = balance + ? where id = ?").
Bind(remainingReward, userId).Exec()
return err
}
func (db *Db) AddHistory(userId int, allowance *PostHistory) error { func (db *Db) AddHistory(userId int, allowance *PostHistory) error {
tx, err := db.db.Begin() tx, err := db.db.Begin()
if err != nil { if err != nil {
@@ -512,8 +498,8 @@ func (db *Db) AddHistory(userId int, allowance *PostHistory) error {
defer tx.MustRollback() defer tx.MustRollback()
amount := int(math.Round(allowance.Allowance * 100.0)) amount := int(math.Round(allowance.Allowance * 100.0))
err = tx.Query("insert into history (user_id, timestamp, amount, description) values (?, ?, ?, ?)"). err = tx.Query("insert into history (user_id, timestamp, amount) values (?, ?, ?)").
Bind(userId, time.Now().Unix(), amount, allowance.Description). Bind(userId, time.Now().Unix(), amount).
Exec() Exec()
if err != nil { if err != nil {
return err return err
@@ -525,11 +511,11 @@ func (db *Db) GetHistory(userId int) ([]History, error) {
history := make([]History, 0) history := make([]History, 0)
var err error var err error
for row := range db.db.Query("select amount, `timestamp`, description from history where user_id = ? order by `timestamp` desc"). for row := range db.db.Query("select amount, `timestamp` from history where user_id = ? order by `timestamp` desc").
Bind(userId).Range(&err) { Bind(userId).Range(&err) {
allowance := History{} allowance := History{}
var timestamp, amount int64 var timestamp, amount int64
err = row.Scan(&amount, &timestamp, &allowance.Description) err = row.Scan(&amount, &timestamp)
if err != nil { if err != nil {
return nil, err return nil, err
} }
@@ -542,92 +528,3 @@ func (db *Db) GetHistory(userId int) ([]History, error) {
} }
return history, nil return history, nil
} }
func (db *Db) AddAllowanceAmount(userId int, allowanceId int, request AddAllowanceAmountRequest) error {
tx, err := db.db.Begin()
if err != nil {
return err
}
defer tx.MustRollback()
// Convert amount to integer (cents)
remainingAmount := int(math.Round(request.Amount * 100))
// Insert history entry
err = tx.Query("insert into history (user_id, timestamp, amount, description) values (?, ?, ?, ?)").
Bind(userId, time.Now().Unix(), remainingAmount, request.Description).
Exec()
if err != nil {
return err
}
if allowanceId == 0 {
if remainingAmount < 0 {
var userBalance int
err = tx.Query("select balance from users where id = ?").
Bind(userId).ScanSingle(&userBalance)
if err != nil {
return err
}
if remainingAmount > userBalance {
return fmt.Errorf("cannot remove more than the current balance: %d", userBalance)
}
}
err = tx.Query("update users set balance = balance + ? where id = ?").
Bind(remainingAmount, userId).Exec()
if err != nil {
return err
}
} else if remainingAmount < 0 {
var progress int
err = tx.Query("select balance from allowances where id = ? and user_id = ?").
Bind(allowanceId, userId).ScanSingle(&progress)
if err != nil {
return err
}
if remainingAmount > progress {
return fmt.Errorf("cannot remove more than the current allowance balance: %d", progress)
}
err = tx.Query("update allowances set balance = balance + ? where id = ? and user_id = ?").
Bind(remainingAmount, allowanceId, userId).Exec()
if err != nil {
return err
}
} else {
// Fetch the target and progress of the specified allowance
var target, progress int
err = tx.Query("select target, balance from allowances where id = ? and user_id = ?").
Bind(allowanceId, userId).ScanSingle(&target, &progress)
if err != nil {
return err
}
// Calculate the amount to add to the current allowance
toAdd := remainingAmount
if progress+toAdd > target {
toAdd = target - progress
}
remainingAmount -= toAdd
// Update the current allowance
if toAdd > 0 {
err = tx.Query("update allowances set balance = balance + ? where id = ? and user_id = ?").
Bind(toAdd, allowanceId, userId).Exec()
if err != nil {
return err
}
}
// If there's remaining amount, distribute it to the user's allowances
if remainingAmount > 0 {
err = db.addDistributedReward(tx, userId, remainingAmount)
if err != nil {
return err
}
}
}
return tx.Commit()
}

View File

@@ -14,14 +14,12 @@ type UserWithAllowance struct {
} }
type History struct { type History struct {
Allowance float64 `json:"allowance"` Allowance float64 `json:"allowance"`
Timestamp time.Time `json:"timestamp"` Timestamp time.Time `json:"timestamp"`
Description string `json:"description"`
} }
type PostHistory struct { type PostHistory struct {
Allowance float64 `json:"allowance"` Allowance float64 `json:"allowance"`
Description string `json:"description"`
} }
// Task represents a task in the system. // Task represents a task in the system.
@@ -73,8 +71,3 @@ type CreateTaskRequest struct {
type CreateTaskResponse struct { type CreateTaskResponse struct {
ID int `json:"id"` ID int `json:"id"`
} }
type AddAllowanceAmountRequest struct {
Amount float64 `json:"amount"`
Description string `json:"description"`
}

View File

@@ -368,56 +368,6 @@ func completeAllowance(c *gin.Context) {
c.IndentedJSON(http.StatusOK, gin.H{"message": "Allowance completed successfully"}) c.IndentedJSON(http.StatusOK, gin.H{"message": "Allowance completed successfully"})
} }
func addToAllowance(c *gin.Context) {
userIdStr := c.Param("userId")
allowanceIdStr := c.Param("allowanceId")
userId, err := strconv.Atoi(userIdStr)
if err != nil {
log.Printf(ErrInvalidUserID+": %v", err)
c.JSON(http.StatusBadRequest, gin.H{"error": ErrInvalidUserID})
return
}
allowanceId, err := strconv.Atoi(allowanceIdStr)
if err != nil {
log.Printf("Invalid allowance ID: %v", err)
c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid allowance ID"})
return
}
exists, err := db.UserExists(userId)
if err != nil {
log.Printf(ErrCheckingUserExist, err)
c.JSON(http.StatusInternalServerError, gin.H{"error": ErrInternalServerError})
return
}
if !exists {
c.JSON(http.StatusNotFound, gin.H{"error": ErrUserNotFound})
return
}
var allowanceRequest AddAllowanceAmountRequest
if err := c.ShouldBindJSON(&allowanceRequest); err != nil {
log.Printf("Error parsing request body: %v", err)
c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid request body"})
return
}
err = db.AddAllowanceAmount(userId, allowanceId, allowanceRequest)
if errors.Is(err, mysqlite.ErrNoRows) {
c.JSON(http.StatusNotFound, gin.H{"error": "Allowance not found"})
return
}
if err != nil {
log.Printf("Error completing allowance: %v", err)
c.JSON(http.StatusInternalServerError, gin.H{"error": ErrInternalServerError})
return
}
c.IndentedJSON(http.StatusOK, gin.H{"message": "Allowance completed successfully"})
}
func createTask(c *gin.Context) { func createTask(c *gin.Context) {
var taskRequest CreateTaskRequest var taskRequest CreateTaskRequest
if err := c.ShouldBindJSON(&taskRequest); err != nil { if err := c.ShouldBindJSON(&taskRequest); err != nil {
@@ -589,11 +539,6 @@ func postHistory(c *gin.Context) {
return return
} }
if historyRequest.Description == "" {
c.JSON(http.StatusBadRequest, gin.H{"error": "Description cannot be empty"})
return
}
exists, err := db.UserExists(userId) exists, err := db.UserExists(userId)
if err != nil { if err != nil {
log.Printf(ErrCheckingUserExist, err) log.Printf(ErrCheckingUserExist, err)
@@ -661,7 +606,6 @@ func start(ctx context.Context, config *ServerConfig) {
router.DELETE("/api/user/:userId/allowance/:allowanceId", deleteUserAllowance) router.DELETE("/api/user/:userId/allowance/:allowanceId", deleteUserAllowance)
router.PUT("/api/user/:userId/allowance/:allowanceId", putUserAllowance) router.PUT("/api/user/:userId/allowance/:allowanceId", putUserAllowance)
router.POST("/api/user/:userId/allowance/:allowanceId/complete", completeAllowance) router.POST("/api/user/:userId/allowance/:allowanceId/complete", completeAllowance)
router.POST("/api/user/:userId/allowance/:allowanceId/add", addToAllowance)
router.POST("/api/tasks", createTask) router.POST("/api/tasks", createTask)
router.GET("/api/tasks", getTasks) router.GET("/api/tasks", getTasks)
router.GET("/api/task/:taskId", getTask) router.GET("/api/task/:taskId", getTask)

View File

@@ -2,7 +2,7 @@ create table users
( (
id integer primary key, id integer primary key,
name text not null, name text not null,
weight real not null default 10.0, weight real not null default 0.0,
balance integer not null default 0 balance integer not null default 0
) strict; ) strict;

View File

@@ -1,2 +1,2 @@
alter table allowances alter table allowances
add column colour integer; add column colour integer not null;

View File

@@ -1 +0,0 @@
update users set weight = 10.0 where weight = 0.0;

View File

@@ -1,2 +0,0 @@
alter table history
add column description text;

File diff suppressed because it is too large Load Diff

View File

@@ -47,7 +47,6 @@
"@angular/cli": "^19.0.0", "@angular/cli": "^19.0.0",
"@angular/compiler-cli": "^19.0.0", "@angular/compiler-cli": "^19.0.0",
"@angular/language-service": "^19.0.0", "@angular/language-service": "^19.0.0",
"@capacitor/assets": "^3.0.5",
"@capacitor/cli": "7.2.0", "@capacitor/cli": "7.2.0",
"@ionic/angular-toolkit": "^12.0.0", "@ionic/angular-toolkit": "^12.0.0",
"@types/jasmine": "~5.1.0", "@types/jasmine": "~5.1.0",

View File

@@ -11,6 +11,7 @@ const routes: Routes = [
path: '', path: '',
loadChildren: () => import('./pages/tabs/tabs.module').then(m => m.TabsPageModule) loadChildren: () => import('./pages/tabs/tabs.module').then(m => m.TabsPageModule)
}, },
]; ];
@NgModule({ @NgModule({
imports: [ imports: [

View File

@@ -1,5 +0,0 @@
export interface History {
timestamp: string;
allowance: number;
description: string;
}

View File

@@ -1,17 +0,0 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AddAllowancePage } from './add-allowance.page';
const routes: Routes = [
{
path: '',
component: AddAllowancePage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class AddAllowancePageRoutingModule {}

View File

@@ -1,23 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { AddAllowancePageRoutingModule } from './add-allowance-routing.module';
import { AddAllowancePage } from './add-allowance.page';
import { MatIconModule } from '@angular/material/icon';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
AddAllowancePageRoutingModule,
ReactiveFormsModule,
MatIconModule
],
declarations: [AddAllowancePage]
})
export class AddAllowancePageModule {}

View File

@@ -1,27 +0,0 @@
<ion-header [translucent]="true">
<ion-toolbar>
<div class="toolbar">
<div class="icon" (click)="navigateBack()">
<mat-icon>arrow_back</mat-icon>
</div>
<ion-title *ngIf="isAddMode && goalId == 0">Add to Allowance</ion-title>
<ion-title *ngIf="isAddMode && goalId != 0">Add to Goal</ion-title>
<ion-title *ngIf="!isAddMode">Spend Allowance</ion-title>
</div>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<form [formGroup]="form">
<label>Amount</label>
<input id="amount" type="number" placeholder="0.00" name="price" min="0" value="0" step="0.01" formControlName="amount"/>
<label>Description</label>
<input id="description" type="text" formControlName="description"/>
<button type="button" [disabled]="!form.valid" (click)="changeAllowance()">
<span *ngIf="isAddMode">Add</span>
<span *ngIf="!isAddMode">Spend</span>
</button>
</form>
</ion-content>

View File

@@ -1,40 +0,0 @@
.toolbar {
display: flex;
align-items: center;
}
.icon {
margin-left: 5px;
}
form {
height: 100%;
}
form,
.item {
display: flex;
flex-direction: column;
align-items: center;
}
label {
color: var(--ion-color-primary);
margin-top: 25px;
margin-bottom: 10px;
}
button {
background-color: var(--ion-color-primary);
border-radius: 5px;
color: white;
padding: 10px;
width: 250px;
margin-top: auto;
margin-bottom: 50px;
}
button:disabled,
button[disabled]{
opacity: 0.5;
}

View File

@@ -1,17 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AddAllowancePage } from './add-allowance.page';
describe('AddAllowancePage', () => {
let component: AddAllowancePage;
let fixture: ComponentFixture<AddAllowancePage>;
beforeEach(() => {
fixture = TestBed.createComponent(AddAllowancePage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@@ -1,51 +0,0 @@
import { Location } from '@angular/common';
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { AllowanceService } from 'src/app/services/allowance.service';
@Component({
selector: 'app-add-allowance',
templateUrl: './add-allowance.page.html',
styleUrls: ['./add-allowance.page.scss'],
standalone: false,
})
export class AddAllowancePage {
public form: FormGroup;
public goalId: number;
public userId: number;
public isAddMode = true;
// Marcus' first comment
// b ........a`.OK ø¶Ópppppppp--P09OP
constructor(
private allowanceService: AllowanceService,
private route: ActivatedRoute,
private formBuilder: FormBuilder,
private router: Router,
private location: Location
) {
this.userId = this.route.snapshot.params['id'];
this.goalId = this.route.snapshot.params['goalId'];
this.form = this.formBuilder.group({
amount: ['', Validators.required],
description: ['', Validators.required]
});
}
changeAllowance() {
this.allowanceService.addOrSpendAllowance(
this.goalId,
this.userId,
this.form.value.amount,
this.form.value.description
);
this.router.navigate(['/tabs/allowance', this.userId]);
}
navigateBack() {
this.location.back();
}
}

View File

@@ -1,17 +0,0 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SpendllowancePage } from './spend-allowance.page';
const routes: Routes = [
{
path: '',
component: SpendllowancePage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class SpendAllowancePageRoutingModule {}

View File

@@ -1,22 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { SpendAllowancePageRoutingModule } from './spend-allowance-routing.module';
import { SpendllowancePage } from './spend-allowance.page';
import { MatIconModule } from '@angular/material/icon';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
SpendAllowancePageRoutingModule,
ReactiveFormsModule,
MatIconModule
],
declarations: [SpendllowancePage]
})
export class SpendAllowancePageModule {}

View File

@@ -1,52 +0,0 @@
import { Location } from '@angular/common';
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { AllowanceService } from 'src/app/services/allowance.service';
@Component({
selector: 'app-spend-allowance',
templateUrl: './add-allowance.page.html',
styleUrls: ['./add-allowance.page.scss'],
standalone: false,
})
export class SpendllowancePage {
public form: FormGroup;
public goalId: number;
public userId: number;
public isAddMode = false;
constructor(
private allowanceService: AllowanceService,
private route: ActivatedRoute,
private formBuilder: FormBuilder,
private router: Router,
private location: Location
) {
this.userId = this.route.snapshot.params['id'];
this.goalId = this.route.snapshot.params['goalId'];
this.form = this.formBuilder.group({
amount: ['', Validators.required],
description: ['', Validators.required]
});
this.allowanceService.getAllowanceById(this.goalId, this.userId).subscribe(allowance => {
this.form.controls['amount'].addValidators([Validators.max(allowance.progress)]);
});
}
changeAllowance() {
this.allowanceService.addOrSpendAllowance(
this.goalId,
this.userId,
-this.form.value.amount,
this.form.value.description
);
this.router.navigate(['/tabs/allowance', this.userId]);
}
navigateBack() {
this.location.back();
}
}

View File

@@ -6,22 +6,6 @@ const routes: Routes = [
{ {
path: ':id', path: ':id',
component: AllowancePage, component: AllowancePage,
},
{
path: ':id/add',
loadChildren: () => import('../edit-allowance/edit-allowance.module').then(m => m.EditAllowancePageModule)
},
{
path: ':id/edit/:goalId',
loadChildren: () => import('../edit-allowance/edit-allowance.module').then(m => m.EditAllowancePageModule)
},
{
path: ':id/increase/:goalId',
loadChildren: () => import('../add-allowance/add-allowance.module').then(m => m.AddAllowancePageModule)
},
{
path: ':id/spend/:goalId',
loadChildren: () => import('../add-allowance/spend-allowance.module').then(m => m.SpendAllowancePageModule)
} }
]; ];

View File

@@ -7,15 +7,13 @@ import { AllowancePage } from './allowance.page';
import { AllowancePageRoutingModule } from './allowance-routing.module'; import { AllowancePageRoutingModule } from './allowance-routing.module';
import { AllowanceService } from 'src/app/services/allowance.service'; import { AllowanceService } from 'src/app/services/allowance.service';
import { provideHttpClient } from '@angular/common/http'; import { provideHttpClient } from '@angular/common/http';
import { MatIconModule } from '@angular/material/icon';
@NgModule({ @NgModule({
imports: [ imports: [
IonicModule, IonicModule,
CommonModule, CommonModule,
FormsModule, FormsModule,
AllowancePageRoutingModule, AllowancePageRoutingModule
MatIconModule
], ],
declarations: [AllowancePage], declarations: [AllowancePage],
providers: [ providers: [

View File

@@ -1,70 +1,37 @@
<ion-header [translucent]="true" class="ion-no-border"> <ion-header [translucent]="true" class="ion-no-border">
<ion-toolbar> <ion-toolbar>
<div class="toolbar"> <ion-title>
<ion-title> Allowance
Allowance </ion-title>
</ion-title>
<button class="top-add-button" (click)="createAllowance()">Add Goal</button>
</div>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content>
<div class="content" *ngIf="allowance$ | async as allowance"> <div class="content">
<div class="bar"> <div class="bar"></div>
<div class="distribution">Allowance distribution</div>
<div class="allowance-bar">
<span
*ngFor="let goal of allowance"
class="partition"
[style.--partition-color]="goal.colour"
[style.width.%]="getPartitionSize(goal, allowance)"
></span>
</div>
<div class="legend">
<div class="legend-item" [style.--legend-color]="goal.colour" *ngFor="let goal of allowance">
<div class="circle"></div>
<div class="title">{{ goal.name }}</div>
</div>
</div>
</div>
<div <div
class="goal" class="goal"
[style.--used-color]="goal.colour" [ngClass]="{'main-color': goal.id ===0}"
[ngClass]="{'other-goals': goal.id !== 0}" *ngFor="let goal of allowance$ | async"
*ngFor="let goal of allowance"
> >
<div class="main" *ngIf="goal.id === 0; else other_goal"> <div class="main" *ngIf="goal.id === 0; else other_goal">
<div class="title"> <div class="name">Main Allowance</div>
<div class="name">Main Allowance</div>
<div class="icon" (click)="updateAllowance(goal.id)">
<mat-icon>settings</mat-icon>
</div>
</div>
<div class="progress">{{ goal.progress }} SP</div> <div class="progress">{{ goal.progress }} SP</div>
<div class="buttons"> <div class="buttons">
<button class="add-button" (click)="addAllowance(goal.id)">Add</button> <button class="add-button">Add</button>
<!-- <button class="move-button">Move</button> --> <!-- <button class="move-button">Move</button> -->
<button class="spend-button" (click)="spendAllowance(goal.id)">Spend</button> <button class="spend-button">Spend</button>
</div> </div>
</div> </div>
<ng-template #other_goal> <ng-template #other_goal>
<div class="color-wrapper"> <div class="color">
<div> <div class="name">{{ goal.name }}</div>
<div class="title"> <div class="progress">{{ goal.progress }} / {{ goal.target }} SP</div>
<div class="name">{{ goal.name }}</div> <div class="buttons">
<div class="icon" (click)="updateAllowance(goal.id)"> <button class="add-button">Add</button>
<mat-icon>settings</mat-icon> <!-- <button class="move-button">Move</button> -->
</div> <button class="spend-button" [disabled]="!canFinishGoal(goal)">Finish goal</button>
</div>
<div class="progress">{{ goal.progress }} / {{ goal.target }} SP</div>
<div class="buttons">
<button class="add-button" (click)="addAllowance(goal.id)">Add</button>
<!-- <button class="move-button">Move</button> -->
<button class="spend-button" [disabled]="!canFinishGoal(goal)" (click)="completeGoal(goal.id)">Finish goal</button>
</div>
</div> </div>
<div class="color" [style.--background]="hexToRgb(goal.colour)" [style.width.%]="getPercentage(goal)"></div>
</div> </div>
</ng-template> </ng-template>
</div> </div>

View File

@@ -23,32 +23,17 @@
.bar { .bar {
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
margin-left: 20px;
} }
.distribution { .main-color {
color: var(--ion-color-primary); --used-color: var(--ion-color-primary);
} }
.allowance-bar { .other-color {
display: flex; --used-color: rgb(85, 26, 56);
width: 95%;
height: 15px !important;
border-radius: 15px;
background-color: var(--font-color);
overflow: hidden;
} }
.partition { .buttons {
--partition-color: white;
background-color: var(--partition-color);
width: 25%;
height: 100%;
//border-radius: 15px;
}
.buttons,
.title {
display: flex; display: flex;
gap: 10px; gap: 10px;
} }
@@ -58,10 +43,11 @@ button {
padding-inline: 30px; padding-inline: 30px;
border-radius: 10px; border-radius: 10px;
color: white; color: white;
font-size: 16px;
} }
button:disabled, button:disabled,
button[disabled] { button[disabled]{
opacity: 0.5; opacity: 0.5;
} }
@@ -75,65 +61,4 @@ button[disabled] {
.spend-button { .spend-button {
background-color: var(--negative-amount-color); background-color: var(--negative-amount-color);
}
.icon {
margin-left: auto;
color: var(--font-color);
}
.color-wrapper {
padding: 10px;
border-radius: 9px;
position: relative;
z-index: 1;
}
.color {
--background: rgba(0, 0, 0, 0.3);
background-color: var(--background);
border-radius: 9px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: -1;
}
.other-goals {
padding: unset;
}
.legend {
width: 95%;
display: flex;
font-size: 13px;
gap: 8px;
margin-top: 5px;
flex-wrap: wrap;
}
.legend-item {
display: flex;
--legend-color: white;
color: var(--legend-color);
align-items: center;
}
.circle {
width: 12px;
height: 12px;
background-color: var(--legend-color);
border-radius: 20px;
margin-right: 2px;
}
.toolbar {
display: flex;
}
.top-add-button {
background-color: var(--ion-color-primary);
margin-right: 15px;
padding-inline: 15px;
} }

View File

@@ -1,10 +1,8 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { BehaviorSubject } from 'rxjs'; import { BehaviorSubject } from 'rxjs';
import { Allowance } from 'src/app/models/allowance'; import { Allowance } from 'src/app/models/allowance';
import { AllowanceService } from 'src/app/services/allowance.service'; import { AllowanceService } from 'src/app/services/allowance.service';
import hexRgb from 'hex-rgb';
import { ViewWillEnter } from '@ionic/angular';
@Component({ @Component({
selector: 'app-allowance', selector: 'app-allowance',
@@ -12,75 +10,41 @@ import { ViewWillEnter } from '@ionic/angular';
styleUrls: ['allowance.page.scss'], styleUrls: ['allowance.page.scss'],
standalone: false, standalone: false,
}) })
export class AllowancePage implements ViewWillEnter { export class AllowancePage {
private id: number; private id: number;
// Move to add/edit page later
private possibleColors: Array<string> = [
'#6199D9',
'#D98B61',
'#DBC307',
'#13DEB5',
'#7DCB7D',
'#CF1DBD',
'#F53311',
'#2F00FF',
'#098B0D',
'#1BC2E8'
];
public allowance$: BehaviorSubject<Array<Allowance>> = new BehaviorSubject<Array<Allowance>>([]); public allowance$: BehaviorSubject<Array<Allowance>> = new BehaviorSubject<Array<Allowance>>([]);
constructor( constructor(
private route: ActivatedRoute, private route: ActivatedRoute,
private router: Router,
private allowanceService: AllowanceService private allowanceService: AllowanceService
) { ) {
this.id = this.route.snapshot.params['id']; this.id = this.route.snapshot.params['id'];
this.getAllowance(); this.getAllowance();
} }
ionViewWillEnter(): void {
this.getAllowance();
}
getAllowance() { getAllowance() {
setTimeout(() => { setTimeout(() => {
this.allowanceService.getAllowanceList(this.id).subscribe(allowance => { this.allowanceService.getAllowanceList(this.id).subscribe(allowance => {
allowance[0].colour = '#9C4BE4'; console.log('Allowance list: ', allowance);
allowance[0].name = 'Main Allowance';
this.allowance$.next(allowance); this.allowance$.next(allowance);
}) })
}, 50); }, 10);
} }
canFinishGoal(allowance: Allowance): boolean { canFinishGoal(allowance: Allowance): boolean {
return allowance.progress >= allowance.target; return allowance.progress >= allowance.target;
} }
hexToRgb(color: string) {
return hexRgb(color, { alpha: 0.3, format: 'css' })
}
getPercentage(allowance: Allowance): number {
return allowance.progress / allowance.target * 100;
}
// Returns number in percent
getPartitionSize(goal: Allowance, allowanceList: Array<Allowance>): number {
let allowanceTotal = 0;
for (let allowance of allowanceList) {
allowanceTotal += allowance.progress;
}
if (allowanceTotal === 0) {
return 0;
}
return goal.progress / allowanceTotal * 100;
}
createAllowance() {
this.router.navigate(['add'], { relativeTo: this.route });
}
updateAllowance(id: number) {
this.router.navigate(['edit', id], { relativeTo: this.route });
}
completeGoal(goalId: number) {
this.allowanceService.completeGoal(goalId, this.id);
this.getAllowance();
}
addAllowance(id: number) {
this.router.navigate(['increase', id], { relativeTo: this.route });
}
spendAllowance(id: number) {
this.router.navigate(['spend', id], { relativeTo: this.route });
}
} }

View File

@@ -1,17 +0,0 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { EditAllowancePage } from './edit-allowance.page';
const routes: Routes = [
{
path: '',
component: EditAllowancePage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class EditAllowancePageRoutingModule {}

View File

@@ -1,23 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { EditAllowancePageRoutingModule } from './edit-allowance-routing.module';
import { EditAllowancePage } from './edit-allowance.page';
import { MatIconModule } from '@angular/material/icon';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
EditAllowancePageRoutingModule,
ReactiveFormsModule,
MatIconModule
],
declarations: [EditAllowancePage]
})
export class EditAllowancePageModule {}

View File

@@ -1,47 +0,0 @@
<ion-header [translucent]="true">
<ion-toolbar>
<div class="toolbar">
<div class="icon" (click)="navigateBack()">
<mat-icon>arrow_back</mat-icon>
</div>
<ion-title *ngIf="isAddMode">Create Goal</ion-title>
<ion-title *ngIf="!isAddMode && goalId != 0">Edit Goal</ion-title>
<ion-title *ngIf="!isAddMode && goalId == 0">Edit Allowance</ion-title>
<button
*ngIf="!isAddMode && goalId !=0"
class="remove-button"
(click)="deleteAllowance()"
>Delete Goal</button>
</div>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<form [formGroup]="form">
<div class="item" *ngIf="isAddMode || goalId != 0">
<label>Goal Name</label>
<input id="name" type="text" formControlName="name"/>
</div>
<div class="item" *ngIf="isAddMode || goalId != 0">
<label>Target</label>
<input id="target" type="number" placeholder="0.00" name="price" min="0" value="0" step="0.01" formControlName="target"/>
</div>
<label>Weight</label>
<input id="weight" type="number" placeholder="0.00" name="price" min="0" value="0" step="0.01" formControlName="weight"/>
<div class="item" *ngIf="isAddMode || goalId != 0">
<label>Colour</label>
<select formControlName="color">
<option *ngFor="let color of possibleColors" [value]="color" [style.--background]="color">{{color}}</option>
</select>
</div>
<button type="button" [disabled]="!form.valid" (click)="submit()">
<span *ngIf="isAddMode">Add Goal</span>
<span *ngIf="!isAddMode && goalId != 0">Update Goal</span>
<span *ngIf="!isAddMode && goalId == 0">Update Allowance</span>
</button>
</form>
</ion-content>

View File

@@ -1,61 +0,0 @@
.toolbar {
display: flex;
align-items: center;
}
.remove-button {
background-color: var(--ion-color-primary);
margin-right: 15px;
width: 100px;
margin-bottom: 0;
}
form {
height: 100%;
}
form,
.item {
display: flex;
flex-direction: column;
align-items: center;
}
label {
color: var(--ion-color-primary);
margin-top: 25px;
margin-bottom: 10px;
}
input,
select {
border: 1px solid var(--ion-color-primary);
border-radius: 5px;
width: 250px;
}
option {
--background: white;
background-color: var(--background);
color: var(--background);
font-family: var(--ion-font-family);
}
button {
background-color: var(--ion-color-primary);
border-radius: 5px;
color: white;
padding: 10px;
width: 250px;
margin-top: auto;
margin-bottom: 50px;
}
button:disabled,
button[disabled]{
opacity: 0.5;
}
.icon {
margin-left: 5px;
}

View File

@@ -1,17 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { EditAllowancePage } from './edit-allowance.page';
describe('EditAllowancePage', () => {
let component: EditAllowancePage;
let fixture: ComponentFixture<EditAllowancePage>;
beforeEach(() => {
fixture = TestBed.createComponent(EditAllowancePage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@@ -1,107 +0,0 @@
import { Location } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { AllowanceService } from 'src/app/services/allowance.service';
@Component({
selector: 'app-edit-allowance',
templateUrl: './edit-allowance.page.html',
styleUrls: ['./edit-allowance.page.scss'],
standalone: false
})
export class EditAllowancePage implements OnInit {
public form: FormGroup;
public goalId: number;
public userId: number;
public isAddMode: boolean;
public possibleColors: Array<string> = [
'#6199D9',
'#D98B61',
'#DBC307',
'#13DEB5',
'#7DCB7D',
'#CF1DBD',
'#F53311',
'#2F00FF',
'#098B0D',
'#1BC2E8'
];
constructor(
private route: ActivatedRoute,
private formBuilder: FormBuilder,
private allowanceService: AllowanceService,
private router: Router,
private location: Location
) {
this.userId = this.route.snapshot.params['id'];
this.goalId = this.route.snapshot.params['goalId'];
this.isAddMode = !this.goalId;
this.allowanceService.getAllowanceList(this.userId).subscribe((list) => {
for (let allowance of list) {
this.possibleColors = this.possibleColors.filter(color => color !== allowance.colour);
if (!this.isAddMode && +this.goalId === allowance.id) {
this.possibleColors.unshift(allowance.colour);
}
}
});
this.form = this.formBuilder.group({
name: ['', Validators.required],
target: ['', Validators.required],
weight: ['', Validators.required],
color: ['', Validators.required]
});
}
ngOnInit() {
if (!this.isAddMode) {
this.allowanceService.getAllowanceById(this.goalId, this.userId).subscribe((allowance) => {
if (+this.goalId === 0) {
this.form.setValue({
name: 'Main Allowance',
target: 0,
weight: allowance.weight,
color: '#9C4BE4'
});
} else {
this.form.setValue({
name: allowance.name,
target: allowance.target,
weight: allowance.weight,
color: allowance.colour
});
}
});
}
}
submit() {
const formValue = this.form.value;
const allowance = {
name: formValue.name,
target: formValue.target,
weight: formValue.weight,
colour: formValue.color,
};
if (this.isAddMode) {
this.allowanceService.createAllowance(allowance, this.userId);
} else {
this.allowanceService.updateAllowance(allowance, this.goalId, this.userId);
}
this.router.navigate(['/tabs/allowance', this.userId]);
}
deleteAllowance() {
this.allowanceService.deleteAllowance(this.goalId, this.userId);
this.router.navigate(['/tabs/allowance', this.userId]);
}
navigateBack() {
this.location.back();
}
}

View File

@@ -7,7 +7,6 @@ import { IonicModule } from '@ionic/angular';
import { EditTaskPageRoutingModule } from './edit-task-routing.module'; import { EditTaskPageRoutingModule } from './edit-task-routing.module';
import { EditTaskPage } from './edit-task.page'; import { EditTaskPage } from './edit-task.page';
import { MatIconModule } from '@angular/material/icon';
@NgModule({ @NgModule({
imports: [ imports: [
@@ -15,8 +14,7 @@ import { MatIconModule } from '@angular/material/icon';
FormsModule, FormsModule,
IonicModule, IonicModule,
EditTaskPageRoutingModule, EditTaskPageRoutingModule,
ReactiveFormsModule, ReactiveFormsModule
MatIconModule
], ],
declarations: [EditTaskPage] declarations: [EditTaskPage]
}) })

View File

@@ -1,9 +1,6 @@
<ion-header [translucent]="true"> <ion-header [translucent]="true">
<ion-toolbar> <ion-toolbar>
<div class="toolbar"> <div class="toolbar">
<div class="icon" (click)="navigateBack()">
<mat-icon>arrow_back</mat-icon>
</div>
<ion-title *ngIf="isAddMode">Create Task</ion-title> <ion-title *ngIf="isAddMode">Create Task</ion-title>
<ion-title *ngIf="!isAddMode">Edit Task</ion-title> <ion-title *ngIf="!isAddMode">Edit Task</ion-title>
<button <button
@@ -21,7 +18,7 @@
<input id="name" type="text" formControlName="name"/> <input id="name" type="text" formControlName="name"/>
<label>Reward</label> <label>Reward</label>
<input id="reward" type="number" placeholder="0.00" name="price" min="0" value="0" step="0.01" formControlName="reward"/> <input id="name" type="number" placeholder="0.00" name="price" min="0" value="0" step="0.01" formControlName="reward"/>
<label>Assigned</label> <label>Assigned</label>
<select formControlName="assigned"> <select formControlName="assigned">

View File

@@ -1,12 +1,11 @@
.toolbar { .toolbar {
display: flex; display: flex;
align-items: center;
} }
.remove-button { .remove-button {
background-color: var(--ion-color-primary); background-color: var(--ion-color-primary);
margin-right: 15px; margin-right: 15px;
width: 95px; width: 85px;
margin-bottom: 0; margin-bottom: 0;
} }
@@ -43,8 +42,4 @@ button {
button:disabled, button:disabled,
button[disabled]{ button[disabled]{
opacity: 0.5; opacity: 0.5;
}
.icon {
margin-left: 5px;
} }

View File

@@ -23,8 +23,7 @@ export class EditTaskPage implements OnInit {
private formBuilder: FormBuilder, private formBuilder: FormBuilder,
private taskService: TaskService, private taskService: TaskService,
private userService: UserService, private userService: UserService,
private router: Router, private router: Router
private location: Location
) { ) {
this.id = this.route.snapshot.params['id']; this.id = this.route.snapshot.params['id'];
this.isAddMode = !this.id; this.isAddMode = !this.id;
@@ -78,8 +77,4 @@ export class EditTaskPage implements OnInit {
this.taskService.deleteTask(this.id); this.taskService.deleteTask(this.id);
this.router.navigate(['/tabs/tasks']); this.router.navigate(['/tabs/tasks']);
} }
navigateBack() {
this.location.back();
}
} }

View File

@@ -5,8 +5,6 @@ import { FormsModule } from '@angular/forms';
import { HistoryPage } from './history.page'; import { HistoryPage } from './history.page';
import { HistoryPageRoutingModule } from './history-routing.module'; import { HistoryPageRoutingModule } from './history-routing.module';
import { provideHttpClient } from '@angular/common/http';
import { HistoryService } from 'src/app/services/history.service';
@NgModule({ @NgModule({
imports: [ imports: [
@@ -15,10 +13,6 @@ import { HistoryService } from 'src/app/services/history.service';
FormsModule, FormsModule,
HistoryPageRoutingModule HistoryPageRoutingModule
], ],
declarations: [HistoryPage], declarations: [HistoryPage]
providers: [
provideHttpClient(),
HistoryService
]
}) })
export class HistoryPageModule {} export class HistoryPageModule {}

View File

@@ -7,14 +7,5 @@
</ion-header> </ion-header>
<ion-content> <ion-content>
<div class="item" *ngFor="let history of history$ | async">
<div class="left">
<div class="date">{{ history.timestamp | date: 'yyyy-MM-dd' }}</div>
<div class="description">{{ history.description }}</div>
</div>
<div
class="amount"
[ngClass]="{ 'negative': history.allowance < 0 }"
>{{ history.allowance }} SP</div>
</div>
</ion-content> </ion-content>

View File

@@ -1,29 +0,0 @@
.item {
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid var(--line-color);
padding: 8px;
}
.left {
width: 70%;
}
.date {
color: var(--line-color);
}
.description {
color: var(--font-color);
}
.amount {
margin-left: auto;
font-size: 22px;
color: var(--positive-amount-color);
}
.negative {
color: var(--negative-amount-color);
}

View File

@@ -1,9 +1,4 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ViewWillEnter } from '@ionic/angular';
import { BehaviorSubject } from 'rxjs';
import { History } from 'src/app/models/history';
import { HistoryService } from 'src/app/services/history.service';
@Component({ @Component({
selector: 'app-history', selector: 'app-history',
@@ -11,28 +6,8 @@ import { HistoryService } from 'src/app/services/history.service';
styleUrls: ['history.page.scss'], styleUrls: ['history.page.scss'],
standalone: false, standalone: false,
}) })
export class HistoryPage implements ViewWillEnter { export class HistoryPage {
userId: number;
public history$: BehaviorSubject<Array<History>> = new BehaviorSubject<Array<History>>([]);
constructor( constructor() {}
private route: ActivatedRoute,
private historyService: HistoryService
) {
this.userId = this.route.snapshot.params['id'];
this.getHistory();
}
ionViewWillEnter(): void {
this.getHistory();
}
getHistory() {
setTimeout(() => {
this.historyService.getHistoryList(this.userId).subscribe(history => {
this.history$.next(history);
})
}, 20);
}
} }

View File

@@ -8,7 +8,7 @@ const routes: Routes = [
component: TabsPage, component: TabsPage,
children: [ children: [
{ {
path: 'history/:id', path: 'history',
loadChildren: () => import('../history/history.module').then(m => m.HistoryPageModule) loadChildren: () => import('../history/history.module').then(m => m.HistoryPageModule)
}, },
{ {

View File

@@ -1,6 +1,6 @@
<ion-tabs> <ion-tabs>
<ion-tab-bar slot="bottom"> <ion-tab-bar slot="bottom">
<ion-tab-button [tab]="historyTab" [href]="historyNav"> <ion-tab-button tab="history" href="/tabs/history">
<mat-icon>history</mat-icon> <mat-icon>history</mat-icon>
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="allowance" href="/tabs/allowance"> <ion-tab-button tab="allowance" href="/tabs/allowance">

View File

@@ -1,5 +1,4 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { StorageService } from 'src/app/services/storage.service';
@Component({ @Component({
selector: 'app-tabs', selector: 'app-tabs',
@@ -8,16 +7,6 @@ import { StorageService } from 'src/app/services/storage.service';
standalone: false, standalone: false,
}) })
export class TabsPage { export class TabsPage {
historyNav = ''; constructor() {}
historyTab = '';
constructor(private storageService: StorageService) {
this.storageService.getCurrentUserId().then((userId) => {
if (userId !== undefined && userId !== null) {
this.historyNav = `/tabs/history/${userId}`;
this.historyTab = `history/${userId}`;
}
});
}
} }

View File

@@ -11,15 +11,14 @@
<ion-content> <ion-content>
<div class="content"> <div class="content">
<!-- <div class="icon"> <div class="icon">
<mat-icon>filter_alt</mat-icon> <mat-icon>filter_alt</mat-icon>
</div> --> </div>
<div class="list"> <div class="list">
<div class="task" *ngFor="let task of tasks$ | async"> <div class="task" *ngFor="let task of tasks$ | async">
<button (click)="completeTask(task.id)">Done</button> <button (click)="completeTask(task.id)">Done</button>
<div (click)="updateTask(task.id)" class="item"> <div (click)="updateTask(task.id)" class="item">
<div class="name">{{ task.name }}</div> <div class="name">{{ task.name }}</div>
<div class="assigned">{{ usernames[task.assigned ? task.assigned : 0] }}</div>
<div <div
class="reward" class="reward"
[ngClass]="{ 'negative': task.reward < 0 }" [ngClass]="{ 'negative': task.reward < 0 }"

View File

@@ -67,10 +67,4 @@ button {
background-color: var(--ion-color-primary); background-color: var(--ion-color-primary);
margin-right: 15px; margin-right: 15px;
width: 75px; width: 75px;
}
.assigned {
color: var(--line-color);
margin-left: 3px;
font-size: 12px;
} }

View File

@@ -14,7 +14,6 @@ import { ViewWillEnter } from '@ionic/angular';
}) })
export class TasksPage implements ViewWillEnter { export class TasksPage implements ViewWillEnter {
public tasks$: BehaviorSubject<Array<Task>> = new BehaviorSubject<Array<Task>>([]); public tasks$: BehaviorSubject<Array<Task>> = new BehaviorSubject<Array<Task>>([]);
public usernames = ['', 'See', 'Huffle']
constructor( constructor(
private taskService: TaskService, private taskService: TaskService,
@@ -33,7 +32,7 @@ export class TasksPage implements ViewWillEnter {
this.taskService.getTaskList().subscribe(tasks => { this.taskService.getTaskList().subscribe(tasks => {
this.tasks$.next(tasks); this.tasks$.next(tasks);
}); });
}, 50); }, 10);
} }
createTask() { createTask() {

View File

@@ -7,35 +7,11 @@ import { Allowance } from '../models/allowance';
providedIn: 'root' providedIn: 'root'
}) })
export class AllowanceService { export class AllowanceService {
private url = 'https://allowanceplanner.seeseepuff.be/api'; private url = 'http://localhost:8080/api';
constructor(private http: HttpClient) {} constructor(private http: HttpClient) {}
getAllowanceList(userId: number): Observable<Array<Allowance>> { getAllowanceList(userId: number): Observable<Array<Allowance>> {
return this.http.get<Allowance[]>(`${this.url}/user/${userId}/allowance`); return this.http.get<Allowance[]>(`${this.url}/user/${userId}/allowance`);
} }
getAllowanceById(allowanceId: number, userId: number): Observable<Allowance> {
return this.http.get<Allowance>(`${this.url}/user/${userId}/allowance/${allowanceId}`);
}
createAllowance(allowance: Partial<Allowance>, userId: number) {
this.http.post(`${this.url}/user/${userId}/allowance`, allowance).subscribe();
}
updateAllowance(allowance: Partial<Allowance>, allowanceId: number, userId: number) {
this.http.put(`${this.url}/user/${userId}/allowance/${allowanceId}`, allowance).subscribe();
}
deleteAllowance(allowanceId: number, userId: number) {
this.http.delete(`${this.url}/user/${userId}/allowance/${allowanceId}`).subscribe();
}
completeGoal(goalId: number, userId: number) {
this.http.post(`${this.url}/user/${userId}/allowance/${goalId}/complete`, {}).subscribe();
}
addOrSpendAllowance(goalId: number, userId: number, amount: number, description: string) {
this.http.post(`${this.url}/user/${userId}/allowance/${goalId}/add`, { amount, description }).subscribe();
}
} }

View File

@@ -1,17 +0,0 @@
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { History } from '../models/history';
@Injectable({
providedIn: 'root'
})
export class HistoryService {
private url = 'https://allowanceplanner.seeseepuff.be/api';
constructor(private http: HttpClient) {}
getHistoryList(userId: number): Observable<Array<History>> {
return this.http.get<History[]>(`${this.url}/user/${userId}/history`);
}
}

View File

@@ -7,7 +7,7 @@ import { Task } from '../models/task';
providedIn: 'root' providedIn: 'root'
}) })
export class TaskService { export class TaskService {
private url = 'https://allowanceplanner.seeseepuff.be/api'; private url = 'http://localhost:8080/api';
constructor(private http: HttpClient) {} constructor(private http: HttpClient) {}

View File

@@ -7,7 +7,7 @@ import { User } from '../models/user';
providedIn: 'root', providedIn: 'root',
}) })
export class UserService { export class UserService {
private url = 'https://allowanceplanner.seeseepuff.be/api'; private url = 'http://localhost:8080/api';
constructor(private http: HttpClient) {} constructor(private http: HttpClient) {}
getUserList(): Observable<Array<User>> { getUserList(): Observable<Array<User>> {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 163 KiB

View File

@@ -42,8 +42,4 @@ ion-title {
ion-header { ion-header {
border-bottom: 1px solid var(--line-color); border-bottom: 1px solid var(--line-color);
}
button {
font-size: 16px;
} }

View File

@@ -1,27 +0,0 @@
{
"name": "frontend",
"lockfileVersion": 3,
"requires": true,
"packages": {
"node_modules/@ionic/pwa-elements": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/@ionic/pwa-elements/-/pwa-elements-3.3.0.tgz",
"integrity": "sha512-vbykpxd2nGRlA67AnqDwsiVf8PUmInLyi6lQdnPDjeiML1WZa0CPe6r632nGDV9PTi+sWNde9Xexg9SD6Pwyqw==",
"engines": {
"node": ">=16.0.0",
"npm": ">=8.0.0"
}
},
"node_modules/hex-rgb": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/hex-rgb/-/hex-rgb-5.0.0.tgz",
"integrity": "sha512-NQO+lgVUCtHxZ792FodgW0zflK+ozS9X9dwGp9XvvmPlH7pyxd588cn24TD3rmPm/N0AIRXF10Otah8yKqGw4w==",
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
}
}
}

View File

@@ -1,21 +0,0 @@
MIT License
Copyright (c) 2017 Ionic
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

File diff suppressed because it is too large Load Diff

View File

@@ -1,2 +0,0 @@
'use strict';

View File

@@ -1,26 +0,0 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-d7f36e37.js');
/*
Stencil Client Patch Browser v3.4.0 | MIT Licensed | https://stenciljs.com
*/
const patchBrowser = () => {
const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('ionicpwaelements.cjs.js', document.baseURI).href));
const opts = {};
// TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
if (importMeta !== '') {
opts.resourcesUrl = new URL('.', importMeta).href;
// TODO(STENCIL-661): Remove code related to the dynamic import shim
// TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
}
return index.promiseResolve(opts);
};
patchBrowser().then(options => {
return index.bootstrapLazy([["pwa-camera-modal.cjs",[[1,"pwa-camera-modal",{"facingMode":[1,"facing-mode"],"hidePicker":[4,"hide-picker"],"present":[64],"dismiss":[64]}]]],["pwa-action-sheet.cjs",[[1,"pwa-action-sheet",{"header":[1],"cancelable":[4],"options":[16],"open":[32]}]]],["pwa-toast.cjs",[[1,"pwa-toast",{"message":[1],"duration":[2],"closing":[32]}]]],["pwa-camera.cjs",[[1,"pwa-camera",{"facingMode":[1,"facing-mode"],"handlePhoto":[16],"hidePicker":[4,"hide-picker"],"handleNoDeviceError":[16],"noDevicesText":[1,"no-devices-text"],"noDevicesButtonText":[1,"no-devices-button-text"],"photo":[32],"photoSrc":[32],"showShutterOverlay":[32],"flashIndex":[32],"hasCamera":[32],"rotation":[32],"deviceError":[32]}]]],["pwa-camera-modal-instance.cjs",[[1,"pwa-camera-modal-instance",{"facingMode":[1,"facing-mode"],"hidePicker":[4,"hide-picker"],"noDevicesText":[1,"no-devices-text"],"noDevicesButtonText":[1,"no-devices-button-text"]},[[16,"keyup","handleBackdropKeyUp"]]]]]], options);
});
exports.setNonce = index.setNonce;

View File

@@ -1,22 +0,0 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-d7f36e37.js');
/*
Stencil Client Patch Esm v3.4.0 | MIT Licensed | https://stenciljs.com
*/
const patchEsm = () => {
return index.promiseResolve();
};
const defineCustomElements = (win, options) => {
if (typeof window === 'undefined') return Promise.resolve();
return patchEsm().then(() => {
return index.bootstrapLazy([["pwa-camera-modal.cjs",[[1,"pwa-camera-modal",{"facingMode":[1,"facing-mode"],"hidePicker":[4,"hide-picker"],"present":[64],"dismiss":[64]}]]],["pwa-action-sheet.cjs",[[1,"pwa-action-sheet",{"header":[1],"cancelable":[4],"options":[16],"open":[32]}]]],["pwa-toast.cjs",[[1,"pwa-toast",{"message":[1],"duration":[2],"closing":[32]}]]],["pwa-camera.cjs",[[1,"pwa-camera",{"facingMode":[1,"facing-mode"],"handlePhoto":[16],"hidePicker":[4,"hide-picker"],"handleNoDeviceError":[16],"noDevicesText":[1,"no-devices-text"],"noDevicesButtonText":[1,"no-devices-button-text"],"photo":[32],"photoSrc":[32],"showShutterOverlay":[32],"flashIndex":[32],"hasCamera":[32],"rotation":[32],"deviceError":[32]}]]],["pwa-camera-modal-instance.cjs",[[1,"pwa-camera-modal-instance",{"facingMode":[1,"facing-mode"],"hidePicker":[4,"hide-picker"],"noDevicesText":[1,"no-devices-text"],"noDevicesButtonText":[1,"no-devices-button-text"]},[[16,"keyup","handleBackdropKeyUp"]]]]]], options);
});
};
exports.setNonce = index.setNonce;
exports.defineCustomElements = defineCustomElements;

View File

@@ -1,46 +0,0 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-d7f36e37.js');
const actionSheetCss = ":host{z-index:1000;position:fixed;top:0;left:0;width:100%;height:100%;display:-ms-flexbox;display:flex;contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:-apple-system, BlinkMacSystemFont, \"Helvetica Neue\", \"Roboto\", sans-serif}.wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:rgba(0, 0, 0, 0);-webkit-transition:400ms background-color cubic-bezier(.36,.66,.04,1);transition:400ms background-color cubic-bezier(.36,.66,.04,1)}.wrapper.open{background-color:rgba(0, 0, 0, 0.32)}.title{color:#999;height:23px;line-height:23px;padding-bottom:17px;-webkit-padding-end:16px;padding-inline-end:16px;-webkit-padding-start:16px;padding-inline-start:16px;padding-left:16px;padding-right:16px;padding-top:20px}.content{width:568px;-ms-flex-item-align:end;align-self:flex-end;background-color:#fff;-webkit-transition:400ms -webkit-transform cubic-bezier(.36,.66,.04,1);transition:400ms -webkit-transform cubic-bezier(.36,.66,.04,1);transition:400ms transform cubic-bezier(.36,.66,.04,1);transition:400ms transform cubic-bezier(.36,.66,.04,1), 400ms -webkit-transform cubic-bezier(.36,.66,.04,1);-webkit-transform:translateY(100%);transform:translateY(100%)}.wrapper.open .content{-webkit-transform:translateY(0%);transform:translateY(0%)}@media only screen and (max-width: 568px){.content{width:100%}}.action-sheet-option{cursor:pointer;height:52px;line-height:52px}.action-sheet-button{color:rgb(38, 38, 38);font-size:16px;-webkit-padding-end:16px;padding-inline-end:16px;-webkit-padding-start:16px;padding-inline-start:16px;padding-left:16px;padding-right:16px;padding-top:0px}.action-sheet-button:hover{background-color:#F6F6F6}";
const PWAActionSheet = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.onSelection = index.createEvent(this, "onSelection", 7);
this.header = undefined;
this.cancelable = true;
this.options = [];
this.open = false;
}
componentDidLoad() {
requestAnimationFrame(() => {
this.open = true;
});
}
dismiss() {
if (this.cancelable) {
this.close();
}
}
close() {
this.open = false;
setTimeout(() => {
this.el.parentNode.removeChild(this.el);
}, 500);
}
handleOptionClick(e, i) {
e.stopPropagation();
this.onSelection.emit(i);
this.close();
}
render() {
return (index.h("div", { class: `wrapper${this.open ? ' open' : ''}`, onClick: () => this.dismiss() }, index.h("div", { class: "content" }, index.h("div", { class: "title" }, this.header), this.options.map((option, i) => index.h("div", { class: "action-sheet-option", onClick: (e) => this.handleOptionClick(e, i) }, index.h("div", { class: "action-sheet-button" }, option.title))))));
}
get el() { return index.getElement(this); }
};
PWAActionSheet.style = actionSheetCss;
exports.pwa_action_sheet = PWAActionSheet;

View File

@@ -1,45 +0,0 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-d7f36e37.js');
const cameraModalInstanceCss = ":host{z-index:1000;position:fixed;top:0;left:0;width:100%;height:100%;display:-ms-flexbox;display:flex;contain:strict;--inset-width:600px;--inset-height:600px}.wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:rgba(0, 0, 0, 0.15)}.content{-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, 0.2);box-shadow:0px 0px 5px rgba(0, 0, 0, 0.2);width:var(--inset-width);height:var(--inset-height);max-height:100%}@media only screen and (max-width: 600px){.content{width:100%;height:100%}}";
const PWACameraModal = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.onPhoto = index.createEvent(this, "onPhoto", 7);
this.noDeviceError = index.createEvent(this, "noDeviceError", 7);
this.handlePhoto = async (photo) => {
this.onPhoto.emit(photo);
};
this.handleNoDeviceError = async (photo) => {
this.noDeviceError.emit(photo);
};
this.facingMode = 'user';
this.hidePicker = false;
this.noDevicesText = 'No camera found';
this.noDevicesButtonText = 'Choose image';
}
handleBackdropClick(e) {
if (e.target !== this.el) {
this.onPhoto.emit(null);
}
}
handleComponentClick(e) {
e.stopPropagation();
}
handleBackdropKeyUp(e) {
if (e.key === "Escape") {
this.onPhoto.emit(null);
}
}
render() {
return (index.h("div", { class: "wrapper", onClick: e => this.handleBackdropClick(e) }, index.h("div", { class: "content" }, index.h("pwa-camera", { onClick: e => this.handleComponentClick(e), facingMode: this.facingMode, hidePicker: this.hidePicker, handlePhoto: this.handlePhoto, handleNoDeviceError: this.handleNoDeviceError, noDevicesButtonText: this.noDevicesButtonText, noDevicesText: this.noDevicesText }))));
}
get el() { return index.getElement(this); }
};
PWACameraModal.style = cameraModalInstanceCss;
exports.pwa_camera_modal_instance = PWACameraModal;

View File

@@ -1,47 +0,0 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-d7f36e37.js');
const cameraModalCss = ":host{z-index:1000;position:fixed;top:0;left:0;width:100%;height:100%;display:-ms-flexbox;display:flex;contain:strict}.wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:rgba(0, 0, 0, 0.15)}.content{-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, 0.2);box-shadow:0px 0px 5px rgba(0, 0, 0, 0.2);width:600px;height:600px}";
const PWACameraModal = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.onPhoto = index.createEvent(this, "onPhoto", 7);
this.noDeviceError = index.createEvent(this, "noDeviceError", 7);
this.facingMode = 'user';
this.hidePicker = false;
}
async present() {
const camera = document.createElement('pwa-camera-modal-instance');
camera.facingMode = this.facingMode;
camera.hidePicker = this.hidePicker;
camera.addEventListener('onPhoto', async (e) => {
if (!this._modal) {
return;
}
const photo = e.detail;
this.onPhoto.emit(photo);
});
camera.addEventListener('noDeviceError', async (e) => {
this.noDeviceError.emit(e);
});
document.body.append(camera);
this._modal = camera;
}
async dismiss() {
if (!this._modal) {
return;
}
this._modal && this._modal.parentNode.removeChild(this._modal);
this._modal = null;
}
render() {
return (index.h("div", null));
}
};
PWACameraModal.style = cameraModalCss;
exports.pwa_camera_modal = PWACameraModal;

View File

@@ -1,485 +0,0 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-d7f36e37.js');
/**
* MediaStream ImageCapture polyfill
*
* @license
* Copyright 2018 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
let ImageCapture = window.ImageCapture;
if (typeof ImageCapture === 'undefined') {
ImageCapture = class {
/**
* TODO https://www.w3.org/TR/image-capture/#constructors
*
* @param {MediaStreamTrack} videoStreamTrack - A MediaStreamTrack of the 'video' kind
*/
constructor(videoStreamTrack) {
if (videoStreamTrack.kind !== 'video')
throw new DOMException('NotSupportedError');
this._videoStreamTrack = videoStreamTrack;
if (!('readyState' in this._videoStreamTrack)) {
// Polyfill for Firefox
this._videoStreamTrack.readyState = 'live';
}
// MediaStream constructor not available until Chrome 55 - https://www.chromestatus.com/feature/5912172546752512
this._previewStream = new MediaStream([videoStreamTrack]);
this.videoElement = document.createElement('video');
this.videoElementPlaying = new Promise(resolve => {
this.videoElement.addEventListener('playing', resolve);
});
if (HTMLMediaElement) {
this.videoElement.srcObject = this._previewStream; // Safari 11 doesn't allow use of createObjectURL for MediaStream
}
else {
this.videoElement.src = URL.createObjectURL(this._previewStream);
}
this.videoElement.muted = true;
this.videoElement.setAttribute('playsinline', ''); // Required by Safari on iOS 11. See https://webkit.org/blog/6784
this.videoElement.play();
this.canvasElement = document.createElement('canvas');
// TODO Firefox has https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
this.canvas2dContext = this.canvasElement.getContext('2d');
}
/**
* https://w3c.github.io/mediacapture-image/index.html#dom-imagecapture-videostreamtrack
* @return {MediaStreamTrack} The MediaStreamTrack passed into the constructor
*/
get videoStreamTrack() {
return this._videoStreamTrack;
}
/**
* Implements https://www.w3.org/TR/image-capture/#dom-imagecapture-getphotocapabilities
* @return {Promise<PhotoCapabilities>} Fulfilled promise with
* [PhotoCapabilities](https://www.w3.org/TR/image-capture/#idl-def-photocapabilities)
* object on success, rejected promise on failure
*/
getPhotoCapabilities() {
return new Promise(function executorGPC(resolve, reject) {
// TODO see https://github.com/w3c/mediacapture-image/issues/97
const MediaSettingsRange = {
current: 0, min: 0, max: 0,
};
resolve({
exposureCompensation: MediaSettingsRange,
exposureMode: 'none',
fillLightMode: ['none'],
focusMode: 'none',
imageHeight: MediaSettingsRange,
imageWidth: MediaSettingsRange,
iso: MediaSettingsRange,
redEyeReduction: false,
whiteBalanceMode: 'none',
zoom: MediaSettingsRange,
});
reject(new DOMException('OperationError'));
});
}
/**
* Implements https://www.w3.org/TR/image-capture/#dom-imagecapture-setoptions
* @param {Object} photoSettings - Photo settings dictionary, https://www.w3.org/TR/image-capture/#idl-def-photosettings
* @return {Promise<void>} Fulfilled promise on success, rejected promise on failure
*/
setOptions(_photoSettings = {}) {
return new Promise(function executorSO(_resolve, _reject) {
// TODO
});
}
/**
* TODO
* Implements https://www.w3.org/TR/image-capture/#dom-imagecapture-takephoto
* @return {Promise<Blob>} Fulfilled promise with [Blob](https://www.w3.org/TR/FileAPI/#blob)
* argument on success; rejected promise on failure
*/
takePhoto() {
const self = this;
return new Promise(function executorTP(resolve, reject) {
// `If the readyState of the MediaStreamTrack provided in the constructor is not live,
// return a promise rejected with a new DOMException whose name is "InvalidStateError".`
if (self._videoStreamTrack.readyState !== 'live') {
return reject(new DOMException('InvalidStateError'));
}
self.videoElementPlaying.then(() => {
try {
self.canvasElement.width = self.videoElement.videoWidth;
self.canvasElement.height = self.videoElement.videoHeight;
self.canvas2dContext.drawImage(self.videoElement, 0, 0);
self.canvasElement.toBlob(resolve);
}
catch (error) {
reject(new DOMException('UnknownError'));
}
});
});
}
/**
* Implements https://www.w3.org/TR/image-capture/#dom-imagecapture-grabframe
* @return {Promise<ImageBitmap>} Fulfilled promise with
* [ImageBitmap](https://www.w3.org/TR/html51/webappapis.html#webappapis-images)
* argument on success; rejected promise on failure
*/
grabFrame() {
const self = this;
return new Promise(function executorGF(resolve, reject) {
// `If the readyState of the MediaStreamTrack provided in the constructor is not live,
// return a promise rejected with a new DOMException whose name is "InvalidStateError".`
if (self._videoStreamTrack.readyState !== 'live') {
return reject(new DOMException('InvalidStateError'));
}
self.videoElementPlaying.then(() => {
try {
self.canvasElement.width = self.videoElement.videoWidth;
self.canvasElement.height = self.videoElement.videoHeight;
self.canvas2dContext.drawImage(self.videoElement, 0, 0);
// TODO polyfill https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmapFactories/createImageBitmap for IE
resolve(window.createImageBitmap(self.canvasElement));
}
catch (error) {
reject(new DOMException('UnknownError'));
}
});
});
}
};
}
window.ImageCapture = ImageCapture;
const cameraCss = ":host{--header-height:4em;--footer-height:9em;--header-height-landscape:3em;--footer-height-landscape:6em;--shutter-size:6em;--icon-size-header:1.5em;--icon-size-footer:2.5em;--margin-size-header:1.5em;--margin-size-footer:2.0em;font-family:-apple-system, BlinkMacSystemFont,\n “Segoe UI”, “Roboto”, “Droid Sans”, “Helvetica Neue”, sans-serif;display:block;width:100%;height:100%}.items{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;width:100%;height:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.items .item{-ms-flex:1;flex:1;text-align:center}.items .item:first-child{text-align:left}.items .item:last-child{text-align:right}.camera-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}.camera-header{color:white;background-color:black;height:var(--header-height)}.camera-header .items{padding:var(--margin-size-header)}.camera-footer{position:relative;color:white;background-color:black;height:var(--footer-height)}.camera-footer .items{padding:var(--margin-size-footer)}@media (max-height: 375px){.camera-header{--header-height:var(--header-height-landscape)}.camera-footer{--footer-height:var(--footer-height-landscape)}.camera-footer .shutter{--shutter-size:4em}}.camera-video{position:relative;-ms-flex:1;flex:1;overflow:hidden;background-color:black}video{width:100%;height:100%;max-height:100%;min-height:100%;-o-object-fit:cover;object-fit:cover;background-color:black}.pick-image{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;position:absolute;left:var(--margin-size-footer);top:0;height:100%;width:var(--icon-size-footer);color:white}.pick-image input{visibility:hidden}.pick-image svg{cursor:pointer;fill:white;width:var(--icon-size-footer);height:var(--icon-size-footer)}.shutter{position:absolute;left:50%;top:50%;width:var(--shutter-size);height:var(--shutter-size);margin-top:calc(var(--shutter-size) / -2);margin-left:calc(var(--shutter-size) / -2);border-radius:100%;background-color:#c6cdd8;padding:12px;-webkit-box-sizing:border-box;box-sizing:border-box}.shutter:active .shutter-button{background-color:#9da9bb}.shutter-button{background-color:white;border-radius:100%;width:100%;height:100%}.rotate{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;position:absolute;right:var(--margin-size-footer);top:0;height:100%;width:var(--icon-size-footer);color:white}.rotate img{width:var(--icon-size-footer);height:var(--icon-size-footer)}.shutter-overlay{z-index:5;position:absolute;width:100%;height:100%;background-color:black}.error{width:100%;height:100%;color:white;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.no-device{background-color:black;-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:white}.no-device label{cursor:pointer;background:#fff;border-radius:6px;padding:6px 8px;color:black}.no-device input{visibility:hidden;height:0;margin-top:16px}.accept{background-color:black;-ms-flex:1;flex:1;overflow:hidden}.accept .accept-image{width:100%;height:100%;max-height:100%;background-position:center center;background-size:cover;background-repeat:no-repeat}.close img{cursor:pointer;width:var(--icon-size-header);height:var(--icon-size-header)}.flash img{width:var(--icon-size-header);height:var(--icon-size-header)}.accept-use img{width:var(--icon-size-footer);height:var(--icon-size-footer)}.accept-cancel img{width:var(--icon-size-footer);height:var(--icon-size-footer)}.offscreen-image-render{top:0;left:0;visibility:hidden;pointer-events:none;width:100%;height:100%}";
const CameraPWA = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
// Whether the device has multiple cameras (front/back)
this.hasMultipleCameras = false;
// Whether the device has flash support
this.hasFlash = false;
// Flash modes for camera
this.flashModes = [];
// Current flash mode
this.flashMode = 'off';
this.handlePickFile = (_e) => {
};
this.handleShutterClick = (_e) => {
console.debug('shutter click');
this.capture();
};
this.handleRotateClick = (_e) => {
this.rotate();
};
this.handleClose = (_e) => {
this.handlePhoto && this.handlePhoto(null);
};
this.handleFlashClick = (_e) => {
this.cycleFlash();
};
this.handleCancelPhoto = (_e) => {
const track = this.stream && this.stream.getTracks()[0];
let c = track && track.getConstraints();
this.photo = null;
this.photoSrc = null;
if (c) {
this.initCamera({
video: {
facingMode: c.facingMode
}
});
}
else {
this.initCamera();
}
};
this.handleAcceptPhoto = (_e) => {
this.handlePhoto && this.handlePhoto(this.photo);
};
this.handleFileInputChange = async (e) => {
const input = e.target;
const file = input.files[0];
try {
const orientation = await this.getOrientation(file);
console.debug('Got orientation', orientation);
this.photoOrientation = orientation;
}
catch (e) {
}
this.handlePhoto && this.handlePhoto(file);
};
this.handleVideoMetadata = (e) => {
console.debug('Video metadata', e);
};
this.facingMode = 'user';
this.handlePhoto = undefined;
this.hidePicker = false;
this.handleNoDeviceError = undefined;
this.noDevicesText = 'No camera found';
this.noDevicesButtonText = 'Choose image';
this.photo = undefined;
this.photoSrc = undefined;
this.showShutterOverlay = false;
this.flashIndex = 0;
this.hasCamera = null;
this.rotation = 0;
this.deviceError = null;
}
async componentDidLoad() {
this.defaultConstraints = {
video: {
facingMode: this.facingMode
}
};
// Figure out how many cameras we have
await this.queryDevices();
// Initialize the camera
await this.initCamera();
}
disconnectedCallback() {
this.stopStream();
this.photoSrc && URL.revokeObjectURL(this.photoSrc);
}
hasImageCapture() {
return 'ImageCapture' in window;
}
/**
* Query the list of connected devices and figure out how many video inputs we have.
*/
async queryDevices() {
try {
const devices = await navigator.mediaDevices.enumerateDevices();
const videoDevices = devices.filter(d => d.kind == 'videoinput');
this.hasCamera = !!videoDevices.length;
this.hasMultipleCameras = videoDevices.length > 1;
}
catch (e) {
this.deviceError = e;
}
}
async initCamera(constraints) {
if (!constraints) {
constraints = this.defaultConstraints;
}
try {
const stream = await navigator.mediaDevices.getUserMedia(Object.assign({ video: true, audio: false }, constraints));
this.initStream(stream);
}
catch (e) {
this.deviceError = e;
this.handleNoDeviceError && this.handleNoDeviceError(e);
}
}
async initStream(stream) {
this.stream = stream;
this.videoElement.srcObject = stream;
if (this.hasImageCapture()) {
this.imageCapture = new window.ImageCapture(stream.getVideoTracks()[0]);
await this.initPhotoCapabilities(this.imageCapture);
}
else {
this.deviceError = 'No image capture';
this.handleNoDeviceError && this.handleNoDeviceError();
}
// Always re-render
index.forceUpdate(this.el);
}
async initPhotoCapabilities(imageCapture) {
const c = await imageCapture.getPhotoCapabilities();
if (c.fillLightMode && c.fillLightMode.length > 1) {
this.flashModes = c.fillLightMode.map(m => m);
// Try to recall the current flash mode
if (this.flashMode) {
this.flashMode = this.flashModes[this.flashModes.indexOf(this.flashMode)] || 'off';
this.flashIndex = this.flashModes.indexOf(this.flashMode) || 0;
}
else {
this.flashIndex = 0;
}
}
}
stopStream() {
if (this.videoElement) {
this.videoElement.srcObject = null;
}
this.stream && this.stream.getTracks().forEach(track => track.stop());
}
async capture() {
if (this.hasImageCapture()) {
try {
const photo = await this.imageCapture.takePhoto({
fillLightMode: this.flashModes.length > 1 ? this.flashMode : undefined
});
await this.flashScreen();
this.promptAccept(photo);
}
catch (e) {
console.error('Unable to take photo!', e);
}
}
this.stopStream();
}
async promptAccept(photo) {
this.photo = photo;
const orientation = await this.getOrientation(photo);
console.debug('Got orientation', orientation);
this.photoOrientation = orientation;
if (orientation) {
switch (orientation) {
case 1:
case 2:
this.rotation = 0;
break;
case 3:
case 4:
this.rotation = 180;
break;
case 5:
case 6:
this.rotation = 90;
break;
case 7:
case 8:
this.rotation = 270;
break;
}
}
this.photoSrc = URL.createObjectURL(photo);
}
getOrientation(file) {
return new Promise(resolve => {
const reader = new FileReader();
reader.onload = (event) => {
const view = new DataView(event.target.result);
if (view.getUint16(0, false) !== 0xFFD8) {
return resolve(-2);
}
const length = view.byteLength;
let offset = 2;
while (offset < length) {
const marker = view.getUint16(offset, false);
offset += 2;
if (marker === 0xFFE1) {
if (view.getUint32(offset += 2, false) !== 0x45786966) {
return resolve(-1);
}
const little = view.getUint16(offset += 6, false) === 0x4949;
offset += view.getUint32(offset + 4, little);
const tags = view.getUint16(offset, little);
offset += 2;
for (let i = 0; i < tags; i++) {
if (view.getUint16(offset + (i * 12), little) === 0x0112) {
return resolve(view.getUint16(offset + (i * 12) + 8, little));
}
}
}
else if ((marker & 0xFF00) !== 0xFF00) {
break;
}
else {
offset += view.getUint16(offset, false);
}
}
return resolve(-1);
};
reader.readAsArrayBuffer(file.slice(0, 64 * 1024));
});
}
rotate() {
this.stopStream();
const track = this.stream && this.stream.getTracks()[0];
if (!track) {
return;
}
let c = track.getConstraints();
let facingMode = c.facingMode;
if (!facingMode) {
let c = track.getCapabilities();
if (c.facingMode) {
facingMode = c.facingMode[0];
}
}
if (facingMode === 'environment') {
this.initCamera({
video: {
facingMode: 'user'
}
});
}
else {
this.initCamera({
video: {
facingMode: 'environment'
}
});
}
}
setFlashMode(mode) {
console.debug('New flash mode: ', mode);
this.flashMode = mode;
}
cycleFlash() {
if (this.flashModes.length > 0) {
this.flashIndex = (this.flashIndex + 1) % this.flashModes.length;
this.setFlashMode(this.flashModes[this.flashIndex]);
}
}
async flashScreen() {
return new Promise((resolve, _reject) => {
this.showShutterOverlay = true;
setTimeout(() => {
this.showShutterOverlay = false;
resolve();
}, 100);
});
}
iconExit() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Cg id='Icon_5_'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M402.2,134L378,109.8c-1.6-1.6-4.1-1.6-5.7,0L258.8,223.4c-1.6,1.6-4.1,1.6-5.7,0L139.6,109.8 c-1.6-1.6-4.1-1.6-5.7,0L109.8,134c-1.6,1.6-1.6,4.1,0,5.7l113.5,113.5c1.6,1.6,1.6,4.1,0,5.7L109.8,372.4c-1.6,1.6-1.6,4.1,0,5.7 l24.1,24.1c1.6,1.6,4.1,1.6,5.7,0l113.5-113.5c1.6-1.6,4.1-1.6,5.7,0l113.5,113.5c1.6,1.6,4.1,1.6,5.7,0l24.1-24.1 c1.6-1.6,1.6-4.1,0-5.7L288.6,258.8c-1.6-1.6-1.6-4.1,0-5.7l113.5-113.5C403.7,138.1,403.7,135.5,402.2,134z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E`;
}
iconPhotos() {
return (index.h("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '512', height: '512', viewBox: '0 0 512 512' }, index.h("path", { d: 'M450.29,112H142c-34,0-62,27.51-62,61.33V418.67C80,452.49,108,480,142,480H450c34,0,62-26.18,62-60V173.33C512,139.51,484.32,112,450.29,112Zm-77.15,61.34a46,46,0,1,1-46.28,46A46.19,46.19,0,0,1,373.14,173.33Zm-231.55,276c-17,0-29.86-13.75-29.86-30.66V353.85l90.46-80.79a46.54,46.54,0,0,1,63.44,1.83L328.27,337l-113,112.33ZM480,418.67a30.67,30.67,0,0,1-30.71,30.66H259L376.08,333a46.24,46.24,0,0,1,59.44-.16L480,370.59Z' }), index.h("path", { d: 'M384,32H64A64,64,0,0,0,0,96V352a64.11,64.11,0,0,0,48,62V152a72,72,0,0,1,72-72H446A64.11,64.11,0,0,0,384,32Z' })));
}
iconConfirm() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Ccircle fill='%232CD865' cx='256' cy='256' r='256'/%3E%3Cg id='Icon_1_'%3E%3Cg%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M208,301.4l-55.4-55.5c-1.5-1.5-4-1.6-5.6-0.1l-23.4,22.3c-1.6,1.6-1.7,4.1-0.1,5.7l81.6,81.4 c3.1,3.1,8.2,3.1,11.3,0l171.8-171.7c1.6-1.6,1.6-4.2-0.1-5.7l-23.4-22.3c-1.6-1.5-4.1-1.5-5.6,0.1L213.7,301.4 C212.1,303,209.6,303,208,301.4z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E`;
}
iconReverseCamera() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M352,0H160C72,0,0,72,0,160v192c0,88,72,160,160,160h192c88,0,160-72,160-160V160C512,72,440,0,352,0z M356.7,365.8l-3.7,3.3c-27,23.2-61.4,35.9-96.8,35.9c-72.4,0-135.8-54.7-147-125.6c-0.3-1.9-2-3.3-3.9-3.3H64 c-3.3,0-5.2-3.8-3.2-6.4l61.1-81.4c1.6-2.1,4.7-2.1,6.4-0.1l63.3,81.4c2,2.6,0.2,6.5-3.2,6.5h-40.6c-2.5,0-4.5,2.4-3.9,4.8 c11.5,51.5,59.2,90.6,112.4,90.6c26.4,0,51.8-9.7,73.7-27.9l3.1-2.5c1.6-1.3,3.9-1.1,5.3,0.3l18.5,18.6 C358.5,361.6,358.4,364.3,356.7,365.8z M451.4,245.6l-61,83.5c-1.6,2.2-4.8,2.2-6.4,0.1l-63.3-83.3c-2-2.6-0.1-6.4,3.2-6.4h40.8 c2.5,0,4.4-2.3,3.9-4.8c-5.1-24.2-17.8-46.5-36.5-63.7c-21.2-19.4-48.2-30.1-76-30.1c-26.5,0-52.6,9.7-73.7,27.3l-3.1,2.5 c-1.6,1.3-3.9,1.2-5.4-0.3l-18.5-18.5c-1.6-1.6-1.5-4.3,0.2-5.9l3.5-3.1c27-23.2,61.4-35.9,96.8-35.9c38,0,73.9,13.7,101.2,38.7 c23.2,21.1,40.3,55.2,45.7,90.1c0.3,1.9,1.9,3.4,3.9,3.4h41.3C451.4,239.2,453.3,243,451.4,245.6z'/%3E%3C/g%3E%3C/svg%3E`;
}
iconRetake() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Ccircle fill='%23727A87' cx='256' cy='256' r='256'/%3E%3Cg id='Icon_5_'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M394.2,142L370,117.8c-1.6-1.6-4.1-1.6-5.7,0L258.8,223.4c-1.6,1.6-4.1,1.6-5.7,0L147.6,117.8 c-1.6-1.6-4.1-1.6-5.7,0L117.8,142c-1.6,1.6-1.6,4.1,0,5.7l105.5,105.5c1.6,1.6,1.6,4.1,0,5.7L117.8,364.4c-1.6,1.6-1.6,4.1,0,5.7 l24.1,24.1c1.6,1.6,4.1,1.6,5.7,0l105.5-105.5c1.6-1.6,4.1-1.6,5.7,0l105.5,105.5c1.6,1.6,4.1,1.6,5.7,0l24.1-24.1 c1.6-1.6,1.6-4.1,0-5.7L288.6,258.8c-1.6-1.6-1.6-4.1,0-5.7l105.5-105.5C395.7,146.1,395.7,143.5,394.2,142z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E`;
}
iconFlashOff() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M498,483.7L42.3,28L14,56.4l149.8,149.8L91,293.8c-2.5,3-0.1,7.2,3.9,7.2h143.9c1.6,0,2.7,1.3,2.4,2.7 L197.6,507c-1,4.4,5.8,6.9,8.9,3.2l118.6-142.8L469.6,512L498,483.7z'/%3E%3Cpath class='st0' d='M449,218.2c2.5-3,0.1-7.2-3.9-7.2H301.2c-1.6,0-2.7-1.3-2.4-2.7L342.4,5c1-4.4-5.8-6.9-8.9-3.2L214.9,144.6 l161.3,161.3L449,218.2z'/%3E%3C/g%3E%3C/svg%3E`;
}
iconFlashOn() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M287.2,211c-1.6,0-2.7-1.3-2.4-2.7L328.4,5c1-4.4-5.8-6.9-8.9-3.2L77,293.8c-2.5,3-0.1,7.2,3.9,7.2h143.9 c1.6,0,2.7,1.3,2.4,2.7L183.6,507c-1,4.4,5.8,6.9,8.9,3.2l242.5-292c2.5-3,0.1-7.2-3.9-7.2L287.2,211L287.2,211z'/%3E%3C/svg%3E`;
}
iconFlashAuto() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M287.2,211c-1.6,0-2.7-1.3-2.4-2.7L328.4,5c1-4.4-5.8-6.9-8.9-3.2L77,293.8c-2.5,3-0.1,7.2,3.9,7.2h143.9 c1.6,0,2.7,1.3,2.4,2.7L183.6,507c-1,4.4,5.8,6.9,8.9,3.2l242.5-292c2.5-3,0.1-7.2-3.9-7.2L287.2,211L287.2,211z'/%3E%3Cg%3E%3Cpath class='st0' d='M321.3,186l74-186H438l74,186h-43.5l-11.9-32.5h-80.9l-12,32.5H321.3z M415.8,47.9l-27.2,70.7h54.9l-27.2-70.7 H415.8z'/%3E%3C/g%3E%3C/svg%3E`;
}
render() {
// const acceptStyles = { transform: `rotate(${-this.rotation}deg)` };
const acceptStyles = {};
return (index.h("div", { class: "camera-wrapper" }, index.h("div", { class: "camera-header" }, index.h("section", { class: "items" }, index.h("div", { class: "item close", onClick: e => this.handleClose(e) }, index.h("img", { src: this.iconExit() })), index.h("div", { class: "item flash", onClick: e => this.handleFlashClick(e) }, this.flashModes.length > 0 && (index.h("div", null, this.flashMode == 'off' ? index.h("img", { src: this.iconFlashOff() }) : '', this.flashMode == 'auto' ? index.h("img", { src: this.iconFlashAuto() }) : '', this.flashMode == 'flash' ? index.h("img", { src: this.iconFlashOn() }) : ''))))), (this.hasCamera === false || !!this.deviceError) && (index.h("div", { class: "no-device" }, index.h("h2", null, this.noDevicesText), index.h("label", { htmlFor: "_pwa-elements-camera-input" }, this.noDevicesButtonText), index.h("input", { type: "file", id: "_pwa-elements-camera-input", onChange: this.handleFileInputChange, accept: "image/*", class: "select-file-button" }))), this.photoSrc ? (index.h("div", { class: "accept" }, index.h("div", { class: "accept-image", style: Object.assign({ backgroundImage: `url(${this.photoSrc})` }, acceptStyles) }))) : (index.h("div", { class: "camera-video" }, this.showShutterOverlay && (index.h("div", { class: "shutter-overlay" })), this.hasImageCapture() ? (index.h("video", { ref: (el) => this.videoElement = el, onLoadedMetaData: this.handleVideoMetadata, autoplay: true, playsinline: true })) : (index.h("canvas", { ref: (el) => this.canvasElement = el, width: "100%", height: "100%" })), index.h("canvas", { class: "offscreen-image-render", ref: e => this.offscreenCanvas = e, width: "100%", height: "100%" }))), this.hasCamera && (index.h("div", { class: "camera-footer" }, !this.photo ? ([
!this.hidePicker && (index.h("div", { class: "pick-image", onClick: this.handlePickFile }, index.h("label", { htmlFor: "_pwa-elements-file-pick" }, this.iconPhotos()), index.h("input", { type: "file", id: "_pwa-elements-file-pick", onChange: this.handleFileInputChange, accept: "image/*", class: "pick-image-button" }))),
index.h("div", { class: "shutter", onClick: this.handleShutterClick }, index.h("div", { class: "shutter-button" })),
index.h("div", { class: "rotate", onClick: this.handleRotateClick }, index.h("img", { src: this.iconReverseCamera() })),
]) : (index.h("section", { class: "items" }, index.h("div", { class: "item accept-cancel", onClick: e => this.handleCancelPhoto(e) }, index.h("img", { src: this.iconRetake() })), index.h("div", { class: "item accept-use", onClick: e => this.handleAcceptPhoto(e) }, index.h("img", { src: this.iconConfirm() }))))))));
}
static get assetsDirs() { return ["icons"]; }
get el() { return index.getElement(this); }
};
CameraPWA.style = cameraCss;
exports.pwa_camera = CameraPWA;

View File

@@ -1,49 +0,0 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-d7f36e37.js');
const toastCss = ":host{position:fixed;bottom:20px;left:0;right:0;display:-ms-flexbox;display:flex;opacity:0}:host(.in){-webkit-transition:opacity 300ms;transition:opacity 300ms;opacity:1}:host(.out){-webkit-transition:opacity 1s;transition:opacity 1s;opacity:0}.wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.toast{font-family:-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif;background-color:#eee;color:black;border-radius:5px;padding:10px 15px;font-size:14px;font-weight:500;-webkit-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.20);box-shadow:0px 1px 2px rgba(0, 0, 0, 0.20)}";
const PWAToast = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.message = undefined;
this.duration = 2000;
this.closing = null;
}
hostData() {
const classes = {
out: !!this.closing
};
if (this.closing !== null) {
classes['in'] = !this.closing;
}
return {
class: classes
};
}
componentDidLoad() {
setTimeout(() => {
this.closing = false;
});
setTimeout(() => {
this.close();
}, this.duration);
}
close() {
this.closing = true;
setTimeout(() => {
this.el.parentNode.removeChild(this.el);
}, 1000);
}
__stencil_render() {
return (index.h("div", { class: "wrapper" }, index.h("div", { class: "toast" }, this.message)));
}
get el() { return index.getElement(this); }
render() { return index.h(index.Host, this.hostData(), this.__stencil_render()); }
};
PWAToast.style = toastCss;
exports.pwa_toast = PWAToast;

View File

@@ -1,16 +0,0 @@
{
"entries": [
"./components/action-sheet/action-sheet.js",
"./components/camera/camera.js",
"./components/camera-modal/camera-modal-instance.js",
"./components/camera-modal/camera-modal.js",
"./components/toast/toast.js"
],
"compiler": {
"name": "@stencil/core",
"version": "3.4.0",
"typescriptVersion": "5.0.4"
},
"collections": [],
"bundles": []
}

View File

@@ -1,79 +0,0 @@
:host {
z-index: 1000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
contain: strict;
user-select: none;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
}
.wrapper {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0);
transition: 400ms background-color cubic-bezier(.36,.66,.04,1);
}
.wrapper.open {
background-color: rgba(0, 0, 0, 0.32);
}
.title {
color: #999;
height: 23px;
line-height: 23px;
padding-bottom: 17px;
padding-inline-end: 16px;
padding-inline-start: 16px;
padding-left: 16px;
padding-right: 16px;
padding-top: 20px;
}
.content {
width: 568px;
align-self: flex-end;
background-color:#fff;
transition: 400ms transform cubic-bezier(.36,.66,.04,1);
transform: translateY(100%);
}
.wrapper.open .content {
transform: translateY(0%);
}
@media only screen and (max-width: 568px) {
.content {
width: 100%;
}
}
.action-sheet-option {
cursor: pointer;
height: 52px;
line-height: 52px;
}
.action-sheet-button {
color: rgb(38, 38, 38);
font-size: 16px;
padding-inline-end: 16px;
padding-inline-start: 16px;
padding-left: 16px;
padding-right: 16px;
padding-top: 0px;
}
.action-sheet-button:hover {
background-color: #F6F6F6;
}

View File

@@ -1,129 +0,0 @@
import { h } from '@stencil/core';
export class PWAActionSheet {
constructor() {
this.header = undefined;
this.cancelable = true;
this.options = [];
this.open = false;
}
componentDidLoad() {
requestAnimationFrame(() => {
this.open = true;
});
}
dismiss() {
if (this.cancelable) {
this.close();
}
}
close() {
this.open = false;
setTimeout(() => {
this.el.parentNode.removeChild(this.el);
}, 500);
}
handleOptionClick(e, i) {
e.stopPropagation();
this.onSelection.emit(i);
this.close();
}
render() {
return (h("div", { class: `wrapper${this.open ? ' open' : ''}`, onClick: () => this.dismiss() }, h("div", { class: "content" }, h("div", { class: "title" }, this.header), this.options.map((option, i) => h("div", { class: "action-sheet-option", onClick: (e) => this.handleOptionClick(e, i) }, h("div", { class: "action-sheet-button" }, option.title))))));
}
static get is() { return "pwa-action-sheet"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["action-sheet.css"]
};
}
static get styleUrls() {
return {
"$": ["action-sheet.css"]
};
}
static get properties() {
return {
"header": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "header",
"reflect": false
},
"cancelable": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "cancelable",
"reflect": false,
"defaultValue": "true"
},
"options": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "ActionSheetOption[]",
"resolved": "ActionSheetOption[]",
"references": {
"ActionSheetOption": {
"location": "import",
"path": "../../definitions"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"defaultValue": "[]"
}
};
}
static get states() {
return {
"open": {}
};
}
static get events() {
return [{
"method": "onSelection",
"name": "onSelection",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
}

View File

@@ -1,35 +0,0 @@
:host {
z-index: 1000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
contain: strict;
--inset-width: 600px;
--inset-height: 600px;
}
.wrapper {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.15);
}
.content {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
width: var(--inset-width);
height: var(--inset-height);
max-height: 100%;
}
@media only screen and (max-width: 600px) {
.content {
width: 100%;
height: 100%;
}
}

View File

@@ -1,162 +0,0 @@
import { h } from '@stencil/core';
export class PWACameraModal {
constructor() {
this.handlePhoto = async (photo) => {
this.onPhoto.emit(photo);
};
this.handleNoDeviceError = async (photo) => {
this.noDeviceError.emit(photo);
};
this.facingMode = 'user';
this.hidePicker = false;
this.noDevicesText = 'No camera found';
this.noDevicesButtonText = 'Choose image';
}
handleBackdropClick(e) {
if (e.target !== this.el) {
this.onPhoto.emit(null);
}
}
handleComponentClick(e) {
e.stopPropagation();
}
handleBackdropKeyUp(e) {
if (e.key === "Escape") {
this.onPhoto.emit(null);
}
}
render() {
return (h("div", { class: "wrapper", onClick: e => this.handleBackdropClick(e) }, h("div", { class: "content" }, h("pwa-camera", { onClick: e => this.handleComponentClick(e), facingMode: this.facingMode, hidePicker: this.hidePicker, handlePhoto: this.handlePhoto, handleNoDeviceError: this.handleNoDeviceError, noDevicesButtonText: this.noDevicesButtonText, noDevicesText: this.noDevicesText }))));
}
static get is() { return "pwa-camera-modal-instance"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["camera-modal-instance.css"]
};
}
static get styleUrls() {
return {
"$": ["camera-modal-instance.css"]
};
}
static get properties() {
return {
"facingMode": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "facing-mode",
"reflect": false,
"defaultValue": "'user'"
},
"hidePicker": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "hide-picker",
"reflect": false,
"defaultValue": "false"
},
"noDevicesText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "no-devices-text",
"reflect": false,
"defaultValue": "'No camera found'"
},
"noDevicesButtonText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "no-devices-button-text",
"reflect": false,
"defaultValue": "'Choose image'"
}
};
}
static get events() {
return [{
"method": "onPhoto",
"name": "onPhoto",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "noDeviceError",
"name": "noDeviceError",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get listeners() {
return [{
"name": "keyup",
"method": "handleBackdropKeyUp",
"target": "body",
"capture": false,
"passive": false
}];
}
}

View File

@@ -1,24 +0,0 @@
:host {
z-index: 1000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
contain: strict;
}
.wrapper {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.15);
}
.content {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
width: 600px;
height: 600px;
}

View File

@@ -1,155 +0,0 @@
import { h } from '@stencil/core';
export class PWACameraModal {
constructor() {
this.facingMode = 'user';
this.hidePicker = false;
}
async present() {
const camera = document.createElement('pwa-camera-modal-instance');
camera.facingMode = this.facingMode;
camera.hidePicker = this.hidePicker;
camera.addEventListener('onPhoto', async (e) => {
if (!this._modal) {
return;
}
const photo = e.detail;
this.onPhoto.emit(photo);
});
camera.addEventListener('noDeviceError', async (e) => {
this.noDeviceError.emit(e);
});
document.body.append(camera);
this._modal = camera;
}
async dismiss() {
if (!this._modal) {
return;
}
this._modal && this._modal.parentNode.removeChild(this._modal);
this._modal = null;
}
render() {
return (h("div", null));
}
static get is() { return "pwa-camera-modal"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["camera-modal.css"]
};
}
static get styleUrls() {
return {
"$": ["camera-modal.css"]
};
}
static get properties() {
return {
"facingMode": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "facing-mode",
"reflect": false,
"defaultValue": "'user'"
},
"hidePicker": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "hide-picker",
"reflect": false,
"defaultValue": "false"
}
};
}
static get events() {
return [{
"method": "onPhoto",
"name": "onPhoto",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "noDeviceError",
"name": "noDeviceError",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get methods() {
return {
"present": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"dismiss": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
}
};
}
}

View File

@@ -1,244 +0,0 @@
:host {
--header-height: 4em;
--footer-height: 9em;
--header-height-landscape: 3em;
--footer-height-landscape: 6em;
--shutter-size: 6em;
--icon-size-header: 1.5em;
--icon-size-footer: 2.5em;
--margin-size-header: 1.5em;
--margin-size-footer: 2.0em;
font-family: -apple-system, BlinkMacSystemFont,
Segoe UI, Roboto, Droid Sans, Helvetica Neue, sans-serif;
display: block;
width: 100%;
height: 100%;
}
.items {
box-sizing: border-box;
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.items .item {
flex: 1;
text-align: center;
}
.items .item:first-child {
text-align: left;
}
.items .item:last-child {
text-align: right;
}
.camera-wrapper {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.camera-header {
color: white;
background-color: black;
height: var(--header-height);
}
.camera-header .items {
padding: var(--margin-size-header);
}
.camera-footer {
position: relative;
color: white;
background-color: black;
height: var(--footer-height);
}
.camera-footer .items {
padding: var(--margin-size-footer);
}
@media (max-height: 375px) {
.camera-header {
--header-height: var(--header-height-landscape);
}
.camera-footer {
--footer-height: var(--footer-height-landscape);
}
.camera-footer .shutter {
--shutter-size: 4em;
}
}
.camera-video {
position: relative;
flex: 1;
overflow: hidden;
background-color: black;
}
video {
width: 100%;
height: 100%;
max-height: 100%;
min-height: 100%;
object-fit: cover;
background-color: black;
}
.pick-image {
display: flex;
align-items: center;
position: absolute;
left: var(--margin-size-footer);
top: 0;
height: 100%;
width: var(--icon-size-footer);
color: white;
}
.pick-image input {
visibility: hidden;
}
.pick-image svg {
cursor: pointer;
fill: white;
width: var(--icon-size-footer);
height: var(--icon-size-footer);
}
.shutter {
position: absolute;
left: 50%;
top: 50%;
width: var(--shutter-size);
height: var(--shutter-size);
margin-top: calc(var(--shutter-size) / -2);
margin-left: calc(var(--shutter-size) / -2);
border-radius: 100%;
background-color: #c6cdd8;
padding: 12px;
box-sizing: border-box;
}
.shutter:active .shutter-button {
background-color: #9da9bb;
}
.shutter-button {
background-color: white;
border-radius: 100%;
width: 100%;
height: 100%;
}
.rotate {
display: flex;
align-items: center;
position: absolute;
right: var(--margin-size-footer);
top: 0;
height: 100%;
width: var(--icon-size-footer);
color: white;
}
.rotate img {
width: var(--icon-size-footer);
height: var(--icon-size-footer);
}
.shutter-overlay {
z-index: 5;
position: absolute;
width: 100%;
height: 100%;
background-color: black;
}
.error {
width: 100%;
height: 100%;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.no-device {
background-color: black;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
}
.no-device label {
cursor: pointer;
background: #fff;
border-radius: 6px;
padding: 6px 8px;
color: black;
}
.no-device input {
visibility: hidden;
height: 0;
margin-top: 16px;
}
.accept {
background-color: black;
flex: 1;
overflow: hidden;
}
.accept .accept-image {
width: 100%;
height: 100%;
max-height: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.close img {
cursor: pointer;
width: var(--icon-size-header);
height: var(--icon-size-header);
}
.flash img {
width: var(--icon-size-header);
height: var(--icon-size-header);
}
.accept-use img {
width: var(--icon-size-footer);
height: var(--icon-size-footer);
}
.accept-cancel img {
width: var(--icon-size-footer);
height: var(--icon-size-footer);
}
.offscreen-image-render {
top: 0;
left: 0;
visibility: hidden;
pointer-events: none;
width: 100%;
height: 100%;
}

View File

@@ -1,455 +0,0 @@
import { h, Build, forceUpdate } from '@stencil/core';
import './imagecapture';
export class CameraPWA {
constructor() {
// Whether the device has multiple cameras (front/back)
this.hasMultipleCameras = false;
// Whether the device has flash support
this.hasFlash = false;
// Flash modes for camera
this.flashModes = [];
// Current flash mode
this.flashMode = 'off';
this.handlePickFile = (_e) => {
};
this.handleShutterClick = (_e) => {
console.debug('shutter click');
this.capture();
};
this.handleRotateClick = (_e) => {
this.rotate();
};
this.handleClose = (_e) => {
this.handlePhoto && this.handlePhoto(null);
};
this.handleFlashClick = (_e) => {
this.cycleFlash();
};
this.handleCancelPhoto = (_e) => {
const track = this.stream && this.stream.getTracks()[0];
let c = track && track.getConstraints();
this.photo = null;
this.photoSrc = null;
if (c) {
this.initCamera({
video: {
facingMode: c.facingMode
}
});
}
else {
this.initCamera();
}
};
this.handleAcceptPhoto = (_e) => {
this.handlePhoto && this.handlePhoto(this.photo);
};
this.handleFileInputChange = async (e) => {
const input = e.target;
const file = input.files[0];
try {
const orientation = await this.getOrientation(file);
console.debug('Got orientation', orientation);
this.photoOrientation = orientation;
}
catch (e) {
}
this.handlePhoto && this.handlePhoto(file);
};
this.handleVideoMetadata = (e) => {
console.debug('Video metadata', e);
};
this.facingMode = 'user';
this.handlePhoto = undefined;
this.hidePicker = false;
this.handleNoDeviceError = undefined;
this.noDevicesText = 'No camera found';
this.noDevicesButtonText = 'Choose image';
this.photo = undefined;
this.photoSrc = undefined;
this.showShutterOverlay = false;
this.flashIndex = 0;
this.hasCamera = null;
this.rotation = 0;
this.deviceError = null;
}
async componentDidLoad() {
if (Build.isServer) {
return;
}
this.defaultConstraints = {
video: {
facingMode: this.facingMode
}
};
// Figure out how many cameras we have
await this.queryDevices();
// Initialize the camera
await this.initCamera();
}
disconnectedCallback() {
this.stopStream();
this.photoSrc && URL.revokeObjectURL(this.photoSrc);
}
hasImageCapture() {
return 'ImageCapture' in window;
}
/**
* Query the list of connected devices and figure out how many video inputs we have.
*/
async queryDevices() {
try {
const devices = await navigator.mediaDevices.enumerateDevices();
const videoDevices = devices.filter(d => d.kind == 'videoinput');
this.hasCamera = !!videoDevices.length;
this.hasMultipleCameras = videoDevices.length > 1;
}
catch (e) {
this.deviceError = e;
}
}
async initCamera(constraints) {
if (!constraints) {
constraints = this.defaultConstraints;
}
try {
const stream = await navigator.mediaDevices.getUserMedia(Object.assign({ video: true, audio: false }, constraints));
this.initStream(stream);
}
catch (e) {
this.deviceError = e;
this.handleNoDeviceError && this.handleNoDeviceError(e);
}
}
async initStream(stream) {
this.stream = stream;
this.videoElement.srcObject = stream;
if (this.hasImageCapture()) {
this.imageCapture = new window.ImageCapture(stream.getVideoTracks()[0]);
await this.initPhotoCapabilities(this.imageCapture);
}
else {
this.deviceError = 'No image capture';
this.handleNoDeviceError && this.handleNoDeviceError();
}
// Always re-render
forceUpdate(this.el);
}
async initPhotoCapabilities(imageCapture) {
const c = await imageCapture.getPhotoCapabilities();
if (c.fillLightMode && c.fillLightMode.length > 1) {
this.flashModes = c.fillLightMode.map(m => m);
// Try to recall the current flash mode
if (this.flashMode) {
this.flashMode = this.flashModes[this.flashModes.indexOf(this.flashMode)] || 'off';
this.flashIndex = this.flashModes.indexOf(this.flashMode) || 0;
}
else {
this.flashIndex = 0;
}
}
}
stopStream() {
if (this.videoElement) {
this.videoElement.srcObject = null;
}
this.stream && this.stream.getTracks().forEach(track => track.stop());
}
async capture() {
if (this.hasImageCapture()) {
try {
const photo = await this.imageCapture.takePhoto({
fillLightMode: this.flashModes.length > 1 ? this.flashMode : undefined
});
await this.flashScreen();
this.promptAccept(photo);
}
catch (e) {
console.error('Unable to take photo!', e);
}
}
this.stopStream();
}
async promptAccept(photo) {
this.photo = photo;
const orientation = await this.getOrientation(photo);
console.debug('Got orientation', orientation);
this.photoOrientation = orientation;
if (orientation) {
switch (orientation) {
case 1:
case 2:
this.rotation = 0;
break;
case 3:
case 4:
this.rotation = 180;
break;
case 5:
case 6:
this.rotation = 90;
break;
case 7:
case 8:
this.rotation = 270;
break;
}
}
this.photoSrc = URL.createObjectURL(photo);
}
getOrientation(file) {
return new Promise(resolve => {
const reader = new FileReader();
reader.onload = (event) => {
const view = new DataView(event.target.result);
if (view.getUint16(0, false) !== 0xFFD8) {
return resolve(-2);
}
const length = view.byteLength;
let offset = 2;
while (offset < length) {
const marker = view.getUint16(offset, false);
offset += 2;
if (marker === 0xFFE1) {
if (view.getUint32(offset += 2, false) !== 0x45786966) {
return resolve(-1);
}
const little = view.getUint16(offset += 6, false) === 0x4949;
offset += view.getUint32(offset + 4, little);
const tags = view.getUint16(offset, little);
offset += 2;
for (let i = 0; i < tags; i++) {
if (view.getUint16(offset + (i * 12), little) === 0x0112) {
return resolve(view.getUint16(offset + (i * 12) + 8, little));
}
}
}
else if ((marker & 0xFF00) !== 0xFF00) {
break;
}
else {
offset += view.getUint16(offset, false);
}
}
return resolve(-1);
};
reader.readAsArrayBuffer(file.slice(0, 64 * 1024));
});
}
rotate() {
this.stopStream();
const track = this.stream && this.stream.getTracks()[0];
if (!track) {
return;
}
let c = track.getConstraints();
let facingMode = c.facingMode;
if (!facingMode) {
let c = track.getCapabilities();
if (c.facingMode) {
facingMode = c.facingMode[0];
}
}
if (facingMode === 'environment') {
this.initCamera({
video: {
facingMode: 'user'
}
});
}
else {
this.initCamera({
video: {
facingMode: 'environment'
}
});
}
}
setFlashMode(mode) {
console.debug('New flash mode: ', mode);
this.flashMode = mode;
}
cycleFlash() {
if (this.flashModes.length > 0) {
this.flashIndex = (this.flashIndex + 1) % this.flashModes.length;
this.setFlashMode(this.flashModes[this.flashIndex]);
}
}
async flashScreen() {
return new Promise((resolve, _reject) => {
this.showShutterOverlay = true;
setTimeout(() => {
this.showShutterOverlay = false;
resolve();
}, 100);
});
}
iconExit() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Cg id='Icon_5_'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M402.2,134L378,109.8c-1.6-1.6-4.1-1.6-5.7,0L258.8,223.4c-1.6,1.6-4.1,1.6-5.7,0L139.6,109.8 c-1.6-1.6-4.1-1.6-5.7,0L109.8,134c-1.6,1.6-1.6,4.1,0,5.7l113.5,113.5c1.6,1.6,1.6,4.1,0,5.7L109.8,372.4c-1.6,1.6-1.6,4.1,0,5.7 l24.1,24.1c1.6,1.6,4.1,1.6,5.7,0l113.5-113.5c1.6-1.6,4.1-1.6,5.7,0l113.5,113.5c1.6,1.6,4.1,1.6,5.7,0l24.1-24.1 c1.6-1.6,1.6-4.1,0-5.7L288.6,258.8c-1.6-1.6-1.6-4.1,0-5.7l113.5-113.5C403.7,138.1,403.7,135.5,402.2,134z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E`;
}
iconPhotos() {
return (h("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '512', height: '512', viewBox: '0 0 512 512' }, h("path", { d: 'M450.29,112H142c-34,0-62,27.51-62,61.33V418.67C80,452.49,108,480,142,480H450c34,0,62-26.18,62-60V173.33C512,139.51,484.32,112,450.29,112Zm-77.15,61.34a46,46,0,1,1-46.28,46A46.19,46.19,0,0,1,373.14,173.33Zm-231.55,276c-17,0-29.86-13.75-29.86-30.66V353.85l90.46-80.79a46.54,46.54,0,0,1,63.44,1.83L328.27,337l-113,112.33ZM480,418.67a30.67,30.67,0,0,1-30.71,30.66H259L376.08,333a46.24,46.24,0,0,1,59.44-.16L480,370.59Z' }), h("path", { d: 'M384,32H64A64,64,0,0,0,0,96V352a64.11,64.11,0,0,0,48,62V152a72,72,0,0,1,72-72H446A64.11,64.11,0,0,0,384,32Z' })));
}
iconConfirm() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Ccircle fill='%232CD865' cx='256' cy='256' r='256'/%3E%3Cg id='Icon_1_'%3E%3Cg%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M208,301.4l-55.4-55.5c-1.5-1.5-4-1.6-5.6-0.1l-23.4,22.3c-1.6,1.6-1.7,4.1-0.1,5.7l81.6,81.4 c3.1,3.1,8.2,3.1,11.3,0l171.8-171.7c1.6-1.6,1.6-4.2-0.1-5.7l-23.4-22.3c-1.6-1.5-4.1-1.5-5.6,0.1L213.7,301.4 C212.1,303,209.6,303,208,301.4z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E`;
}
iconReverseCamera() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M352,0H160C72,0,0,72,0,160v192c0,88,72,160,160,160h192c88,0,160-72,160-160V160C512,72,440,0,352,0z M356.7,365.8l-3.7,3.3c-27,23.2-61.4,35.9-96.8,35.9c-72.4,0-135.8-54.7-147-125.6c-0.3-1.9-2-3.3-3.9-3.3H64 c-3.3,0-5.2-3.8-3.2-6.4l61.1-81.4c1.6-2.1,4.7-2.1,6.4-0.1l63.3,81.4c2,2.6,0.2,6.5-3.2,6.5h-40.6c-2.5,0-4.5,2.4-3.9,4.8 c11.5,51.5,59.2,90.6,112.4,90.6c26.4,0,51.8-9.7,73.7-27.9l3.1-2.5c1.6-1.3,3.9-1.1,5.3,0.3l18.5,18.6 C358.5,361.6,358.4,364.3,356.7,365.8z M451.4,245.6l-61,83.5c-1.6,2.2-4.8,2.2-6.4,0.1l-63.3-83.3c-2-2.6-0.1-6.4,3.2-6.4h40.8 c2.5,0,4.4-2.3,3.9-4.8c-5.1-24.2-17.8-46.5-36.5-63.7c-21.2-19.4-48.2-30.1-76-30.1c-26.5,0-52.6,9.7-73.7,27.3l-3.1,2.5 c-1.6,1.3-3.9,1.2-5.4-0.3l-18.5-18.5c-1.6-1.6-1.5-4.3,0.2-5.9l3.5-3.1c27-23.2,61.4-35.9,96.8-35.9c38,0,73.9,13.7,101.2,38.7 c23.2,21.1,40.3,55.2,45.7,90.1c0.3,1.9,1.9,3.4,3.9,3.4h41.3C451.4,239.2,453.3,243,451.4,245.6z'/%3E%3C/g%3E%3C/svg%3E`;
}
iconRetake() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Ccircle fill='%23727A87' cx='256' cy='256' r='256'/%3E%3Cg id='Icon_5_'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M394.2,142L370,117.8c-1.6-1.6-4.1-1.6-5.7,0L258.8,223.4c-1.6,1.6-4.1,1.6-5.7,0L147.6,117.8 c-1.6-1.6-4.1-1.6-5.7,0L117.8,142c-1.6,1.6-1.6,4.1,0,5.7l105.5,105.5c1.6,1.6,1.6,4.1,0,5.7L117.8,364.4c-1.6,1.6-1.6,4.1,0,5.7 l24.1,24.1c1.6,1.6,4.1,1.6,5.7,0l105.5-105.5c1.6-1.6,4.1-1.6,5.7,0l105.5,105.5c1.6,1.6,4.1,1.6,5.7,0l24.1-24.1 c1.6-1.6,1.6-4.1,0-5.7L288.6,258.8c-1.6-1.6-1.6-4.1,0-5.7l105.5-105.5C395.7,146.1,395.7,143.5,394.2,142z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E`;
}
iconFlashOff() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M498,483.7L42.3,28L14,56.4l149.8,149.8L91,293.8c-2.5,3-0.1,7.2,3.9,7.2h143.9c1.6,0,2.7,1.3,2.4,2.7 L197.6,507c-1,4.4,5.8,6.9,8.9,3.2l118.6-142.8L469.6,512L498,483.7z'/%3E%3Cpath class='st0' d='M449,218.2c2.5-3,0.1-7.2-3.9-7.2H301.2c-1.6,0-2.7-1.3-2.4-2.7L342.4,5c1-4.4-5.8-6.9-8.9-3.2L214.9,144.6 l161.3,161.3L449,218.2z'/%3E%3C/g%3E%3C/svg%3E`;
}
iconFlashOn() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M287.2,211c-1.6,0-2.7-1.3-2.4-2.7L328.4,5c1-4.4-5.8-6.9-8.9-3.2L77,293.8c-2.5,3-0.1,7.2,3.9,7.2h143.9 c1.6,0,2.7,1.3,2.4,2.7L183.6,507c-1,4.4,5.8,6.9,8.9,3.2l242.5-292c2.5-3,0.1-7.2-3.9-7.2L287.2,211L287.2,211z'/%3E%3C/svg%3E`;
}
iconFlashAuto() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M287.2,211c-1.6,0-2.7-1.3-2.4-2.7L328.4,5c1-4.4-5.8-6.9-8.9-3.2L77,293.8c-2.5,3-0.1,7.2,3.9,7.2h143.9 c1.6,0,2.7,1.3,2.4,2.7L183.6,507c-1,4.4,5.8,6.9,8.9,3.2l242.5-292c2.5-3,0.1-7.2-3.9-7.2L287.2,211L287.2,211z'/%3E%3Cg%3E%3Cpath class='st0' d='M321.3,186l74-186H438l74,186h-43.5l-11.9-32.5h-80.9l-12,32.5H321.3z M415.8,47.9l-27.2,70.7h54.9l-27.2-70.7 H415.8z'/%3E%3C/g%3E%3C/svg%3E`;
}
render() {
// const acceptStyles = { transform: `rotate(${-this.rotation}deg)` };
const acceptStyles = {};
return (h("div", { class: "camera-wrapper" }, h("div", { class: "camera-header" }, h("section", { class: "items" }, h("div", { class: "item close", onClick: e => this.handleClose(e) }, h("img", { src: this.iconExit() })), h("div", { class: "item flash", onClick: e => this.handleFlashClick(e) }, this.flashModes.length > 0 && (h("div", null, this.flashMode == 'off' ? h("img", { src: this.iconFlashOff() }) : '', this.flashMode == 'auto' ? h("img", { src: this.iconFlashAuto() }) : '', this.flashMode == 'flash' ? h("img", { src: this.iconFlashOn() }) : ''))))), (this.hasCamera === false || !!this.deviceError) && (h("div", { class: "no-device" }, h("h2", null, this.noDevicesText), h("label", { htmlFor: "_pwa-elements-camera-input" }, this.noDevicesButtonText), h("input", { type: "file", id: "_pwa-elements-camera-input", onChange: this.handleFileInputChange, accept: "image/*", class: "select-file-button" }))), this.photoSrc ? (h("div", { class: "accept" }, h("div", { class: "accept-image", style: Object.assign({ backgroundImage: `url(${this.photoSrc})` }, acceptStyles) }))) : (h("div", { class: "camera-video" }, this.showShutterOverlay && (h("div", { class: "shutter-overlay" })), this.hasImageCapture() ? (h("video", { ref: (el) => this.videoElement = el, onLoadedMetaData: this.handleVideoMetadata, autoplay: true, playsinline: true })) : (h("canvas", { ref: (el) => this.canvasElement = el, width: "100%", height: "100%" })), h("canvas", { class: "offscreen-image-render", ref: e => this.offscreenCanvas = e, width: "100%", height: "100%" }))), this.hasCamera && (h("div", { class: "camera-footer" }, !this.photo ? ([
!this.hidePicker && (h("div", { class: "pick-image", onClick: this.handlePickFile }, h("label", { htmlFor: "_pwa-elements-file-pick" }, this.iconPhotos()), h("input", { type: "file", id: "_pwa-elements-file-pick", onChange: this.handleFileInputChange, accept: "image/*", class: "pick-image-button" }))),
h("div", { class: "shutter", onClick: this.handleShutterClick }, h("div", { class: "shutter-button" })),
h("div", { class: "rotate", onClick: this.handleRotateClick }, h("img", { src: this.iconReverseCamera() })),
]) : (h("section", { class: "items" }, h("div", { class: "item accept-cancel", onClick: e => this.handleCancelPhoto(e) }, h("img", { src: this.iconRetake() })), h("div", { class: "item accept-use", onClick: e => this.handleAcceptPhoto(e) }, h("img", { src: this.iconConfirm() }))))))));
}
static get is() { return "pwa-camera"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["camera.css"]
};
}
static get styleUrls() {
return {
"$": ["camera.css"]
};
}
static get assetsDirs() { return ["icons"]; }
static get properties() {
return {
"facingMode": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "facing-mode",
"reflect": false,
"defaultValue": "'user'"
},
"handlePhoto": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "(photo: Blob) => void",
"resolved": "(photo: Blob) => void",
"references": {
"Blob": {
"location": "global"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
},
"hidePicker": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "hide-picker",
"reflect": false,
"defaultValue": "false"
},
"handleNoDeviceError": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "(e?: any) => void",
"resolved": "(e?: any) => void",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
},
"noDevicesText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "no-devices-text",
"reflect": false,
"defaultValue": "'No camera found'"
},
"noDevicesButtonText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "no-devices-button-text",
"reflect": false,
"defaultValue": "'Choose image'"
}
};
}
static get states() {
return {
"photo": {},
"photoSrc": {},
"showShutterOverlay": {},
"flashIndex": {},
"hasCamera": {},
"rotation": {},
"deviceError": {}
};
}
static get elementRef() { return "el"; }
}

View File

@@ -1,15 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<circle fill="#2CD865" cx="256" cy="256" r="256"/>
<g id="Icon_1_">
<g>
<g>
<path fill="#FFFFFF" d="M208,301.4l-55.4-55.5c-1.5-1.5-4-1.6-5.6-0.1l-23.4,22.3c-1.6,1.6-1.7,4.1-0.1,5.7l81.6,81.4
c3.1,3.1,8.2,3.1,11.3,0l171.8-171.7c1.6-1.6,1.6-4.2-0.1-5.7l-23.4-22.3c-1.6-1.5-4.1-1.5-5.6,0.1L213.7,301.4
C212.1,303,209.6,303,208,301.4z"/>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 715 B

View File

@@ -1,13 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<g id="Icon_5_">
<g>
<path fill="#FFFFFF" d="M402.2,134L378,109.8c-1.6-1.6-4.1-1.6-5.7,0L258.8,223.4c-1.6,1.6-4.1,1.6-5.7,0L139.6,109.8
c-1.6-1.6-4.1-1.6-5.7,0L109.8,134c-1.6,1.6-1.6,4.1,0,5.7l113.5,113.5c1.6,1.6,1.6,4.1,0,5.7L109.8,372.4c-1.6,1.6-1.6,4.1,0,5.7
l24.1,24.1c1.6,1.6,4.1,1.6,5.7,0l113.5-113.5c1.6-1.6,4.1-1.6,5.7,0l113.5,113.5c1.6,1.6,4.1,1.6,5.7,0l24.1-24.1
c1.6-1.6,1.6-4.1,0-5.7L288.6,258.8c-1.6-1.6-1.6-4.1,0-5.7l113.5-113.5C403.7,138.1,403.7,135.5,402.2,134z"/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 853 B

View File

@@ -1,14 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M287.2,211c-1.6,0-2.7-1.3-2.4-2.7L328.4,5c1-4.4-5.8-6.9-8.9-3.2L77,293.8c-2.5,3-0.1,7.2,3.9,7.2h143.9
c1.6,0,2.7,1.3,2.4,2.7L183.6,507c-1,4.4,5.8,6.9,8.9,3.2l242.5-292c2.5-3,0.1-7.2-3.9-7.2L287.2,211L287.2,211z"/>
<g>
<path class="st0" d="M321.3,186l74-186H438l74,186h-43.5l-11.9-32.5h-80.9l-12,32.5H321.3z M415.8,47.9l-27.2,70.7h54.9l-27.2-70.7
H415.8z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 797 B

View File

@@ -1,14 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g>
<path class="st0" d="M498,483.7L42.3,28L14,56.4l149.8,149.8L91,293.8c-2.5,3-0.1,7.2,3.9,7.2h143.9c1.6,0,2.7,1.3,2.4,2.7
L197.6,507c-1,4.4,5.8,6.9,8.9,3.2l118.6-142.8L469.6,512L498,483.7z"/>
<path class="st0" d="M449,218.2c2.5-3,0.1-7.2-3.9-7.2H301.2c-1.6,0-2.7-1.3-2.4-2.7L342.4,5c1-4.4-5.8-6.9-8.9-3.2L214.9,144.6
l161.3,161.3L449,218.2z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 767 B

View File

@@ -1,10 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M287.2,211c-1.6,0-2.7-1.3-2.4-2.7L328.4,5c1-4.4-5.8-6.9-8.9-3.2L77,293.8c-2.5,3-0.1,7.2,3.9,7.2h143.9
c1.6,0,2.7,1.3,2.4,2.7L183.6,507c-1,4.4,5.8,6.9,8.9,3.2l242.5-292c2.5-3,0.1-7.2-3.9-7.2L287.2,211L287.2,211z"/>
</svg>

Before

Width:  |  Height:  |  Size: 646 B

View File

@@ -1,14 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<circle fill="#727A87" cx="256" cy="256" r="256"/>
<g id="Icon_5_">
<g>
<path fill="#FFFFFF" d="M394.2,142L370,117.8c-1.6-1.6-4.1-1.6-5.7,0L258.8,223.4c-1.6,1.6-4.1,1.6-5.7,0L147.6,117.8
c-1.6-1.6-4.1-1.6-5.7,0L117.8,142c-1.6,1.6-1.6,4.1,0,5.7l105.5,105.5c1.6,1.6,1.6,4.1,0,5.7L117.8,364.4c-1.6,1.6-1.6,4.1,0,5.7
l24.1,24.1c1.6,1.6,4.1,1.6,5.7,0l105.5-105.5c1.6-1.6,4.1-1.6,5.7,0l105.5,105.5c1.6,1.6,4.1,1.6,5.7,0l24.1-24.1
c1.6-1.6,1.6-4.1,0-5.7L288.6,258.8c-1.6-1.6-1.6-4.1,0-5.7l105.5-105.5C395.7,146.1,395.7,143.5,394.2,142z"/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 904 B

View File

@@ -1,15 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<g>
<path fill="#FFFFFF" d="M352,0H160C72,0,0,72,0,160v192c0,88,72,160,160,160h192c88,0,160-72,160-160V160C512,72,440,0,352,0z
M356.7,365.8l-3.7,3.3c-27,23.2-61.4,35.9-96.8,35.9c-72.4,0-135.8-54.7-147-125.6c-0.3-1.9-2-3.3-3.9-3.3H64
c-3.3,0-5.2-3.8-3.2-6.4l61.1-81.4c1.6-2.1,4.7-2.1,6.4-0.1l63.3,81.4c2,2.6,0.2,6.5-3.2,6.5h-40.6c-2.5,0-4.5,2.4-3.9,4.8
c11.5,51.5,59.2,90.6,112.4,90.6c26.4,0,51.8-9.7,73.7-27.9l3.1-2.5c1.6-1.3,3.9-1.1,5.3,0.3l18.5,18.6
C358.5,361.6,358.4,364.3,356.7,365.8z M451.4,245.6l-61,83.5c-1.6,2.2-4.8,2.2-6.4,0.1l-63.3-83.3c-2-2.6-0.1-6.4,3.2-6.4h40.8
c2.5,0,4.4-2.3,3.9-4.8c-5.1-24.2-17.8-46.5-36.5-63.7c-21.2-19.4-48.2-30.1-76-30.1c-26.5,0-52.6,9.7-73.7,27.3l-3.1,2.5
c-1.6,1.3-3.9,1.2-5.4-0.3l-18.5-18.5c-1.6-1.6-1.5-4.3,0.2-5.9l3.5-3.1c27-23.2,61.4-35.9,96.8-35.9c38,0,73.9,13.7,101.2,38.7
c23.2,21.1,40.3,55.2,45.7,90.1c0.3,1.9,1.9,3.4,3.9,3.4h41.3C451.4,239.2,453.3,243,451.4,245.6z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

View File

@@ -1,155 +0,0 @@
/**
* MediaStream ImageCapture polyfill
*
* @license
* Copyright 2018 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export let ImageCapture = window.ImageCapture;
if (typeof ImageCapture === 'undefined') {
ImageCapture = class {
/**
* TODO https://www.w3.org/TR/image-capture/#constructors
*
* @param {MediaStreamTrack} videoStreamTrack - A MediaStreamTrack of the 'video' kind
*/
constructor(videoStreamTrack) {
if (videoStreamTrack.kind !== 'video')
throw new DOMException('NotSupportedError');
this._videoStreamTrack = videoStreamTrack;
if (!('readyState' in this._videoStreamTrack)) {
// Polyfill for Firefox
this._videoStreamTrack.readyState = 'live';
}
// MediaStream constructor not available until Chrome 55 - https://www.chromestatus.com/feature/5912172546752512
this._previewStream = new MediaStream([videoStreamTrack]);
this.videoElement = document.createElement('video');
this.videoElementPlaying = new Promise(resolve => {
this.videoElement.addEventListener('playing', resolve);
});
if (HTMLMediaElement) {
this.videoElement.srcObject = this._previewStream; // Safari 11 doesn't allow use of createObjectURL for MediaStream
}
else {
this.videoElement.src = URL.createObjectURL(this._previewStream);
}
this.videoElement.muted = true;
this.videoElement.setAttribute('playsinline', ''); // Required by Safari on iOS 11. See https://webkit.org/blog/6784
this.videoElement.play();
this.canvasElement = document.createElement('canvas');
// TODO Firefox has https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
this.canvas2dContext = this.canvasElement.getContext('2d');
}
/**
* https://w3c.github.io/mediacapture-image/index.html#dom-imagecapture-videostreamtrack
* @return {MediaStreamTrack} The MediaStreamTrack passed into the constructor
*/
get videoStreamTrack() {
return this._videoStreamTrack;
}
/**
* Implements https://www.w3.org/TR/image-capture/#dom-imagecapture-getphotocapabilities
* @return {Promise<PhotoCapabilities>} Fulfilled promise with
* [PhotoCapabilities](https://www.w3.org/TR/image-capture/#idl-def-photocapabilities)
* object on success, rejected promise on failure
*/
getPhotoCapabilities() {
return new Promise(function executorGPC(resolve, reject) {
// TODO see https://github.com/w3c/mediacapture-image/issues/97
const MediaSettingsRange = {
current: 0, min: 0, max: 0,
};
resolve({
exposureCompensation: MediaSettingsRange,
exposureMode: 'none',
fillLightMode: ['none'],
focusMode: 'none',
imageHeight: MediaSettingsRange,
imageWidth: MediaSettingsRange,
iso: MediaSettingsRange,
redEyeReduction: false,
whiteBalanceMode: 'none',
zoom: MediaSettingsRange,
});
reject(new DOMException('OperationError'));
});
}
/**
* Implements https://www.w3.org/TR/image-capture/#dom-imagecapture-setoptions
* @param {Object} photoSettings - Photo settings dictionary, https://www.w3.org/TR/image-capture/#idl-def-photosettings
* @return {Promise<void>} Fulfilled promise on success, rejected promise on failure
*/
setOptions(_photoSettings = {}) {
return new Promise(function executorSO(_resolve, _reject) {
// TODO
});
}
/**
* TODO
* Implements https://www.w3.org/TR/image-capture/#dom-imagecapture-takephoto
* @return {Promise<Blob>} Fulfilled promise with [Blob](https://www.w3.org/TR/FileAPI/#blob)
* argument on success; rejected promise on failure
*/
takePhoto() {
const self = this;
return new Promise(function executorTP(resolve, reject) {
// `If the readyState of the MediaStreamTrack provided in the constructor is not live,
// return a promise rejected with a new DOMException whose name is "InvalidStateError".`
if (self._videoStreamTrack.readyState !== 'live') {
return reject(new DOMException('InvalidStateError'));
}
self.videoElementPlaying.then(() => {
try {
self.canvasElement.width = self.videoElement.videoWidth;
self.canvasElement.height = self.videoElement.videoHeight;
self.canvas2dContext.drawImage(self.videoElement, 0, 0);
self.canvasElement.toBlob(resolve);
}
catch (error) {
reject(new DOMException('UnknownError'));
}
});
});
}
/**
* Implements https://www.w3.org/TR/image-capture/#dom-imagecapture-grabframe
* @return {Promise<ImageBitmap>} Fulfilled promise with
* [ImageBitmap](https://www.w3.org/TR/html51/webappapis.html#webappapis-images)
* argument on success; rejected promise on failure
*/
grabFrame() {
const self = this;
return new Promise(function executorGF(resolve, reject) {
// `If the readyState of the MediaStreamTrack provided in the constructor is not live,
// return a promise rejected with a new DOMException whose name is "InvalidStateError".`
if (self._videoStreamTrack.readyState !== 'live') {
return reject(new DOMException('InvalidStateError'));
}
self.videoElementPlaying.then(() => {
try {
self.canvasElement.width = self.videoElement.videoWidth;
self.canvasElement.height = self.videoElement.videoHeight;
self.canvas2dContext.drawImage(self.videoElement, 0, 0);
// TODO polyfill https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmapFactories/createImageBitmap for IE
resolve(window.createImageBitmap(self.canvasElement));
}
catch (error) {
reject(new DOMException('UnknownError'));
}
});
});
}
};
}
window.ImageCapture = ImageCapture;

View File

@@ -1,37 +0,0 @@
:host {
position: fixed;
bottom: 20px;
left: 0;
right: 0;
display: flex;
opacity: 0;
}
:host(.in) {
transition: opacity 300ms;
opacity: 1;
}
:host(.out) {
transition: opacity 1s;
opacity: 0;
}
.wrapper {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.toast {
font-family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
background-color: #eee;
color: black;
border-radius: 5px;
padding: 10px 15px;
font-size: 14px;
font-weight: 500;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
}

View File

@@ -1,93 +0,0 @@
import { h } from '@stencil/core';
export class PWAToast {
constructor() {
this.message = undefined;
this.duration = 2000;
this.closing = null;
}
hostData() {
const classes = {
out: !!this.closing
};
if (this.closing !== null) {
classes['in'] = !this.closing;
}
return {
class: classes
};
}
componentDidLoad() {
setTimeout(() => {
this.closing = false;
});
setTimeout(() => {
this.close();
}, this.duration);
}
close() {
this.closing = true;
setTimeout(() => {
this.el.parentNode.removeChild(this.el);
}, 1000);
}
render() {
return (h("div", { class: "wrapper" }, h("div", { class: "toast" }, this.message)));
}
static get is() { return "pwa-toast"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["toast.css"]
};
}
static get styleUrls() {
return {
"$": ["toast.css"]
};
}
static get properties() {
return {
"message": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "message",
"reflect": false
},
"duration": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "duration",
"reflect": false,
"defaultValue": "2000"
}
};
}
static get states() {
return {
"closing": {}
};
}
static get elementRef() { return "el"; }
}

View File

@@ -1 +0,0 @@
export {};

View File

@@ -1 +0,0 @@
export * from './components';

File diff suppressed because one or more lines are too long

View File

@@ -1 +0,0 @@
import{p as promiseResolve,b as bootstrapLazy}from"./index-1c5c47b4.js";export{s as setNonce}from"./index-1c5c47b4.js";var patchBrowser=function(){var e=import.meta.url;var a={};if(e!==""){a.resourcesUrl=new URL(".",e).href}return promiseResolve(a)};patchBrowser().then((function(e){return bootstrapLazy([["pwa-camera-modal",[[1,"pwa-camera-modal",{facingMode:[1,"facing-mode"],hidePicker:[4,"hide-picker"],present:[64],dismiss:[64]}]]],["pwa-action-sheet",[[1,"pwa-action-sheet",{header:[1],cancelable:[4],options:[16],open:[32]}]]],["pwa-toast",[[1,"pwa-toast",{message:[1],duration:[2],closing:[32]}]]],["pwa-camera",[[1,"pwa-camera",{facingMode:[1,"facing-mode"],handlePhoto:[16],hidePicker:[4,"hide-picker"],handleNoDeviceError:[16],noDevicesText:[1,"no-devices-text"],noDevicesButtonText:[1,"no-devices-button-text"],photo:[32],photoSrc:[32],showShutterOverlay:[32],flashIndex:[32],hasCamera:[32],rotation:[32],deviceError:[32]}]]],["pwa-camera-modal-instance",[[1,"pwa-camera-modal-instance",{facingMode:[1,"facing-mode"],hidePicker:[4,"hide-picker"],noDevicesText:[1,"no-devices-text"],noDevicesButtonText:[1,"no-devices-button-text"]},[[16,"keyup","handleBackdropKeyUp"]]]]]],e)}));

View File

@@ -1 +0,0 @@
import{p as promiseResolve,b as bootstrapLazy}from"./index-1c5c47b4.js";export{s as setNonce}from"./index-1c5c47b4.js";var patchEsm=function(){return promiseResolve()};var defineCustomElements=function(e,o){if(typeof window==="undefined")return Promise.resolve();return patchEsm().then((function(){return bootstrapLazy([["pwa-camera-modal",[[1,"pwa-camera-modal",{facingMode:[1,"facing-mode"],hidePicker:[4,"hide-picker"],present:[64],dismiss:[64]}]]],["pwa-action-sheet",[[1,"pwa-action-sheet",{header:[1],cancelable:[4],options:[16],open:[32]}]]],["pwa-toast",[[1,"pwa-toast",{message:[1],duration:[2],closing:[32]}]]],["pwa-camera",[[1,"pwa-camera",{facingMode:[1,"facing-mode"],handlePhoto:[16],hidePicker:[4,"hide-picker"],handleNoDeviceError:[16],noDevicesText:[1,"no-devices-text"],noDevicesButtonText:[1,"no-devices-button-text"],photo:[32],photoSrc:[32],showShutterOverlay:[32],flashIndex:[32],hasCamera:[32],rotation:[32],deviceError:[32]}]]],["pwa-camera-modal-instance",[[1,"pwa-camera-modal-instance",{facingMode:[1,"facing-mode"],hidePicker:[4,"hide-picker"],noDevicesText:[1,"no-devices-text"],noDevicesButtonText:[1,"no-devices-button-text"]},[[16,"keyup","handleBackdropKeyUp"]]]]]],o)}))};export{defineCustomElements};

View File

@@ -1 +0,0 @@
import{r as registerInstance,c as createEvent,h,g as getElement}from"./index-1c5c47b4.js";var actionSheetCss=':host{z-index:1000;position:fixed;top:0;left:0;width:100%;height:100%;display:-ms-flexbox;display:flex;contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif}.wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:rgba(0, 0, 0, 0);-webkit-transition:400ms background-color cubic-bezier(.36,.66,.04,1);transition:400ms background-color cubic-bezier(.36,.66,.04,1)}.wrapper.open{background-color:rgba(0, 0, 0, 0.32)}.title{color:#999;height:23px;line-height:23px;padding-bottom:17px;-webkit-padding-end:16px;padding-inline-end:16px;-webkit-padding-start:16px;padding-inline-start:16px;padding-left:16px;padding-right:16px;padding-top:20px}.content{width:568px;-ms-flex-item-align:end;align-self:flex-end;background-color:#fff;-webkit-transition:400ms -webkit-transform cubic-bezier(.36,.66,.04,1);transition:400ms -webkit-transform cubic-bezier(.36,.66,.04,1);transition:400ms transform cubic-bezier(.36,.66,.04,1);transition:400ms transform cubic-bezier(.36,.66,.04,1), 400ms -webkit-transform cubic-bezier(.36,.66,.04,1);-webkit-transform:translateY(100%);transform:translateY(100%)}.wrapper.open .content{-webkit-transform:translateY(0%);transform:translateY(0%)}@media only screen and (max-width: 568px){.content{width:100%}}.action-sheet-option{cursor:pointer;height:52px;line-height:52px}.action-sheet-button{color:rgb(38, 38, 38);font-size:16px;-webkit-padding-end:16px;padding-inline-end:16px;-webkit-padding-start:16px;padding-inline-start:16px;padding-left:16px;padding-right:16px;padding-top:0px}.action-sheet-button:hover{background-color:#F6F6F6}';var PWAActionSheet=function(){function e(e){registerInstance(this,e);this.onSelection=createEvent(this,"onSelection",7);this.header=undefined;this.cancelable=true;this.options=[];this.open=false}e.prototype.componentDidLoad=function(){var e=this;requestAnimationFrame((function(){e.open=true}))};e.prototype.dismiss=function(){if(this.cancelable){this.close()}};e.prototype.close=function(){var e=this;this.open=false;setTimeout((function(){e.el.parentNode.removeChild(e.el)}),500)};e.prototype.handleOptionClick=function(e,t){e.stopPropagation();this.onSelection.emit(t);this.close()};e.prototype.render=function(){var e=this;return h("div",{class:"wrapper".concat(this.open?" open":""),onClick:function(){return e.dismiss()}},h("div",{class:"content"},h("div",{class:"title"},this.header),this.options.map((function(t,n){return h("div",{class:"action-sheet-option",onClick:function(t){return e.handleOptionClick(t,n)}},h("div",{class:"action-sheet-button"},t.title))}))))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PWAActionSheet.style=actionSheetCss;export{PWAActionSheet as pwa_action_sheet};

View File

@@ -1 +0,0 @@
var __awaiter=this&&this.__awaiter||function(e,t,n,o){function r(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,i){function a(e){try{s(o.next(e))}catch(e){i(e)}}function c(e){try{s(o["throw"](e))}catch(e){i(e)}}function s(e){e.done?n(e.value):r(e.value).then(a,c)}s((o=o.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},o,r,i,a;return a={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function c(e){return function(t){return s([e,t])}}function s(c){if(o)throw new TypeError("Generator is already executing.");while(a&&(a=0,c[0]&&(n=0)),n)try{if(o=1,r&&(i=c[0]&2?r["return"]:c[0]?r["throw"]||((i=r["return"])&&i.call(r),0):r.next)&&!(i=i.call(r,c[1])).done)return i;if(r=0,i)c=[c[0]&2,i.value];switch(c[0]){case 0:case 1:i=c;break;case 4:n.label++;return{value:c[1],done:false};case 5:n.label++;r=c[1];c=[0];continue;case 7:c=n.ops.pop();n.trys.pop();continue;default:if(!(i=n.trys,i=i.length>0&&i[i.length-1])&&(c[0]===6||c[0]===2)){n=0;continue}if(c[0]===3&&(!i||c[1]>i[0]&&c[1]<i[3])){n.label=c[1];break}if(c[0]===6&&n.label<i[1]){n.label=i[1];i=c;break}if(i&&n.label<i[2]){n.label=i[2];n.ops.push(c);break}if(i[2])n.ops.pop();n.trys.pop();continue}c=t.call(e,n)}catch(e){c=[6,e];r=0}finally{o=i=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,g as getElement}from"./index-1c5c47b4.js";var cameraModalInstanceCss=":host{z-index:1000;position:fixed;top:0;left:0;width:100%;height:100%;display:-ms-flexbox;display:flex;contain:strict;--inset-width:600px;--inset-height:600px}.wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:rgba(0, 0, 0, 0.15)}.content{-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, 0.2);box-shadow:0px 0px 5px rgba(0, 0, 0, 0.2);width:var(--inset-width);height:var(--inset-height);max-height:100%}@media only screen and (max-width: 600px){.content{width:100%;height:100%}}";var PWACameraModal=function(){function e(e){var t=this;registerInstance(this,e);this.onPhoto=createEvent(this,"onPhoto",7);this.noDeviceError=createEvent(this,"noDeviceError",7);this.handlePhoto=function(e){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){this.onPhoto.emit(e);return[2]}))}))};this.handleNoDeviceError=function(e){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){this.noDeviceError.emit(e);return[2]}))}))};this.facingMode="user";this.hidePicker=false;this.noDevicesText="No camera found";this.noDevicesButtonText="Choose image"}e.prototype.handleBackdropClick=function(e){if(e.target!==this.el){this.onPhoto.emit(null)}};e.prototype.handleComponentClick=function(e){e.stopPropagation()};e.prototype.handleBackdropKeyUp=function(e){if(e.key==="Escape"){this.onPhoto.emit(null)}};e.prototype.render=function(){var e=this;return h("div",{class:"wrapper",onClick:function(t){return e.handleBackdropClick(t)}},h("div",{class:"content"},h("pwa-camera",{onClick:function(t){return e.handleComponentClick(t)},facingMode:this.facingMode,hidePicker:this.hidePicker,handlePhoto:this.handlePhoto,handleNoDeviceError:this.handleNoDeviceError,noDevicesButtonText:this.noDevicesButtonText,noDevicesText:this.noDevicesText})))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PWACameraModal.style=cameraModalInstanceCss;export{PWACameraModal as pwa_camera_modal_instance};

View File

@@ -1 +0,0 @@
var __awaiter=this&&this.__awaiter||function(e,t,n,r){function i(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function a(e){try{c(r.next(e))}catch(e){o(e)}}function s(e){try{c(r["throw"](e))}catch(e){o(e)}}function c(e){e.done?n(e.value):i(e.value).then(a,s)}c((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(e){return function(t){return c([e,t])}}function c(s){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(n=0)),n)try{if(r=1,i&&(o=s[0]&2?i["return"]:s[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,s[1])).done)return o;if(i=0,o)s=[s[0]&2,o.value];switch(s[0]){case 0:case 1:o=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;i=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!o||s[1]>o[0]&&s[1]<o[3])){n.label=s[1];break}if(s[0]===6&&n.label<o[1]){n.label=o[1];o=s;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(s);break}if(o[2])n.ops.pop();n.trys.pop();continue}s=t.call(e,n)}catch(e){s=[6,e];i=0}finally{r=o=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h}from"./index-1c5c47b4.js";var cameraModalCss=":host{z-index:1000;position:fixed;top:0;left:0;width:100%;height:100%;display:-ms-flexbox;display:flex;contain:strict}.wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:rgba(0, 0, 0, 0.15)}.content{-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, 0.2);box-shadow:0px 0px 5px rgba(0, 0, 0, 0.2);width:600px;height:600px}";var PWACameraModal=function(){function e(e){registerInstance(this,e);this.onPhoto=createEvent(this,"onPhoto",7);this.noDeviceError=createEvent(this,"noDeviceError",7);this.facingMode="user";this.hidePicker=false}e.prototype.present=function(){return __awaiter(this,void 0,void 0,(function(){var e;var t=this;return __generator(this,(function(n){e=document.createElement("pwa-camera-modal-instance");e.facingMode=this.facingMode;e.hidePicker=this.hidePicker;e.addEventListener("onPhoto",(function(e){return __awaiter(t,void 0,void 0,(function(){var t;return __generator(this,(function(n){if(!this._modal){return[2]}t=e.detail;this.onPhoto.emit(t);return[2]}))}))}));e.addEventListener("noDeviceError",(function(e){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){this.noDeviceError.emit(e);return[2]}))}))}));document.body.append(e);this._modal=e;return[2]}))}))};e.prototype.dismiss=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(!this._modal){return[2]}this._modal&&this._modal.parentNode.removeChild(this._modal);this._modal=null;return[2]}))}))};e.prototype.render=function(){return h("div",null)};return e}();PWACameraModal.style=cameraModalCss;export{PWACameraModal as pwa_camera_modal};

File diff suppressed because one or more lines are too long

View File

@@ -1 +0,0 @@
import{r as registerInstance,h,g as getElement,H as Host}from"./index-1c5c47b4.js";var toastCss=':host{position:fixed;bottom:20px;left:0;right:0;display:-ms-flexbox;display:flex;opacity:0}:host(.in){-webkit-transition:opacity 300ms;transition:opacity 300ms;opacity:1}:host(.out){-webkit-transition:opacity 1s;transition:opacity 1s;opacity:0}.wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.toast{font-family:-apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;background-color:#eee;color:black;border-radius:5px;padding:10px 15px;font-size:14px;font-weight:500;-webkit-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.20);box-shadow:0px 1px 2px rgba(0, 0, 0, 0.20)}';var PWAToast=function(){function t(t){registerInstance(this,t);this.message=undefined;this.duration=2e3;this.closing=null}t.prototype.hostData=function(){var t={out:!!this.closing};if(this.closing!==null){t["in"]=!this.closing}return{class:t}};t.prototype.componentDidLoad=function(){var t=this;setTimeout((function(){t.closing=false}));setTimeout((function(){t.close()}),this.duration)};t.prototype.close=function(){var t=this;this.closing=true;setTimeout((function(){t.el.parentNode.removeChild(t.el)}),1e3)};t.prototype.__stencil_render=function(){return h("div",{class:"wrapper"},h("div",{class:"toast"},this.message))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});t.prototype.render=function(){return h(Host,this.hostData(),this.__stencil_render())};return t}();PWAToast.style=toastCss;export{PWAToast as pwa_toast};

File diff suppressed because it is too large Load Diff

Some files were not shown because too many files have changed in this diff Show More