JavaScript에서 사용자 정의 모양으로 자동차 보험 청구 앱을 작성하는 방법
추천0
페이지 정보
작성자 GrapeCity
작성일 2018-10-01 00:00 조회 3,483회
댓글 0건
본문
첨부파일
관련링크
SpreadJS 사용자 정의 모양은 다양한 방법으로 구현할 수있는 유용한 기능입니다. 요구 사항에 맞게 모양을 그리고 하이라이트, 정보 설명 선과 같은 상호 작용을 추가하거나, 데이터베이스 작업을 수행 할 수 있습니다. 이 포스팅에서는 자동차 보험금 청구 애플리케이션에 대한 대화식 손상 다이어그램을 작성하기 위해 사용자 정의 모양을 사용하는 방법을 살펴 봅니다.
클릭 가능한 섹션이있는 JavaScript 자동차 보험 앱
이와 같은 앱을 사용하면 사용자는 보험 회사의 웹 사이트로 이동하여 손상된 자동차 영역을 클릭하여 클레임을 작성할 수 있습니다. 이 샘플에는 클릭 가능한 상호 작용만 포함되어 있지만 "제출"버튼을 추가하여 정보를 데이터베이스에 저장하거나 "삭제"버튼을 다시 시작하거나 로그인 페이지를 추가 할 수 있습니다.
1 단계 : 사용자 정의 모양 SpreadJS 프로젝트 설정
이 프로젝트에 필요한 모든 SpreadJS 파일을 참조하여 시작하고 사용할 변수 중 일부를 초기화 합니다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Car Insurance Claim</title>
<link href="./css/gc.spread.sheets.excel2013white.12.0.0.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./scripts/gc.spread.sheets.all.12.0.0.js"></script>
<script type="text/javascript" src="./scripts/interop/gc.spread.excelio.12.0.0.js"></script>
<script type="text/javascript" src="./scripts/plugins/gc.spread.sheets.shapes.12.0.0.js"></script>
<script type="text/javascript">
GC.Spread.Sheets.LicenseKey = "YOUR KEY HERE";
</script>
<script>
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("spreadSheet"), { sheetCount: 1 });
var activeSheet = spread.getActiveSheet();
}
</script>
</head>
<body>
<div id="spreadSheet" style="width: 825px; height: 800px; border: 1px solid gray"></div>
</body>
</html>
2 단계 : 다이어그램에 png를 앱에 추가
이제 다이어그램을 추가하겠습니다. 기본적으로이 다이어그램 위에 도형을 만들것 입니다. 디자인팀으로 부터 png을 받아 옵니다.
getCellRect 함수를 사용 하여 다이어그램을 배치 할 수있는 위치를 설정합니다.
function addCarDiagram(sheet) {
sheet.setColumnWidth(0, 200);
var startCellRect = sheet.getCellRect(0, 0),
endCellRect = sheet.getCellRect(22, 10),
spreadElement = document.getElementById("spreadSheet");
var offset = spreadElement.getBoundingClientRect();
{
top: offset.top + document.body.scrollTop;
left: offset.left + document.body.scrollLeft;
}
var x = offset.left - sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader),
y = offset.top - sheet.getRowHeight(0, GC.Spread.Sheets.SheetArea.colHeader);
sheet.pictures.add("CarDiagram", "./Car Diagram.png", x, y, endCellRect.x - startCellRect.x, endCellRect.y - startCellRect.y);
sheet.addSpan(1, 3, 1, 2);
sheet.getCell(1, 3).text("Passenger Side");
sheet.getCell(1, 3).font("12pt Arial");
sheet.addSpan(20, 3, 1, 2);
sheet.getCell(20, 3).text("Driver's Side");
sheet.getCell(20, 3).font("12pt Arial");
}
앱에 다이어그램 추가
3 단계 : 다이어그램 위에 도형 추가
이 프로젝트를 위해, 다이어그램에있는 모든 모양의 위치와 크기를 정의하는 별도의 시트를 만들었습니다. 영역을 만든 다음 시트에서 해당 배열를 통해 쉽게 작업을 할 수 있습니다.
function initDamageAreaShapes(spread) {
var sheet = spread.getSheet(0);
spread.addSheet(1, new GC.Spread.Sheets.Worksheet("Damage_Areas"));
var startColor = "lightgreen";
var damageAreaSheet = spread.getSheet(1);
var damageAreas = ["Area", "Left", "Top", "Width", "Height", "Stroke Color", "Line Width"],
front = ["front", 11, 136, 57, 167, "blue", 3],
hood = ["hood", 123, 149, 142, 140, "blue", 3],
frontWindshield = ["frontWindshield", 257, 149, 70, 140, "blue", 3],
roof = ["roof", 325, 165, 158, 110, "blue", 3],
rearTop = ["rearTop", 481, 149, 158, 143, "blue", 3],
rear = ["rear", 661, 134, 63, 171, "blue", 3],
leftFront = ["leftFront", 110, 310, 157, 85, "blue", 3],
leftFrontDoor = ["leftFrontDoor", 257, 283, 140, 112, "blue", 3],
leftBackDoor = ["leftBackDoor", 392, 283, 121, 111, "blue", 3],
leftBack = ["leftBack", 465, 284, 168, 110, "blue", 3],
rightFront = ["rightFront", 111, 44, 156, 76, "blue", 3],
rightFrontDoor = ["rightFrontDoor", 258, 44, 139, 113, "blue", 3],
rightBackDoor = ["rightBackDoor", 391, 44, 123, 115, "blue", 3],
rightBack = ["rightBack", 465, 44, 168, 110, "blue", 3];
damageAreaSheet.setArray(0, 0, [
damageAreas,
front,
hood,
frontWindshield,
roof,
rearTop,
rear,
leftFront,
leftFrontDoor,
leftBackDoor,
leftBack,
rightFront,
rightFrontDoor,
rightBackDoor,
rightBack
]);
}
일단 정의되면, 각 모양에 대한 모델을 만들 수 있습니다. 위치와 크기는 시트에 정의되어 있으므로 해당 셀을 참조하시면 됩니다. SVG 경로를 사용하여 모양을 정의할 수도 있습니다. SVG 경로는 모양의 왼쪽 상단 점을 기준으로합니다.
var frontModel = {
left: "=Damage_Areas!B2",
top: "=Damage_Areas!C2",
width: "=Damage_Areas!D2",
height: "=Damage_Areas!E2",
options: {
fill: {
type: 1,
color: startColor,
transparency: "0.5"
}
},
path: [
[
["M", 1, 8],
["L", 17, 4],
["L", 19, 0],
["L", 31, 0],
["L", 33, 4],
["L", 51, 4],
["L", 56, 10],
["L", 57, 49],
["L", 52, 50],
["L", 51, 116],
["L", 57, 118],
["L", 57, 158],
["L", 51, 163],
["L", 34, 162],
["L", 31, 166],
["L", 19, 167],
["L", 18, 163],
["L", 1, 158],
["Z"]
]
]
};
그런 다음 방금 정의한 모델을 사용하여 해당 모양을 추가 할 수 있습니다.
sheet.shapes.add('front', frontModel);
4 단계 : 사용자 정의 JavaScript 셰이프에 상호 작용 추가
도형이 추가되었으므로 사용자가 도형을 선택할 때, 도형의 색상을 변경하기 위한 코드를 작성합니다.
(function shapeClicked() {
var host = spread.getHost();
host.addEventListener("click", function (e) {
var offset = getOffset(host), left = offset.left, top = offset.top;
var x = e.pageX - left, y = e.pageY - top;
var hitTest = activeSheet.hitTest(x, y);
if (hitTest.shapeHitInfo) {
var shape = hitTest.shapeHitInfo.shape;
var shapeStyle = shape.style();
shapeStyle.fill.color = (shapeStyle.fill.color === "rgb(255,0,0)" ? "rgb(144,238,144)" : "rgb(255,0,0)");
shape.style(shapeStyle);
}
});
})();
이것은 getOffset 이라는 사용자 정의 함수를 사용하여, 다음과 같이 정의됩니다.
function getOffset(elem) {
var docElem, win, box = { top: 0, left: 0 }, doc = elem && elem.ownerDocument;
if (!doc) {
return;
}
docElem = doc.documentElement;
if (typeof elem.getBoundingClientRect !== void 0) {
box = elem.getBoundingClientRect();
}
return {
top: box.top + window.pageYOffset - docElem.clientTop,
left: box.left + window.pageXOffset - docElem.clientLeft
};
}
JavaScript 셰이프에 상호 작용 추가
5 단계 : 앱에 버튼 모양 추가
사용자가 어떤 유형의 자동차 사고를 당했는지 선택할 수 있도록 몇 가지 옵션을 추가 할 수 있습니다. 버튼 모양을 만들어 모양 그룹에 추가합니다.
function initAccidentType(sheet) {
var rowHeaderWidth = sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader),
colHeaderHeight = sheet.getRowHeight(0, GC.Spread.Sheets.SheetArea.colHeader),
shapeType = GC.Spread.Sheets.Shapes.AutoShapeType.roundedRectangle,
hAlignment = GC.Spread.Sheets.HorizontalAlign.center,
vAlignment = GC.Spread.Sheets.VerticalAlign.center,
accidentTypeShapeInfo = [[23, 1, "bumperDamage", "Bumper Damage"], [25, 1, "roofDamage", "Roof Damage"], [23, 5, "overheated", "Overheated"], [25, 5, "other", "Other"]],
cellRect,
margin = 5;
sheet.addSpan(23, 0, 4, 1);
var cell = sheet.getCell(23, 0);
cell.text("Accident Type");
cell.hAlign(hAlignment);
cell.vAlign(vAlignment);
cell.font("20pt Arial");
var accidentTypeButtonsGroup = new GC.Spread.Sheets.Shapes.GroupShape(sheet, "accidentTypeButtons");
for (var s = 0; s < accidentTypeShapeInfo.length; s++) {
var tempShapeInfo = accidentTypeShapeInfo[s];
sheet.addSpan(tempShapeInfo[0], tempShapeInfo[1], 2, 4);
cellRect = sheet.getCellRect(tempShapeInfo[0], tempShapeInfo[1]);
var tempShape = sheet.shapes.add(tempShapeInfo[2], shapeType, cellRect.x - rowHeaderWidth + margin, cellRect.y - colHeaderHeight + margin, cellRect.width - (2 * margin), cellRect.height - (2 * margin));
tempShape.text(tempShapeInfo[3]);
var tempShapeStyle = tempShape.style();
tempShapeStyle.line.color = "darkgreen";
tempShapeStyle.fill.color = "lightgreen";
tempShapeStyle.fill.transparency = 0.5;
tempShapeStyle.textFrame.hAlign = hAlignment;
tempShapeStyle.textFrame.vAlign = vAlignment;
tempShapeStyle.textEffect.color = 'black';
tempShape.style(tempShapeStyle);
accidentTypeButtonsGroup.add(tempShape);
}
return accidentTypeButtonsGroup;
}
사고의 심각성을 선택하는 버튼을 추가 할 수도 있습니다.
function initSeverity(sheet) {
var rowHeaderWidth = sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader),
colHeaderHeight = sheet.getRowHeight(0, GC.Spread.Sheets.SheetArea.colHeader),
shapeType = GC.Spread.Sheets.Shapes.AutoShapeType.roundedRectangle,
hAlignment = GC.Spread.Sheets.HorizontalAlign.center,
vAlignment = GC.Spread.Sheets.VerticalAlign.center,
severityShapeInfo = [[28, "highSeverity", "High"], [30, "mediumSeverity", "Medium"], [32, "lowSeverity", "Low"]],
cellRect,
margin = 5;
sheet.addSpan(28, 0, 6, 1);
var cell = sheet.getCell(28, 0);
cell.text("Severity");
cell.hAlign(hAlignment);
cell.vAlign(vAlignment);
cell.font("20pt Arial");
var severityButtonsGroup = new GC.Spread.Sheets.Shapes.GroupShape(sheet, "severityButtons");
for (var s = 0; s < severityShapeInfo.length; s++) {
var tempShapeInfo = severityShapeInfo[s];
sheet.addSpan(tempShapeInfo[0], 1, 2, 2);
cellRect = sheet.getCellRect(tempShapeInfo[0], 1);
var tempShape = sheet.shapes.add(tempShapeInfo[1], shapeType, cellRect.x - rowHeaderWidth + margin, cellRect.y - colHeaderHeight + margin, cellRect.width - (2 * margin), cellRect.height - (2 * margin));
tempShape.text(tempShapeInfo[2]);
var tempShapeStyle = tempShape.style();
tempShapeStyle.line.color = "darkgreen";
tempShapeStyle.fill.color = "lightgreen";
tempShapeStyle.fill.transparency = 0.5;
tempShapeStyle.textFrame.hAlign = hAlignment;
tempShapeStyle.textFrame.vAlign = vAlignment;
tempShapeStyle.textEffect.color = 'black';
tempShape.style(tempShapeStyle);
severityButtonsGroup.add(tempShape);
}
return severityButtonsGroup;
}
JavaScript 셰이프에 상호 작용 추가
자동차의 어느 부분을 선택했는지에 따라, 사고 유형이 선택되도록 셰이프에 부가 기능을 추가 할 수 있습니다. 이를 위해 앞서 정의한 shapeClicked 함수에 추가 아래와 같이 추가 합니다.
if (hitTest.shapeHitInfo) {
var shape = hitTest.shapeHitInfo.shape;
var shapeStyle = shape.style();
shapeStyle.fill.color = (shapeStyle.fill.color === "rgb(255,0,0)" ? "rgb(144,238,144)" : "rgb(255,0,0)");
shape.style(shapeStyle);
//Roof Damage
if (shape.name() == "roof") {
var button = accidentTypeButtonsGroup.find("roofDamage");
var buttonStyle = button.style();
buttonStyle.fill.color = (buttonStyle.fill.color === "rgb(255,0,0)" ? "rgb(144,238,144)" : "rgb(255,0,0)");
button.style(buttonStyle);
}//Bumper Damage
else if (shape.name() == "front" || shape.name() == "rear") {
var front = activeSheet.shapes.get("front"),
rear = activeSheet.shapes.get("rear");
var button = accidentTypeButtonsGroup.find("bumperDamage");
if (front.style().fill.color === "rgb(255,0,0)" || rear.style().fill.color === "rgb(255,0,0)") {
buttonStyle = button.style();
buttonStyle.fill.color = "rgb(255,0,0)";
button.style(buttonStyle);
} else if (front.style().fill.color === "rgb(144,238,144)" && rear.style().fill.color === "rgb(144,238,144)") {
buttonStyle = button.style();
buttonStyle.fill.color = "rgb(144,238,144)";
button.style(buttonStyle);
}
}//Severity
else if (shape.name() === "highSeverity" || shape.name() === "mediumSeverity" || shape.name() === "lowSeverity") {
var buttonArray = severityButtonsGroup.all();
for (var s = 0; s < buttonArray.length; s++) {
if (buttonArray[s].name() !== shape.name()) {
var buttonStyle = buttonArray[s].style();
buttonStyle.fill.color = "rgb(144,238,144)"
buttonArray[s].style(buttonStyle);
}
}
}
}
다른 모양에 따라 모양 동작 추가
6 단계 : 양식 필드 모양 추가
청구서를 작성하려면, 사용자가 정보를 입력 할 수있는 장소가 필요하므로, 해당 정보 섹션을 만들어 줍니다.
function initInfoArea(sheet) {
var border = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
sheet.addSpan(28, 4, 1, 3);
sheet.getCell(28, 4).text("Driver Name:");
sheet.addSpan(28, 7, 1, 3);
sheet.getRange(28, 7, 1, 3).borderBottom(border);
sheet.addSpan(29, 4, 1, 3);
sheet.getCell(29, 4).text("Vehicle Make/Model/Year:");
sheet.addSpan(29, 7, 1, 3);
sheet.getRange(29, 7, 1, 3).borderBottom(border);
sheet.addSpan(30, 4, 1, 6);
sheet.getCell(30, 4).text("Details:");
sheet.addSpan(31, 4, 3, 6);
sheet.getRange(31, 4, 3, 6).setBorder(border, { all: true });
}
양식 필드 모양 추가
7 단계 : 스프레드 시트 기능 제거
마지막으로 눈금 선 및 헤더와 같이 사용자가 필요하지 않은 스프레드 시트의 기능을 제거해 줍니다.
var workbookShapes = activeSheet.shapes.all();
for (var s = 0; s < workbookShapes.length; s++) {
workbookShapes[s].allowMove(false);
workbookShapes[s].allowResize(false);
}
activeSheet.setRowCount(35);
activeSheet.setColumnCount(10);
activeSheet.name("Car Insurance Claim");
activeSheet.options.gridline = { showVerticalGridline: false, showHorizontalGridline: false };
activeSheet.options.colHeaderVisible = false;
activeSheet.options.rowHeaderVisible = false;
spread.options.allowUserDragDrop = false;
spread.options.tabStripVisible = false;
커스텀 셰이프 자동차 보험 앱
위의 내용이 사용자 정의 모양으로 간단한 응용 프로그램을 만드는 데 필요한 전부입니다. 물론 이것은 하나의 예시일뿐이며, 원하시면, SpreadJS에서 사용자 정의 모양를 통해 더 많은 기능을 구현할 수 있습니다.
댓글목록
등록된 댓글이 없습니다.
