Provision
/
UnivateProperties
ウォッチ 1
スター 0
フォーク 0
コード 課題 0 プルリクエスト 0 リリース 0 Wiki アクティビティ
ソースを参照

check in of temp for modeling

master
Kobus 5年前
親
281ab04c80
コミット
031024e894
9個のファイルの変更、320行の追加、32行の削除
分割表示 差分情報を表示
  1. 7
    0
      public/css/dragndrop.table.columns.css
  2. 37
    31
      public/index.html
  3. 135
    0
      public/js/dragndrop.table.columns.js
  4. 7
    0
      public/js/dragndrop.table.columns.min.js
  5. 4
    0
      public/js/jquery-3.2.1.slim.min.js
  6. 3
    0
      src/components/shared/navBar.vue
  7. 119
    0
      src/components/test.vue
  8. 7
    0
      src/router/index.js
  9. 1
    1
      vue.config.js

+ 7
- 0
public/css/dragndrop.table.columns.css ファイルの表示 

@@ -0,0 +1,7 @@
1 
+body {
2 
+    background-color: #f9f9f9
3 
+}
4 
+
5 
+.container {
6 
+    margin-top: 20px;
7 
+}

+ 37
- 31
public/index.html ファイルの表示 

@@ -1,38 +1,44 @@
1 1 
 <!DOCTYPE html>
2 2 
 <html lang="en">
3 3
4 
-<head>
5 
-  <meta charset="utf-8">
6 
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 
-  <meta name="viewport" content="width=device-width,initial-scale=1.0">
8 
-  <link rel="icon" href="<%= BASE_URL %>favicon.png">
9 
-  <link href="img/univate.PNG" rel="apple-touch-icon">
10 
-  <title>Uni-Vate Properties</title>
4 
+  <head>
5 
+    <meta charset="utf-8">
6 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
8 
+    <link rel="icon" href="<%= BASE_URL %>favicon.png">
9 
+    <link href="img/univate.PNG" rel="apple-touch-icon">
10 
+    <title>Uni-Vate Properties</title>
11 11
12 
-  <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
13 
-  <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
14 
-  <link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
15 
-  <link href="lib/animate/animate.min.css" rel="stylesheet">
16 
-  <link href="lib/ionicons/css/ionicons.min.css" rel="stylesheet">
17 
-  <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
18 
-  <link href="css/style.css" rel="stylesheet">
19 
-</head>
12 
+    <link
13 
+      href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"
14 
+      rel="stylesheet">
15 
+    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
16 
+    <link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
17 
+    <link href="lib/animate/animate.min.css" rel="stylesheet">
18 
+    <link href="lib/ionicons/css/ionicons.min.css" rel="stylesheet">
19 
+    <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
20 
+    <link href="css/style.css" rel="stylesheet">
21 
+    <link rel="stylesheet" href="css/dragndrop.table.columns.css" />
22 
+  </head>
20 23
21 
-<body>
22 
-  <noscript>
23 
-    <strong>We're sorry but bootvue doesn't work properly without JavaScript
24 
-      enabled. Please enable it to continue.</strong>
25 
-  </noscript>
26 
-  <div id="app"></div>
27 
-</body>
28 
-<script src="lib/jquery/jquery.min.js"></script>
29 
-<script src="lib/jquery/jquery-migrate.min.js"></script>
30 
-<script src="lib/popper/popper.min.js"></script>
31 
-<script src="lib/bootstrap/js/bootstrap.min.js"></script>
32 
-<script src="lib/easing/easing.min.js"></script>
33 
-<script src="lib/owlcarousel/owl.carousel.min.js"></script>
34 
-<script src="lib/scrollreveal/scrollreveal.min.js"></script>
35 
-
36 
-<script src="js/main.js"></script>
24 
+  <body>
25 
+    <noscript>
26 
+      <strong>We're sorry but bootvue doesn't work properly without JavaScript
27 
+        enabled. Please enable it to continue.</strong>
28 
+    </noscript>
29 
+    <div id="app"></div>
30 
+  </body>
31 
+  <script src="lib/jquery/jquery.min.js"></script>
32 
+  <script src="lib/jquery/jquery-migrate.min.js"></script>
33 
+  <script src="lib/popper/popper.min.js"></script>
34 
+  <script src="lib/bootstrap/js/bootstrap.min.js"></script>
35 
+  <script src="lib/easing/easing.min.js"></script>
36 
+  <script src="lib/owlcarousel/owl.carousel.min.js"></script>
37 
+  <script src="lib/scrollreveal/scrollreveal.min.js"></script>
38 
+  <script src="js/dragndrop.table.columns.min.js" type="text/javascript"></script>
39 
+  <script src="js/main.js"></script>
40 
+  <script>
41 
+		$('.table').dragableColumns();
42 
+	</script>
37 43
38 44 
 </html>

+ 135
- 0
public/js/dragndrop.table.columns.js ファイルの表示 

@@ -0,0 +1,135 @@
1 
+/*global $:false, jQuery:false*/
2 
+/*
3 
+Drag & Drop Table Columns v.3.1.5
4 
+for jQuery 3.x
5 
+by Oleksandr Nikitin (a.nikitin@i.ua)
6 
+https://github.com/alexshnur/drag-n-drop-table-columns
7 
+*/
8 
+(function($, window){
9 
+	var cols, dragSrcEl = null, dragSrcEnter = null, dragableColumns, _this;
10 
+
11 
+	function insertAfter(elem, refElem) {
12 
+		return refElem.parentNode.insertBefore(elem, refElem.nextSibling);
13 
+	}
14 
+
15 
+	function isIE () {
16 
+		var nav = navigator.userAgent.toLowerCase();
17 
+		return (nav.indexOf('msie') !== -1) ? parseInt(nav.split('msie')[1]) : false;
18 
+	}
19 
+
20 
+	dragableColumns = (function(){
21 
+		var $table;
22 
+		function dragColumns (table, options) {
23 
+			_this = this;
24 
+			$table = table;
25 
+			_this.options = $.extend({}, _this.options, options);
26 
+			if (_this.options.drag) {
27 
+				if (isIE() === 9) {
28 
+					$table.find('thead tr th').each(function(){
29 
+						if ($(this).find('.drag-ie').length === 0) {
30 
+							$(this).html($('<a>').html($(this).html()).attr('href', '#').addClass('drag-ie'));
31 
+						}
32 
+					});
33 
+				}
34 
+				cols = $table.find('thead tr th');
35 
+
36 
+				jQuery.event.addProp('dataTransfer');
37 
+				[].forEach.call(cols, function(col){
38 
+					col.setAttribute('draggable', true);
39 
+
40 
+					$(col).on('dragstart', _this.handleDragStart);
41 
+					$(col).on('dragenter', _this.handleDragEnter);
42 
+					$(col).on('dragover', _this.handleDragOver);
43 
+					$(col).on('dragleave', _this.handleDragLeave);
44 
+					$(col).on('drop', _this.handleDrop);
45 
+					$(col).on('dragend', _this.handleDragEnd);
46 
+				});
47 
+			}
48 
+		}
49 
+
50 
+		dragColumns.prototype = {
51 
+			options: {
52 
+				drag: true,
53 
+				dragClass: 'drag',
54 
+				overClass: 'over',
55 
+				movedContainerSelector: '.dnd-moved'
56 
+			},
57 
+			handleDragStart: function(e) {
58 
+				$(this).addClass(_this.options.dragClass);
59 
+				dragSrcEl = this;
60 
+				e.dataTransfer.effectAllowed = 'copy';
61 
+				e.dataTransfer.setData('text/html', this.id);
62 
+			},
63 
+			handleDragOver: function (e) {
64 
+				if (e.preventDefault) {
65 
+					e.preventDefault();
66 
+				}
67 
+				e.dataTransfer.dropEffect = 'copy';
68 
+				return;
69 
+			},
70 
+			handleDragEnter: function (e) {
71 
+				dragSrcEnter = this;
72 
+				[].forEach.call(cols, function (col) {
73 
+					$(col).removeClass(_this.options.overClass);
74 
+				});
75 
+				$(this).addClass(_this.options.overClass);
76 
+				return;
77 
+			},
78 
+			handleDragLeave: function (e) {
79 
+				if (dragSrcEnter !== e) {
80 
+					//this.classList.remove(_this.options.overClass);
81 
+				}
82 
+			},
83 
+			handleDrop: function (e) {
84 
+				if (e.stopPropagation) {
85 
+					e.stopPropagation();
86 
+				}
87 
+				if (dragSrcEl !== e) {
88 
+					_this.moveColumns($(dragSrcEl).index(), $(this).index());
89 
+				}
90 
+				return;
91 
+			},
92 
+			handleDragEnd: function (e) {
93 
+				var colPositions = {
94 
+						array: [],
95 
+						object: {}
96 
+					};
97 
+				[].forEach.call(cols, function (col) {
98 
+					var name = $(col).attr('data-name') || $(col).index();
99 
+					$(col).removeClass(_this.options.overClass);
100 
+					colPositions.object[name] = $(col).index();
101 
+					colPositions.array.push($(col).index());
102 
+				});
103 
+				if (typeof _this.options.onDragEnd === 'function') {
104 
+					_this.options.onDragEnd(colPositions);
105 
+				}
106 
+				$(dragSrcEl).removeClass(_this.options.dragClass);
107 
+				return;
108 
+			},
109 
+			moveColumns: function (fromIndex, toIndex) {
110 
+				var rows = $table.find(_this.options.movedContainerSelector);
111 
+				for (var i = 0; i < rows.length; i++) {
112 
+					if (toIndex > fromIndex) {
113 
+						insertAfter(rows[i].children[fromIndex], rows[i].children[toIndex]);
114 
+					} else if (toIndex < $table.find('thead tr th').length - 1) {
115 
+						rows[i].insertBefore(rows[i].children[fromIndex], rows[i].children[toIndex]);
116 
+					}
117 
+				}
118 
+			}
119 
+		};
120 
+
121 
+		return dragColumns;
122 
+
123 
+	})();
124 
+
125 
+	return $.fn.extend({
126 
+		dragableColumns: function(){
127 
+			var option = (arguments[0]);
128 
+			return this.each(function() {
129 
+				var $table = $(this);
130 
+				new dragableColumns($table, option);
131 
+			});
132 
+		}
133 
+	});
134 
+
135 
+})(window.jQuery, window);

+ 7
- 0
public/js/dragndrop.table.columns.min.js ファイルの表示 

@@ -0,0 +1,7 @@
1 
+/*
2 
+ Drag & Drop Table Columns v.3.1.5
3 
+ for jQuery 3.x
4 
+ by Oleksandr Nikitin (a.nikitin@i.ua)
5 
+ https://github.com/alexshnur/drag-n-drop-table-columns
6 
+ */
7 
+!function(n,e){function t(n,e){return e.parentNode.insertBefore(n,e.nextSibling)}function a(){var n=navigator.userAgent.toLowerCase();return-1!==n.indexOf("msie")?parseInt(n.split("msie")[1]):!1}var r,o,d,i=null,s=null;return o=function(){function e(e,t){d=this,o=e,d.options=n.extend({},d.options,t),d.options.drag&&(9===a()&&o.find("thead tr th").each(function(){0===n(this).find(".drag-ie").length&&n(this).html(n("<a>").html(n(this).html()).attr("href","#").addClass("drag-ie"))}),r=o.find("thead tr th"),jQuery.event.addProp("dataTransfer"),[].forEach.call(r,function(e){e.setAttribute("draggable",!0),n(e).on("dragstart",d.handleDragStart),n(e).on("dragenter",d.handleDragEnter),n(e).on("dragover",d.handleDragOver),n(e).on("dragleave",d.handleDragLeave),n(e).on("drop",d.handleDrop),n(e).on("dragend",d.handleDragEnd)}))}var o;return e.prototype={options:{drag:!0,dragClass:"drag",overClass:"over",movedContainerSelector:".dnd-moved"},handleDragStart:function(e){n(this).addClass(d.options.dragClass),i=this,e.dataTransfer.effectAllowed="copy",e.dataTransfer.setData("text/html",this.id)},handleDragOver:function(n){n.preventDefault&&n.preventDefault(),n.dataTransfer.dropEffect="copy"},handleDragEnter:function(e){s=this,[].forEach.call(r,function(e){n(e).removeClass(d.options.overClass)}),n(this).addClass(d.options.overClass)},handleDragLeave:function(n){},handleDrop:function(e){e.stopPropagation&&e.stopPropagation(),i!==e&&d.moveColumns(n(i).index(),n(this).index())},handleDragEnd:function(e){var t={array:[],object:{}};[].forEach.call(r,function(e){var a=n(e).attr("data-name")||n(e).index();n(e).removeClass(d.options.overClass),t.object[a]=n(e).index(),t.array.push(n(e).index())}),"function"==typeof d.options.onDragEnd&&d.options.onDragEnd(t),n(i).removeClass(d.options.dragClass)},moveColumns:function(n,e){for(var a=o.find(d.options.movedContainerSelector),r=0;r<a.length;r++)e>n?t(a[r].children[n],a[r].children[e]):e<o.find("thead tr th").length-1&&a[r].insertBefore(a[r].children[n],a[r].children[e])}},e}(),n.fn.extend({dragableColumns:function(){var e=arguments[0];return this.each(function(){var t=n(this);new o(t,e)})}})}(window.jQuery,window);

+ 4
- 0
public/js/jquery-3.2.1.slim.min.js
ファイル差分が大きすぎるため省略します
ファイルの表示


+ 3
- 0
src/components/shared/navBar.vue ファイルの表示 

@@ -208,6 +208,9 @@
208 208 
               </span>
209 209 
               <span v-else></span>
210 210 
             </li>
211 
+            <li class="nav-item dropdown">
212 
+              <a class="nav-link" @click="routerGoTo('/test')" role="button">Test</a>
213 
+            </li>
211 214 
           </ul>
212 215 
         </div>
213 216 
       </div>

+ 119
- 0
src/components/test.vue ファイルの表示 

@@ -0,0 +1,119 @@
1 
+<template>
2 
+  <div>
3 
+    <div class="container">
4 
+      <br />
5 
+      <br />
6 
+      <br />
7 
+      <br />
8 
+      <br />
9 
+      <br />
10 
+      <br />
11 
+      <div class="row">
12 
+        <div class="col-md-12">
13 
+          <input
14 
+            v-model="searchItem"
15 
+            class="form-control"
16 
+            placeholder="Filter users by name or age"
17 
+          />
18 
+          {{sortKey}}
19 
+          {{reverse}}
20 
+          <table class="table table-bordered table-hover">
21 
+            <thead>
22 
+              <tr class="dnd-moved">
23 
+                <th v-for="(column, c) in Columns" :key="c">
24 
+                  <div @click="sortBy(column)">{{column}}</div>
25 
+                </th>
26 
+              </tr>
27 
+            </thead>
28 
+            <tbody>
29 
+              <tr v-for="(item, i) in filteredUsers" :key="i" class="text-left dnd-moved">
30 
+                <td v-for="(column, c) in Columns" :key="c">{{item[column]}}</td>
31 
+              </tr>
32 
+            </tbody>
33 
+          </table>
34 
+        </div>
35 
+      </div>
36 
+    </div>
37 
+  </div>
38 
+</template>
39 
+
40 
+<script>
41 
+import _ from 'lodash';
42 
+
43 
+export default {
44 
+  created() {
45 
+    $('.table').dragableColumns({
46 
+      drag: true,
47 
+      dragClass: 'drag',
48 
+      overClass: 'over',
49 
+      movedContainerSelector: '.dnd-moved',
50 
+    });
51 
+  },
52 
+  data() {
53 
+    return {
54 
+      sortKey: '',
55 
+      reverse: false,
56 
+      searchItem: 'k',
57 
+      items: [
58 
+        { surname: 'Botha', name: 'Kobus' },
59 
+        { id: 2, name: 'Pieter' },
60 
+        { id: 3, name: 'George', sex: 'male' },
61 
+        { id: 4, name: 'Lene', age: 34 },
62 
+      ],
63 
+    };
64 
+  },
65 
+  methods: {
66 
+    sortBy(sortKey) {
67 
+      this.reverse = this.sortKey === sortKey ? !this.reverse : false;
68 
+      this.sortKey = sortKey;
69 
+    },
70 
+  },
71 
+  computed: {
72 
+    SortDirection() {
73 
+      return this.reverse ? 'desc' : 'asc';
74 
+    },
75 
+    Columns() {
76 
+      const list = [];
77 
+      for (const i in this.items) {
78 
+        const item = this.items[i];
79 
+        for (const o in Object.keys(item)) {
80 
+          if (!list.includes(Object.keys(item)[o])) {
81 
+            list.push(Object.keys(item)[o]);
82 
+          }
83 
+        }
84 
+      }
85 
+      return list;
86 
+    },
87 
+    filteredUsers() {
88 
+      const list = this.items.filter(item => Object.values(item).some(
89 
+          i => JSON.stringify(i)
90 
+              .toLowerCase()
91 
+              .indexOf(this.searchItem) > -1,
92 
+        ),);
93 
+      return _.orderBy(list, this.sortKey, this.SortDirection);
94 
+    },
95 
+  },
96 
+};
97 
+</script>
98 
+<style scoped>
99 
+th[draggable] a,
100 
+th[draggable] {
101 
+  cursor: move;
102 
+}
103 
+th[draggable] a:hover,
104 
+th[draggable] a {
105 
+  display: block;
106 
+  text-decoration: none;
107 
+  color: #333333;
108 
+}
109 
+.drag {
110 
+  background-color: rgba(0, 255, 0, 0.35);
111 
+  opacity: 0.25;
112 
+}
113 
+.dnd-drag {
114 
+  opacity: 0.25;
115 
+}
116 
+.over {
117 
+  background-color: rgba(0, 0, 255, 0.35);
118 
+}
119 
+</style>

+ 7
- 0
src/router/index.js ファイルの表示 

@@ -43,6 +43,8 @@ import Offer from '../components/processFlow/offers.vue';
43 43 
 import searchLog from '../components/admin/logs/SearchLogs.vue';
44 44 
 // import store from '../store';
45 45
46 
+import test from '../components/test.vue';
47 
+
46 48 
 Vue.use(Router);
47 49
48 50 
 export default new Router({
 
@@ -57,6 +59,11 @@ export default new Router({
57 59 
     name: 'Home',
58 60 
     component: HomePage,
59 61 
   },
62 
+  {
63 
+    path: '/test',
64 
+    name: 'test',
65 
+    component: test,
66 
+  },
60 67 
   {
61 68 
     path: '/about/us',
62 69 
     name: 'aboutus',

+ 1
- 1
vue.config.js ファイルの表示 

@@ -2,7 +2,7 @@ module.exports = {
2 2 
   devServer: {
3 3 
     proxy: {
4 4 
       '/api': {
5 
-        target: 'http://localhost:57260',
5 
+        target: 'http://192.168.6.188:5000',
6 6 
         changeOrigin: true,
7 7 
       },
8 8 
     },

書き込み プレビュー
読み込み中…
キャンセル
保存