IBM Carbon Components - Svelte

DatePicker

<script>
  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
</script>

<DatePicker datePickerType="single" dateFormat="m/d/Y">
  <DatePickerInput labelText="Schedule a meeting" placeholder="mm/dd/yyyy" />
</DatePicker>

• When set datePickerType to single or range, the calendar will show out
• dateFormat use only one character for day, month and year. e.g. March 15, 2021 - m/d/Y(03/15/2021) or Y-m-d(2021-03-15)

Reference

• IBM Carbon Design System
• Carbon-Svelte Storybook
• Github - Carbon Svelte Components

Table

colspan & rowspan Examples

<table>
  <tr>
    <td>Row 1, Col 1</td>
    <td>Row 1, Col 2</td>
  </tr>
  <tr>
    <td colspan="2">Row 2, Col 1 & Col 2</td>
  </tr>
</table>

<table>
  <tr>
    <th>Row 1, Col 1</th>
    <th>Row 1, Col 2</th>
  </tr>
  <tr>
    <td>Row 2, Col 1</td>
    <td rowspan="2">Row 2 & Row 3, Col 2</td>
  </tr>
  <tr>
    <td>Row 3, Col 1</td>
  </tr>
</table>

Link

Jump to a topic

If you want to link to a specific topic/section of a page, Add an id attribute and give a name to the section of the page.

SvelteJS notes

Up and running

Get Start

See instruction for Svelte Template

npx degit sveltejs/template svelte-app
cd svelte-app
npm install

// dev mode
npm run dev
// -- create your app


// production mode
npm run build
npm run start

• main.js

1
2
3
4
5
6
7

import App from './App.svelte';

const app = new App({
	target: document.body,
});

export default app;

• App.svelte

1

<h1>Hello, World!</h1>

FAQ

How can I add an image to my svelte component?

• For static files(images, videos, etc) must be under public folder. Use the path relative to public/index.html.
• For Svelte component files, they should be under src folder.

For example, if you want to show image under public/static/flag.jpg and show button from src/Button.svelte:

DOM

getElementById()

Note: no “#” at the beginning of the id

1

let element = document.getElementById("message");

Get/Set InnerText

1
2

const renderedText = htmlElement.innerText
htmlElement.innerText = string

JavaScript

URL functions

Router

Full Router Examples

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

func prepareRoutes(router *gin.Engine) {
	// Web Resources
	router.Static("/static", "web/dist")

	// API Routes
	api := router.Group("/api/v1")
	admin := api.Group("/admin")
	public := api.Group("/public")
	registered := api.Group("/")
	sameRegisteredUser := api.Group("/user")

	prepareMiddleware(admin, public, registered, sameRegisteredUser)

	admin.GET("/users", listUsers)
	admin.GET("/places", listPlaces)
	admin.POST("/places", createPlace)
	admin.POST("/events", createEvent)
	admin.PUT("/place/:placeId", updatePlace)
	admin.PUT("/event/:eventId", updateEvent)
	admin.DELETE("/event/:eventId", cancelEvent)

	sameRegisteredUser.GET("/:userId", getUser)
	sameRegisteredUser.PUT("/:userId", updateUser)
	sameRegisteredUser.DELETE("/:userId", disableUser)

	registered.POST("/buy/:seatId", buyTicket)

	public.GET("/place/:placeId", getPlace)
	public.GET("/events", listEvents)
	public.GET("/event/:eventId", getEvent)
	public.POST("/users", createUser) // TODO Checar, me huele raro......
	public.POST("/login", loginUser)
}

How to serve static files in root page?

1
2
3
4

api:=r.Group("/api")
api.GET("/json", serveJSON)

r.Static("/","./public")

Will get the following error:

Best Practices

Use locators

Locators come with auto waiting and retry-ability. Auto waiting means that Playwright performs a range of actionability checks on the elements, such as ensuring the element is visible and enabled before it performs the click. To make tests resilient, we recommend prioritizing user-facing attributes and explicit contracts.

Commands

Get unique values

SELECT DISTINCT report_date FROM daily;

How many records?

SELECT count(*) from vanall WHERE Shipped_Date="2021-01-12";

Last Shipped Date

-- Current max date in the table
SELECT max(Shipped_Date) from vanall;

Insert Or Update

INSERT or replace INTO daily (date,name_id,testing_hour,sellable,liquidation,quality,concession) 
VALUES ("2021-02-01",5,1.0,2,3,4,5);

Insert data get from other tables

-- insert new data from temp into table vanall
INSERT INTO vanall
SELECT * from temp where Shipped_Date>"2021-01-12";

Update

UPDATE associate SET show=1 WHERE show IS NULL

Delete

-- remove all the assets that are not shipped yet
DELETE FROM vanall WHERE Shipped_Date is NULL

-- delete table
DROP TABLE associate;

Creating Sub-Query

with yvr3(facility,class,cat, sub) as
(select "YVR3", class,cat, count(*) as sub from amazon where location < "QC-76.11"
group by class,cat),

yyc1(facility, class,cat,sub) as 
(select "YYC1", class,cat,count(*) as sub from amazon where location > "QC-76.10"
group by class,cat)

select yyc1.facility,yyc1.class,yyc1.cat, yyc1.sub from yyc1
left join yvr3
on (yyc1.class=yvr3.class and yyc1.cat=yvr3.cat)
where yvr3.cat is null
order by yyc1.sub desc;

FULL OUT JOIN

Sqlite doesn’t support FULL OUT JOIN or RIGHT JOIN. It’s easy to perform a RIGHT OUTER JOIN in SQLite by simply reversing the order of tables and using a LEFT OUTER JOIN. It’s also possible to do a FULL OUTER JOIN by combining LEFT OUTER JOINs using the UNION keyword.

Preparing Website Files In Github

Signup or login to Github

Create Repository In Github

1. Click Create Repository

   

2. Repository name: renewalfamily/website > Click Create Repository

T51A Two Way Radio

We get these free T51A radio from Uline. It can cover more than 1 mile range for us to communicate within warehouse.