From d7a8eb9629a8de8b7157508d0c64c312a432d9d2 Mon Sep 17 00:00:00 2001 From: jhjang <jhjang@maprex.co.kr> Date: 화, 26 10월 2021 15:55:55 +0900 Subject: [PATCH] API 관련 VIEW 제작 --- src/main/webapp/scripts/app/api/apiSetting.controller.js | 25 ++ src/main/webapp/views/api/apiMonitor.html | 59 +++++ src/main/webapp/views/api/apiAuth.html | 52 +++++ src/main/webapp/scripts/app/api/apiMonitor.controller.js | 25 ++ src/main/webapp/i18n/ko/global.json | 13 + src/main/webapp/scripts/app/api/apiAuth.controller.js | 26 ++ src/main/webapp/scripts/app/api/api.js | 84 ++++++++ src/main/webapp/index.html | 4 src/main/webapp/scripts/main.js | 9 src/main/webapp/views/api/apiSetting.html | 274 +++++++++++++++++++++++++++ src/main/webapp/views/common/sidebar.html | 28 ++ 11 files changed, 598 insertions(+), 1 deletions(-) diff --git a/src/main/webapp/i18n/ko/global.json b/src/main/webapp/i18n/ko/global.json index bc0e36b..86dbb3b 100644 --- a/src/main/webapp/i18n/ko/global.json +++ b/src/main/webapp/i18n/ko/global.json @@ -611,6 +611,7 @@ "priority": "�슦�꽑 �닚�쐞", "importance": "以묒슂�룄", "assignee": "�떞�떦�옄", + "assigneeTeam" : "�떞�떦遺��꽌", "register": "�벑濡앹옄", "startDate": "�떆�옉�씪", "endDate": "醫낅즺�씪", @@ -745,5 +746,17 @@ }, "calendar": { "calendarTitle": "罹섎┛�뜑" + }, + "api" : { + "auth" : "API �씤利�", + "setting" : "API �꽕�젙", + "monitor" : "API 紐⑤땲�꽣留�", + "application" : "�뼱�뵆由ъ��씠�뀡 �씠由�", + "token" : "�넗�겙", + "apiKey": "API �넗�겙 �벑濡�", + "delete" : "�넗�겙 �궘�젣", + "create" : "�넗�겙 �깮�꽦", + "example" : "�궗�슜 �삁�떆", + "columnSetting" : "湲곕낯媛� �꽕�젙" } } \ No newline at end of file diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html index 9de0058..1a9dae4 100644 --- a/src/main/webapp/index.html +++ b/src/main/webapp/index.html @@ -42,6 +42,10 @@ <link type="text/css" rel="stylesheet" href="custom_components/js-html-diff/js-html-diff.css"> <link type="text/css" rel="stylesheet" href="assets/styles/main.css?version=4.0.34"> <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:300,400,500"> + + <!-- 援ш�李⑦듃 --> + <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> + <!-- google font --> <link rel="shortcut icon" href="assets/images/favicon.png"/> <!-- �씠誘몄� �븘�씠肄� --> diff --git a/src/main/webapp/scripts/app/api/api.js b/src/main/webapp/scripts/app/api/api.js new file mode 100644 index 0000000..d25f981 --- /dev/null +++ b/src/main/webapp/scripts/app/api/api.js @@ -0,0 +1,84 @@ +/** + * Created by maprex on 2021-10-26 + */ +'use strict'; + +define(['app'], + function (app) { + app.config(function ($stateProvider) { + $stateProvider + .state('api', { + abstract : true, + url : "/api", + templateUrl : "views/common/app.html", + resolve : { + authorize : function (Auth) { + return Auth.authorize(); + }, + translatePartialLoader : function ($translate, $translatePartialLoader) { + $translatePartialLoader.addPart('global'); + + return $translate.refresh(); + } + } + }) + .state('api.auth', { + url : '/auth', + data : { + authorities : ['CUSTOM_FIELD_TOTAL'] + }, + templateUrl : 'views/api/apiAuth.html', + controller : "apiAuthController", + resolve : { + loadController : ["$q", function ($q) { + var deferred = $q.defer(); + require(["apiAuthController", + , 'formSubmit', 'jsShortCut', 'inputRegex'], function () { + deferred.resolve(); + }); + + return deferred.promise; + }] + } + }) + .state('api.setting', { + url : '/setting', + data : { + authorities : ['CUSTOM_FIELD_TOTAL'] + }, + templateUrl : 'views/api/apiSetting.html', + controller : "apiSettingController", + resolve : { + loadController : ["$q", function ($q) { + var deferred = $q.defer(); + require(["apiSettingController", + , 'formSubmit', 'jsShortCut', 'inputRegex'], function () { + deferred.resolve(); + }); + + return deferred.promise; + }] + } + }) + .state('api.monitor', { + url : '/monitor', + data : { + authorities : ['CUSTOM_FIELD_TOTAL'] + }, + templateUrl : 'views/api/apiMonitor.html', + controller : "apiMonitorController", + resolve : { + loadController : ["$q", function ($q) { + var deferred = $q.defer(); + require(["apiMonitorController", + , 'formSubmit', 'jsShortCut', 'inputRegex'], function () { + deferred.resolve(); + }); + + return deferred.promise; + }] + } + }); + + }) + }); diff --git a/src/main/webapp/scripts/app/api/apiAuth.controller.js b/src/main/webapp/scripts/app/api/apiAuth.controller.js new file mode 100644 index 0000000..9640d25 --- /dev/null +++ b/src/main/webapp/scripts/app/api/apiAuth.controller.js @@ -0,0 +1,26 @@ +/** + * Created by maprex on 2021-10-26 + */ +'use strict'; + +define([ + 'app', 'angular' + ], + function (app, angular) { + app.controller('apiAuthController', ['$scope', '$rootScope', '$log', '$resourceProvider', 'SweetAlert', '$timeout', '$filter', + function ($scope, $rootScope, $log, $resourceProvider, SweetAlert, $timeout, $filter) { + + $scope.fn = { + + }; + + $scope.vm = { + form : { + name : "�솃�럹�씠吏� 蹂�議� �깘吏� �떆�뒪�뀥", + token : "77751b541212de21a44f87024174d3bd" + } + }; + + + }]); + }); diff --git a/src/main/webapp/scripts/app/api/apiMonitor.controller.js b/src/main/webapp/scripts/app/api/apiMonitor.controller.js new file mode 100644 index 0000000..5d08ec8 --- /dev/null +++ b/src/main/webapp/scripts/app/api/apiMonitor.controller.js @@ -0,0 +1,25 @@ +/** + * Created by maprex on 2021-10-26 + */ +'use strict'; + +define([ + 'app', 'angular' + ], + function (app, angular) { + app.controller('apiMonitorController', ['$scope', '$rootScope', '$log', '$resourceProvider','SweetAlert', '$timeout', '$filter', + function ($scope, $rootScope, $log, $resourceProvider, SweetAlert, $timeout, $filter) { + + $scope.fn = { + + }; + + $scope.vm = { + form : { + + } + }; + + + }]); + }); diff --git a/src/main/webapp/scripts/app/api/apiSetting.controller.js b/src/main/webapp/scripts/app/api/apiSetting.controller.js new file mode 100644 index 0000000..38e3b7c --- /dev/null +++ b/src/main/webapp/scripts/app/api/apiSetting.controller.js @@ -0,0 +1,25 @@ +/** + * Created by maprex on 2021-10-26 + */ +'use strict'; + +define([ + 'app', 'angular' + ], + function (app, angular) { + app.controller('apiSettingController', ['$scope', '$rootScope', '$log', '$resourceProvider', 'SweetAlert', '$timeout', '$filter', + function ($scope, $rootScope, $log, $resourceProvider, SweetAlert, $timeout, $filter) { + + $scope.fn = { + + }; + + $scope.vm = { + form : { + + } + }; + + + }]); + }); diff --git a/src/main/webapp/scripts/main.js b/src/main/webapp/scripts/main.js index 34cb456..ea145f2 100644 --- a/src/main/webapp/scripts/main.js +++ b/src/main/webapp/scripts/main.js @@ -317,7 +317,13 @@ 'issueListTimelineController' : 'app/issue/issueListTimeline.controller', // �씠�뒋 媛꾪듃李⑦듃 'projectTimelineController' :'app/project/projectTimeline.controller', // �봽濡쒖젥�듃 媛꾪듃李⑦듃 'ganttService' : 'components/gantt/gantt.service', // 媛꾪듃�뿉 愿��젴�맂 �넻�떊�쓣 �떞�떦�븳�떎. - 'chartLoader' : 'components/gantt/googleChartLoader' // 李⑦듃 洹몃━湲� api(援ш�李⑦듃) + 'chartLoader' : 'components/gantt/googleChartLoader', // 李⑦듃 洹몃━湲� api(援ш�李⑦듃) + + /* api */ + 'apiRoute' : 'app/api/api', // api route �젙蹂� + 'apiAuthController' :'app/api/apiAuth.controller', // api �씤利� 而⑦듃濡ㅻ윭 + 'apiSettingController' : 'app/api/apiSetting.controller', // api �꽕�젙 而⑦듃濡ㅻ윭 + 'apiMonitorController' : 'app/api/apiMonitor.controller', // api 紐⑤땲�꽣留� 而⑦듃濡ㅻ윭 }, shim : { 'jquery-ui' : { @@ -504,6 +510,7 @@ 'qnaRoute', 'supportRoute', 'ganttRoute', + 'apiRoute', 'ganttService', 'workflowService', 'issueSearchService', diff --git a/src/main/webapp/views/api/apiAuth.html b/src/main/webapp/views/api/apiAuth.html new file mode 100644 index 0000000..e74ce86 --- /dev/null +++ b/src/main/webapp/views/api/apiAuth.html @@ -0,0 +1,52 @@ +<div class="row"> + <div class="col-sm-12"> + <div class="element-wrapper"> + <div class="element-actions" ng-if="$root.checkMngPermission('USER_PERMISSION_MNG_ISSUE_STATUS')"> + </div> + <h6 class="element-header" translate="api.apiKey"> + OWL API �궗�슜�옄 �벑濡� + </h6> + + <div class="element-box"> + <form role="form" name="issueStatusAddForm"> + <div class="form-group"> + <label for="apiApplicationForm1"><span translate="api.application">�뼱�뵆由ъ��씠�뀡 �씠由�</span> <code class="highlighter-rouge">*</code></label> + <input id="apiApplicationForm1" + name="name" + type="text" + class="form-control" + autofocus + kr-input + autocomplete="off" + maxlength="50" + ng-model="vm.form.name" + ng-maxlength="20" + required> + </div> + + <div class="form-group"> + <label for="apiApplicationForm2"><span translate="api.token">�넗�겙</span></label> + <div class="input-group"> + <input id="apiApplicationForm2" + type="text" + name="token" + class="form-control" + disabled + ng-model="vm.form.token" + required> + </div> + </div> + </form> + + <div class="modal-footer buttons-on-right"> + <button type="button" class="btn btn-md btn-grey" ng-click="fn.cancel()"><span translate="api.delete">痍⑥냼</span></button> + <button type="button" class="btn btn-md btn-primary bold" + js-short-cut + js-short-cut-action="(fn.formCheck(issueStatusAddForm.$invalid) || $root.spinner) ? null : fn.formSubmit()" + ng-click="fn.formSubmit()"><span translate="api.create">�깮�꽦</span> + </button> + </div> + </div> + </div> + </div> +</div> diff --git a/src/main/webapp/views/api/apiMonitor.html b/src/main/webapp/views/api/apiMonitor.html new file mode 100644 index 0000000..95d7584 --- /dev/null +++ b/src/main/webapp/views/api/apiMonitor.html @@ -0,0 +1,59 @@ +<script type="text/javascript"> + google.charts.load('current', {'packages':['line']}); + google.charts.setOnLoadCallback(drawChart); + + function drawChart() { + + var data = new google.visualization.DataTable(); + data.addColumn('number', '�궇吏�'); + data.addColumn('number', '�솃�럹�씠吏� 蹂�議� �깘吏�'); + data.addColumn('number', '寃쎌쑀吏� �깘吏�'); + data.addColumn('number', '�씪媛� 議고쉶'); + + data.addRows([ + [1, 37.8, 80.8, 41.8], + [2, 30.9, 69.5, 32.4], + [3, 25.4, 57, 25.7], + [4, 11.7, 18.8, 10.5], + [5, 11.9, 17.6, 10.4], + [6, 8.8, 13.6, 7.7], + [7, 7.6, 12.3, 9.6], + [8, 12.3, 29.2, 10.6], + [9, 16.9, 42.9, 14.8], + [10, 12.8, 30.9, 11.6], + [11, 5.3, 7.9, 4.7], + [12, 6.6, 8.4, 5.2], + [13, 4.8, 6.3, 3.6], + [14, 4.2, 6.2, 3.4] + ]); + + var options = { + chart: { + title: '�씪媛� �쑀�삎蹂� API �궗�슜 �쁽�솴', + subtitle: '理쒓렐 15�씪' + }, + width: 900, + height: 500 + }; + + var chart = new google.charts.Line(document.getElementById('linechart_material')); + + chart.draw(data, google.charts.Line.convertOptions(options)); + } +</script> + +<div class="row"> + <div class="col-sm-12"> + <div class="element-wrapper"> + <div class="element-actions" ng-if="$root.checkMngPermission('USER_PERMISSION_MNG_ISSUE_STATUS')"> + </div> + <h6 class="element-header" translate="api.monitor"> + 紐⑤땲�꽣留� + </h6> + + <div class="element-box"> + <div id="linechart_material"></div> + </div> + </div> + </div> +</div> diff --git a/src/main/webapp/views/api/apiSetting.html b/src/main/webapp/views/api/apiSetting.html new file mode 100644 index 0000000..b470af1 --- /dev/null +++ b/src/main/webapp/views/api/apiSetting.html @@ -0,0 +1,274 @@ +<div class="row"> + <div class="col-sm-12"> + <div class="element-wrapper"> + <div class="element-actions" ng-if="$root.checkMngPermission('USER_PERMISSION_MNG_ISSUE_STATUS')"> + </div> + <h6 class="element-header" translate="api.columnSetting"> + �꽕�젙 + </h6> + + <!-- + <div class="os-tabs-w"> + <div class="os-tabs-controls"> + <ul class="nav nav-tabs upper"> + <li class="nav-item"> + <a class="nav-link cursor" translate="api.example">�궗�슜 �삁�떆</a> + </li> + </ul> + </div> + </div> + + <div class="element-box"> + </div> +--> + <div class="row"> + <div class="col-md-4"> + <div class="form-group mb10"> + <label for="issueAddForm4" class="issue-label"> <span + translate="issue.issueType">�씠�뒋 ���엯</span> + </label> + <select id="issueAddForm4" + name="issueType" + class="form-control input-sm issue-select-label" + ng-model="vm.form.issueTypeId" + ng-change="fn.getIssueTypeCustomFields()" + ng-style="{ 'color' : fn.getOptionColor(vm.issueTypes, vm.form.issueTypeId) }" + required> + <option ng-style="{ 'color' : '#353535' }" value="">�솃�럹�씠吏� 蹂�議� 媛먯� + </option> + <option ng-style="{ 'color' : '#353535' }" value="">寃쎌쑀吏� �깘吏� + </option> + <option ng-repeat="issueType in vm.issueTypes" + ng-style="{ 'color' : issueType.color, 'font-weight': 600 }" + value="{{issueType.id}}">�뿈 {{issueType.name}} + </option> + </select> + </div> + </div> + + </div> + + <div class="element-box"> + + <form role="form" name="issueAddForm"> + <div class="form-group mb10"> + <label for="issueAddForm1" class="issue-label"><span translate="issue.issueTitle">�씪媛� �젣紐�</span> </label> + <input id="issueAddForm1" + class="form-control input-sm" + ng-model="vm.form.title" + name="title" + required + kr-input + value="�솃�럹�씠吏� 蹂�議� 媛먯� 嫄�" + maxlength="300" + autocomplete="off" + autofocus + owl-auto-focus> + </div> + <div class="row"> + <div class="col-lg-4"> + <div class="form-group mb10"> + <label class="issue-label"> <span translate="common.project">�봽濡쒖젥�듃</span> </label> + <select id="issueAddForm6" + name="issueType" + class="form-control input-sm issue-select-label" + ng-model="vm.form.issueTypeId" + ng-change="fn.getIssueTypeCustomFields()" + ng-style="{ 'color' : fn.getOptionColor(vm.issueTypes, vm.form.issueTypeId) }" + required> + <option ng-style="{ 'color' : '#353535' }" value="">�솃�럹�씠吏� 蹂�議� 媛먯� + </option> + <option ng-style="{ 'color' : '#353535' }" value="">MCF + </option> + <option ng-repeat="issueType in vm.issueTypes" + ng-style="{ 'color' : issueType.color, 'font-weight': 600 }" + value="{{issueType.id}}">�뿈 {{issueType.name}} + </option> + </select> + </div> + </div> + + <div class="col-lg-8 bdl1"> + <div class="row"> + + <div class="col-md-4"> + <div class="form-group mb10"> + <label for="issueAddForm2" class="issue-label"> + <span translate="common.priority">�슦�꽑 �닚�쐞</span> + </label> + <select id="issueAddForm2" + name="priority" + class="form-control input-sm issue-select-label" + ng-model="vm.form.priorityId" + ng-style="{ 'color' : fn.getOptionColor(vm.priorities, vm.form.priorityId) }" + required> + <option value="" ng-style="{ 'color' : '#353535' }"> + <span >蹂댄넻</span> + </option> + <option value="" ng-style="{ 'color' : '#353535' }"> + <span >�넂�쓬</span> + </option> + <option value="" ng-style="{ 'color' : '#353535' }"> + <span >�궙�쓬</span> + </option> + <option ng-repeat="priority in vm.priorities" + ng-style="{ 'color' : priority.color, 'font-weight': 600 }" + value="{{priority.id}}" + translate="{{priority.name}}"> + </option> + </select> + </div> + </div> + <div class="col-md-4"> + <div class="form-group mb10"> + <label for="issueAddForm3" class="issue-label"> <span + translate="common.importance">以묒슂�룄</span> </label> + <select id="issueAddForm3" + name="severity" + class="form-control input-sm issue-select-label" + ng-model="vm.form.severityId" + ng-style="{ 'color' : fn.getOptionColor(vm.severities, vm.form.severityId) }" + required> + <option value="" ng-style="{ color : '#353535' }"> + <span>蹂댄넻</span> + </option> + <option value="" ng-style="{ color : '#353535' }"> + <span>�넂�쓬</span> + </option> + <option value="" ng-style="{ color : '#353535' }"> + <span>�궙�쓬</span> + </option> + <option ng-repeat="severity in vm.severities" + ng-style="{ color : severity.color, 'font-weight': 600 }" + value="{{severity.id}}" + translate="{{severity.name}}"> + </option> + </select> + </div> + </div> + </div> + </div> + + </div> + + <div class="form-group mb10"> + <label class="issue-label"><span translate="common.content">�궡�슜</span></label> + <summernote + class="summernote" + lang="ko-KR" + summer-note-auto-focus + ng-model="vm.form.description" + data-editor="vm.summerNote.editor" + data-editable="vm.summerNote.editable" + on-image-upload="fn.imageUpload(files)" + target=".note-editable"></summernote> + </div> + + <div class="row"> + <div class="col-lg-12"> + <div class="form-group mb10"> + <label for="issueAddForm5" class="issue-label"> <span translate="common.period">湲곌컙</span> + </label> + <input id="issueAddForm5" + tabindex="-1" + type="text" + readonly + class="form-control cursor" + placeholder="{{'issue.clickToSelectDate' | translate}}" + ng-model="vm.form.startCompleteDateRange" + modal-form-auto-scroll + date-format="YYYY-MM-DD" + parent-el="'#createdWidget'" + date-range-picker> + <div class="row"> + <div class="col-xs-12"> + <div id="createdWidget" class="bootstrap-datepicker"></div> + </div> + </div> + </div> + </div> + </div> + <div class="row"> + <div class="col-lg-3"> + <div class="form-group mb10"> + <div class="form-group mb10"> + <label class="issue-label"> <span translate="common.assigneeTeam">�떞�떦遺��꽌</span> </label> + <select id="issueAddForm" + name="issueType" + class="form-control input-sm issue-select-label" + ng-model="vm.form.issueTypeId" + ng-change="fn.getIssueTypeCustomFields()" + ng-style="{ 'color' : fn.getOptionColor(vm.issueTypes, vm.form.issueTypeId) }" + required> + <option value="" ng-style="{ 'color' : '#353535' }"><span>議곗튂�슜�뿭</span></option> + <option value="" ng-style="{ 'color' : '#353535' }"><span>遺꾩꽍�슜�뿭</span></option> + <option value="" ng-style="{ 'color' : '#353535' }"><span>�긽�솴�떎</span></option> + <option ng-repeat="issueType in vm.issueTypes" + ng-style="{ 'color' : issueType.color, 'font-weight': 600 }" + value="{{issueType.id}}">�뿈 {{issueType.name}} + </option> + </select> + </div> + </div> + + </div> + <div class="col-lg-3"> + <div class="form-group mb10"> + <div class="form-group mb10"> + <label class="issue-label"> <span>�뾽醫�</span> </label> + <select id="issueAddFormIP" + name="issueType" + class="form-control input-sm issue-select-label" + ng-model="vm.form.issueTypeId" + ng-change="fn.getIssueTypeCustomFields()" + ng-style="{ 'color' : fn.getOptionColor(vm.issueTypes, vm.form.issueTypeId) }" + required> + <option value="" translate="common.selectTarget" ng-style="{ 'color' : '#353535' }"><span>���긽 �꽑�깮</span> + </option> + <option ng-repeat="issueType in vm.issueTypes" + ng-style="{ 'color' : issueType.color, 'font-weight': 600 }" + value="{{issueType.id}}">�뿈 {{issueType.name}} + </option> + </select> + </div> + + + </div> + </div> + <div class="col-lg-3"> + <div class="form-group mb10"> + <div class="form-group mb10"> + <label class="issue-label"> <span>�룄硫붿씤</span> </label> + <input id="issueAddForm8" + tabindex="-1" + type="text" + class="form-control cursor" + /> + + </div> + + + </div> + </div> + <div class="col-lg-3"> + <div class="form-group mb10"> + <div class="form-group mb10"> + <label class="issue-label"> <span>寃쎌쑀吏�IP</span> </label> + <input id="issueAddForm*" + tabindex="-1" + type="text" + class="form-control cursor" + /> + </div> + + + </div> + </div> + </div> + </form> + </div> + + + </div> + </div> +</div> diff --git a/src/main/webapp/views/common/sidebar.html b/src/main/webapp/views/common/sidebar.html index 38a2ded..149b253 100644 --- a/src/main/webapp/views/common/sidebar.html +++ b/src/main/webapp/views/common/sidebar.html @@ -296,6 +296,7 @@ </div> <span translate="common.project">�봽濡쒖젥�듃</span></a> </li> + <li class="sub-header" ng-if="$root.checkMngPermissionSettings()"> <span>custom workflow</span> </li> @@ -375,6 +376,33 @@ </div> <span translate="guide.manageGuide">媛��씠�뱶 愿�由�</span></a> </li> + + <li class="sub-header"> + <span>API</span> + </li> + + <li> + <a ui-sref="api.auth" tabindex="-1"> + <div class="icon-w"> + <div class="os-icon os-icon-package"></div> + </div> + <span translate="api.auth">API �씤利�</span></a> + </li> + + <li> + <a ui-sref="api.setting" tabindex="-1"> + <div class="icon-w"> + <div class="os-icon os-icon-package"></div> + </div> + <span translate="api.setting">API �꽕�젙</span></a> + </li> + <li> + <a ui-sref="api.monitor" tabindex="-1"> + <div class="icon-w"> + <div class="os-icon os-icon-package"></div> + </div> + <span translate="api.monitor">API 紐⑤땲�꽣留�</span></a> + </li> </ul> <!-- <div class="side-menu-magic" style="padding:10px;width:100%;height:300px;">--> <!-- <embed style="width:100%;height:100%;" type="text/html" src="../../assets/clientWeb/clientevent.html">--> -- Gitblit v1.8.0